INTERMEDIATE
2 hours•4 chapters
DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
Progress: 0%In progress
What You'll Learn
getElementById와 querySelector로 페이지 요소 선택하기
텍스트, 속성, 스타일을 업데이트하고 클릭·입력 이벤트에 반응하기
요소를 생성·제거하고 이벤트 위임을 사용해 데이터로부터 렌더링하기
유효성 검사와 함께 폼 제출을 처리하고 업데이트를 빠르고 반응성 있게 유지하기
Description
DOM 조작은 웹 페이지가 로드된 후에 변하는 방식입니다. 메시지를 표시하고, 테이블에 행을 추가하고, 폼을 검증하고, 클릭에 반응하는 것이죠. 이 튜토리얼은 모든 프레임워크의 토대가 되는 브라우저 네이티브 API(getElementById, querySelector, textContent, classList, addEventListener, createElement)를 다룹니다.
실행 가능한 코드 예제와 브라우저에서 직접 클릭해 볼 수 있는 인터랙티브 할 일 목록 데모, 그리고 그 옆에 놓인 동등한 바닐라 DOM 코드와 함께 네 개의 챕터를 진행합니다. 각 챕터는 원하는 동작을 AI 어시스턴트에게 설명하고 그 결과를 확인하는 방법도 보여줍니다.
끝까지 마치면 요소를 안전하게 선택하고, 이벤트를 연결하고, 데이터 배열로부터 목록을 렌더링하고, 제출 시 폼을 검증하고, 페이지를 느리게 느껴지게 만드는 layout thrashing 패턴을 피할 수 있게 됩니다.
What's inside
About 2 hours•4 chapters
- 1.요소 선택하기 — DOM이 무엇인지, getElementById와 querySelector로 요소를 찾는 법, 그리고 원하는 변경을 AI 어시스턴트에게 설명하는 법.
- 2.텍스트, 스타일, 이벤트 — 텍스트·속성·스타일을 읽고 변경하고, 첫 click·input 리스너를 연결하기.
- 3.이벤트와 렌더링 — 요소 생성과 제거, 이벤트 위임, 데이터 배열로부터의 DOM 렌더링.
- 4.폼과 성능 — 유효성 검사와 함께 폼 제출 처리하기, 그리고 빠르고 반응성 있는 앱을 위한 배칭과 디바운싱.
Work through the chapters in order — each one builds on the last, and the live to-do demo in Chapter 3 lets you run the concepts for real.