오늘 정리
코딩을 한다? 사용된 함수, 변수를 외우는 것이 아니라 그렇게 설계하게 된 배경과 흐름에 대해 배우고 익히는 것이 필요하다.
페이지 구현? 구현을 하기 전 구상을 해야한다. 어떤 페이지를 어떤 이벤트를 넣어 완성할 것인지 구상부터 하자.
강의 내용
- 브라우저(DOM+BOM+JavaScript)
- 로컬 PC에 다운로드 된 것이 실행되는 것이다.
- DOM 트리 + CSS 추가된 XMFL ⇒ 출력
- DOM : html을 조작하는 유일한 방법
- 유지관리 어려움, 구조적 문제 → 현재 React, VueJs
- why? DOM의 직접적인 조작은 지양하고, UI와 같은 부분은 DOM API를 활용하는 방식 多
[해커뉴스 실습]
- 강의과정
- 1-6 : 라우터(화면중계기 함수 처리) → 조건에 따라 화면 출력(뉴스목록/뉴스내용 페이지-돌아가기)
- 1-7 : 페이징 (hash값에 따른 화면 추가(리스트 10개씩 화면출력 3개 화면, 내용보기를 누르면 내용이 보이는 페이지로 전환-배열(push,join,삽입,덮어쓰기)-목록보기 누르면 다시 돌아오)
- 페이징처리
- show/page a태그로 추가 설정(상세내용 #/show/id값, 뉴스목록 #/page/페이지번호)
- router()에 hash값에 (’#/page/’) 포함 여부에 따른 페이지 구현 可 (indexOf() 함수 사용)
- 사용함수
- indexOf() : 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환, 찾을 수 없을 때는 -1을 반환 →routerPath의 인덱스를 찾기(없으면 0으로 반환, 있으면 1로 반환되거나 갯수만큼 반환됨)
- hashchange : 해쉬가 변경되면 이벤트가 시작
- removeChild(child) : 아래 자손까지 통째로 삭제해주는 함수
- 1-7 페이징 구상
[workout 실습]
- JavaScript : Dom 조작하기 위해 사용
- CSS : 디자인에 대한 일괄처리
- 관련 개념(<> : 태그, () : 함수)
- : html 문서의 독립적 구획을 나타냄(like div)
- : 탐색에 도움주는 콘텐츠(제목, 로고, 검색폼 등)
- scrollIntoView() : 스크롤바 설정(새로 추가된 아이템을 따라 스크롤 이동)
item.scrollIntoView({ block: 'center' })
- 페이지 기능 및 그림 구상
-
결과물
- 개발 tip
- onKeyDown 키를 눌렀을 때 이벤트 발생, 즉, 키를 입력하면 이벤트 발생 후 문자가 입력된다.
- onKeyUp 키를 눌렀다 놓았을 때 이벤트 발생, 즉, 키를 입력하면 문자 입력 후 이벤트가 발생된다.
- onKeyPress 특정 키가 눌렸을 때 이벤트 발생(해당 소스에서는 Enter)
강의 마무리
- 복습(구글개발자센터)
- 자바 복습용 자료 공유
