DOM과 이벤트 시스템

브라우저가 만든 DOM을 JavaScript로 다루는 방법, 트리 탐색, 이벤트 흐름, Observer 패턴을 시각화합니다

1. 01

   DOM 트리 구조와 노드 탐색

   HTML이 DOM 트리가 되는 과정과 JavaScript로 노드를 탐색하는 방법을 시각화합니다

2. 02

   이벤트의 흐름: 캡처링과 버블링

   DOM 이벤트가 트리를 따라 흐르는 3단계, 캡처, 타겟, 버블을 시각화합니다

3. 03

   이벤트 위임과 실전 패턴

   버블링을 활용한 이벤트 위임 패턴, stopPropagation, preventDefault, 그리고 passive 리스너를 시각화합니다

4. 04

   DOM 변화 감지: MutationObserver와 IntersectionObserver

   DOM 변경과 뷰포트 교차를 비동기적으로 감지하는 Observer API를 시각화합니다

5. 05

   requestAnimationFrame과 스크롤 최적화

   브라우저의 렌더링 사이클과 rAF의 동작 원리, 그리고 스크롤 성능 최적화를 시각화합니다