패스트캠퍼스 환급챌린지 42일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250811(월) 42일차

개념과 구조 - DOM / 이벤트 시스템

 

DOM 구조와 한계
DOM은 기본적으로 트리 형태의 자료 구조로 HTML 문서 전체를 객체화하여 JavaScript로 조작할 수 있게 해주지만

규모가 커질수록 DOM 조작은 코드의 복잡도와 결합도를 급격히 높이며 버그 발생과 유지보수 난이도를 치솟게 만든다

document.querySelector('#title').textContent = 'Hello';

위 코드는 간단해 보여도 여러 요소 간 상호작용이 많아질수록 제어 흐름을 추적하기 힘든 상태로 변해버린다

 

현대 개발에서의 대안

강의에서는 DOM API를 직접 다루기보다는 템플릿 엔진을 활용해 UI를 그리는 방법

혹은 프레임워크를 이용해 DOM을 추상화하는 방식을 강조했다

그 이유는 개발 생산성, 유지보수성, 그리고 명확한 데이터 흐름 때문

 

이벤트 전파 – 캡처링 vs 버블링 
이벤트 시스템 강의에서는 실제 DOM 구조를 기반으로 클릭 이벤트가 어떻게 전파되고

어떤 기준으로 이벤트 핸들러가 실행되는지를 실습 중심으로 설명했다

div.addEventListener('click', handler, true); // 캡처링
div.addEventListener('click', handler, false); // 버블링

버블링: 가장 안쪽 요소에서 시작해 바깥으로 전파 (물방울이 위로 올라가는 듯한 흐름)
캡처링: 가장 바깥쪽에서 안쪽 요소로 흐름 (상자를 열고 들어가는 듯한 흐름)

실습에서는 target과 currentTarget의 차이를 직접 확인하며 이벤트가 발생한 실제 요소와 핸들러가 연결된 요소의 차이를 이해할 수 있다 이러한 메커니즘을 제대로 이해해야 복잡한 이벤트 시스템에서 정확한 이벤트 컨트롤이 가능하다는 점을 체감했다

 

이벤트 루프 이해의 필요성 강조
또한 단순한 DOM 이벤트 처리뿐 아니라 브라우저의 이벤트 루프 메커니즘까지 학습의 중요성을 강조했다

이는 성능 튜닝이나 비동기 처리 최적화에서 반드시 필요한 개념이며 관련 추천 영상까지 소개하며 실무 감각을 높이는 데 도움을 받았다

 

이번 강의에서는 프론트엔드 개발자라면 피할 수 없는 존재 DOM(Document Object Model)과 이벤트 전파 시스템에 대해 배웠다

단순한 구조라기보다 수많은 API와 동작 규칙을 품은 DOM은 HTML을 실제 조작 가능한 객체로 바꾸어주는 브라우저의 핵심 요소이지만 강의에서는 DOM을 직접 조작하는 방식이 유지보수 측면에서 얼마나 위험한 선택인지에 대해서도 명확히 짚어주며

리액트/뷰 등 현대적 프레임워크가 DOM 접근을 제한하는 이유도 납득할 수 있었다