값 다루기
변수와 연산으로 상태 만들기let, const, number/string/boolean, if, for는 DOM을 바꾸기 전 상태와 분기를 만듭니다.
동작 묶기
함수와 객체로 책임 나누기callback, closure, method는 이벤트 핸들러 안에서 재사용할 동작과 상태를 묶습니다.
화면 연결
DOM 선택 뒤 이벤트로 반응하기querySelector로 요소를 찾고 addEventListener에서 textContent, classList, value를 바꿉니다.
관찰 지점
- 문법 문제는 변수 값과 조건식이 어느 줄에서 바뀌는지 표시합니다.
- 객체 문제는 property와 method가 같은 상태를 공유하는지 봅니다.
- DOM·이벤트 문제는 selector, listener, event target, 변경 속성 순서로 추적합니다.
브라우저 축
BOM
브라우저 창
window, location, history
DOM
문서 구조
document, querySelector, element
이벤트
사용자 동작
click, submit, input