DOM 인터랙션

프레임워크 뒤에 가려진 브라우저 기본 API를 다시 꺼내, 이벤트 흐름과 사용자 상호작용을 직접 설명할 수 있게 만드는 학습 자료

학습 대상

• 프론트엔드 프레임워크를 쓰지만 브라우저 이벤트와 DOM 기본기를 다시 정리하고 싶은 개발자
• addEventListener, requestSubmit(), navigator.clipboard, Web Components를 한 흐름으로 묶어 이해하고 싶은 분
• 오래된 DOM 강의 내용을 현재 브라우저 기준으로 다시 읽고 싶은 분
• 실무에서 포커스 이동, 파일 드롭, 폼 검증, 커스텀 엘리먼트를 직접 다뤄야 하는 분

학습 목표

• DOM 인터랙션을 이벤트, 입력, 폼, 브라우저 API, Web Components 흐름으로 설명할 수 있다
• addEventListener 옵션 객체와 이벤트 위임 패턴을 현대적으로 사용할 수 있다
• submit()과 requestSubmit()의 차이, Constraint Validation API의 역할을 이해한다
• Clipboard API, Drag and Drop, MutationObserver를 언제 쓰고 언제 피해야 하는지 구분할 수 있다
• Web Components의 장점과 한계를 실무 관점에서 설명할 수 있다

선행 조건

• querySelector, createElement, append, classList 같은 기본 DOM 조작을 알고 있으면 좋다
• HTML 폼과 브라우저 기본 이벤트를 한 번쯤 써 본 경험이 있으면 이해가 더 빠르다
• 특정 프레임워크 지식은 필수는 아니지만, React/Vue 같은 UI 라이브러리를 써 봤다면 더 입체적으로 읽을 수 있다

학습 원칙

• 이 시리즈는 스펙 문서 전체를 번역하는 대신 언제 왜 쓰는가에 집중한다
• 속성 이름 나열보다 실제 UI 시나리오를 먼저 본다
• 낡은 방식은 존재를 짚되, 본문 예시는 현재 권장 방식 위주로 정리한다
• 프레임워크 사용 여부와 무관하게 브라우저 기본 동작을 이해하는 데 목적을 둔다

학습 로드맵

목차

챕터	제목	핵심 내용
01	DOM 인터랙션 큰 그림과 현대적 접근	DOM 인터랙션을 시나리오 중심으로 읽는 법, 프레임워크와 브라우저 API의 관계
02	HTMLElement와 속성 제어	상속 구조, 글로벌 속성, dataset, hidden, inert, 포커스 관련 속성
03	이벤트 시스템과 리스너 옵션	addEventListener, once, capture, passive, signal, 제거 패턴
04	이벤트 플로우와 위임 패턴	캡처/타깃/버블, target과 currentTarget, closest(), CustomEvent
05	포인터·키보드·입력 이벤트	Pointer Events, focusin/out, beforeinput, IME 조합 이벤트
06	폼 유효성 검증과 FormData	requestSubmit(), Constraint Validation API, FormData, 비동기 전송
07	Clipboard·DragDrop·MutationObserver	보안 컨텍스트, user activation, 파일 드롭, DOM 변경 감지
08	Web Components	Custom Elements, Shadow DOM, <template>, <slot>, ElementInternals

핵심 키워드 맵

이 시리즈를 읽는 법

• API 이름보다 먼저 사용자 행동 -> 브라우저 기본 동작 -> 내가 개입할 지점 순서로 본다
• 리스너 등록, 포커스 제어, 폼 제출은 따로 떨어진 주제가 아니라 하나의 사용자 흐름으로 읽는다
• Drag and Drop, Clipboard, Web Components는 가능하다보다 어떤 상황에서 현실적인가를 같이 본다
• 프레임워크를 쓰더라도 브라우저 기본 동작을 모르고 넘어가면 디버깅이 어렵다는 점을 기억한다

원문에서 현대화한 핵심 포인트

• onclick 같은 인라인 이벤트 핸들러는 역사적 방식으로만 다루고, 본문 예시는 addEventListener 중심으로 재구성한다
• 이벤트 해제는 removeEventListener만 강조하지 않고 AbortController와 signal 패턴까지 포함한다
• 폼 제출은 submit()보다 requestSubmit()과 브라우저 기본 유효성 검사를 중심으로 설명한다
• Clipboard API는 HTTPS 같은 보안 컨텍스트와 사용자 활성화 조건을 함께 다룬다
• Drag and Drop은 앱 내부 재정렬보다 파일 드롭과 데스크톱형 UI에 더 적합하다는 점을 분명히 한다
• Web Components는 장점만 나열하지 않고, Safari에서 customized built-in 요소 이식성이 낮다는 점과 선언적 Shadow DOM 같은 최신 흐름을 함께 정리한다

출처

• 원문 자료: ing-0017-DOM-인터렉션.md 강의 전사본
• MDN Web Docs
• WHATWG HTML / DOM 관련 표준 문서