wkdska15905720

This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.

nhcodingstudio

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

실습 중심

웹개발

풀스택

이론과 실습 한 번에

이론 실습 모두

시각화

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

입문

초급

중급이상

HTML/CSS

자바스크립트

JavaScript

리액트

React

웹 API

Web API

Document Object Model

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

수업에 사용 될 예제 코드입니다. 수강 전에 반드시 다운로드해주세요!

📘 Section 1: 이벤트의 본질과 연결 방식 이해하기

🧠 Section 2: 이벤트 객체 활용과 마우스 이벤트 마스터하기

🧩 Section 3: 이벤트 위임과 동적 리스트 구조화

🔄 Section 4: 이벤트 흐름과 전파 구조 완전 분석

📝 Section 5: 폼 이벤트의 흐름과 제어 전략

⚙️ Section 6: 폼 속성과 유효성 검사 구현 기술

🚀 Section 7: 성능 최적화와 SPA 기반 반응형 UI 구현