변수와 자료형
let, const, typeof로 상태를
읽고 조건을 결정한다.
JS Runtime
JavaScript는 값, 문서, 브라우저, 이벤트를 함께 움직인다
문법 문제와 DOM 문제를 분리하지 말고, 사용자의 행동이 어떤 객체를 거쳐 화면 갱신으로 이어지는지 본다.
문서 요소 선택
querySelector가 돌려준 노드가 텍스트와 클래스를 바꿀
대상이다.
브라우저 환경
location, history,
navigator는 문서 밖의 환경 정보를 다룬다.
행동과 함수 연결
addEventListener는 이벤트 이름과 콜백을 한 쌍으로
묶는다.
선택 결과가 실제 노드인지 확인
document브라우저가 만든 문서 객체의 시작점
#todoFormsubmit 이벤트를 받을 부모 요소
button.saveclick이 발생하는 실제 target
#resulttextContent와 classList로 갱신되는 결과 영역
실패 위치는 네 칸 중 하나다
| 단계 | 확인 | 대표 실패 |
|---|---|---|
| ready | DOM 생성 뒤 실행 | 스크립트가 빨라 선택 결과가 null |
| select | 선택자와 요소 존재 | id, class 이름 불일치 |
| bind | 이벤트 이름과 콜백 | 함수 호출 결과를 넘김 |
| render | 텍스트, class, 속성 변경 | 계산은 됐지만 화면 반영 누락 |
사용자 행동이 화면 반응으로 바뀌는 순서
script실행 시점 고정
select노드 참조 확보
state값과 자료형 계산
event콜백 실행
render문서 갱신