2018-03-26

오늘은 HTML/CSS/JS로 작성한 숫자 알아맞추기 게임으로 실습해 본다.

웹기반 UI/UX 프로그래밍을 기본 개념

• event listener
• callback function

좀더 일반적인 요소 검색 DOM API 함수들

querySelector(맨 처음 나타나는 요소 검색)와 querySelectorAll(조건을 만족하는 모든 요소들) DOM API 함수는 CSS에서 사용하는 일반적인 selector 형태로 검색할 수 있다. 지금까지 요소 검색에 활용했던 getElementsByTagName(태그 이름으로), getElementById(id 속성값으로) getElementsbyClassName(class 속성값으로)를 대신해 사용 가능.

참고로 관련 라이브러리로 2006년경에 처음 출시된 jQuery라는 것이 있어 비슷한 기능을 제공한다. 처음 jQuery가 나올 당시에는 querySelector와 querySelectorAll가 DOM API로 제공되지 않았던 시절이었다. (오래된 브라우저까지 지원하는 하위호환성 측면에서는 jQuery가 더 낫지만 그럴 필요가 없고 새로 제공된 DOM API 함수로 할 수 있는 일이라면 굳이 jQuery를 사용하지 않아도 됨)

MDN 관련 항목:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
• https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

기타사항

시간이 허락하는 대로

javascript에서 이름없는 함수 활용

이건 그냥 코드만 간단히 설명한 후 다음 시간에 람다계산법과 함수형(뻥셔널)프로그래밍에 대해서 개략적으로 배경을 설명

git과 GitHub 사용법

잠깐 다루긴 했는데 아직 혼란이 있는 것 같아 좀더 자세히 설명해 혼란을 줄이도록.

아래 nodejs관련 예제를 github 저장소에 올려놓고 실습하는 학생들이 fork해서 clone하고 변경한 것을 commit하여 push하는 걸 한번 더 연습하자.

반복 연습만이 익숙해지는 길 ㅠ.ㅠ

nodejs 설치, 관련 아톰에서 플러그인 설치

• https://nodejs.org/ko 에서 안정버전 다운로드해 설치
• atom 패키지 atom-runner 설치 (윈도우즈에서는 단축키로 Alt-R로 js 파일을 nodjs로 실행 가능)

설치를 다 했으면

1. https://github.com/kyagrd/web0327 저장소를 웹에서 fork해서 자기 계정에 복사본 저장소를 만들기.
2. 깃헙 데스크탑 어플리케이션으로 자신이 실습하는 컴퓨터로 fork된 저장소를 clone하기. (zip으로 다운받지 말 것!)
3. clone된 저장도 디렉토리에서 atom 에디터로 hello.js 수정하며 (그냥 주석을 제거하는 정도) 실습.
4. 수정된 코드를 깃헙 데스크탑 어플에서 commit하고 온라인의 자기 깃헙 계정 저장소로 push한다.
5. 웹에서 변경사항이 push 되었는지 확인해 본다.