[Part 1] Web Components — 등장 배경과 4가지 핵심 기술
React, Vue 없이 브라우저 표준만으로 재사용 컴포넌트를 만드는 Web Components API. Custom Elements, Shadow DOM, Template, ES Modules 4가지 핵심 기술을 소개합니다.
카테고리
React, Vue 없이 브라우저 표준만으로 재사용 컴포넌트를 만드는 Web Components API. Custom Elements, Shadow DOM, Template, ES Modules 4가지 핵심 기술을 소개합니다.
customElements.define()으로 나만의 HTML 태그를 만드는 방법. Autonomous vs Customized built-in elements 차이와 실전 예제를 다룹니다.
Shadow DOM으로 CSS 충돌을 완전히 막는 방법. open/closed 모드 차이, :host, ::slotted, CSS 변수로 외부에서 스타일을 커스터마이즈하는 패턴을 정리합니다.
AD
template 태그로 파싱 비용을 줄이고, slot으로 외부 콘텐츠를 삽입하는 패턴. named slot과 slotchange 이벤트 활용법까지 다룹니다.
connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback 4가지 라이프사이클의 실행 시점과 올바른 사용 패턴을 정리합니다.
CustomEvent로 부모에게 데이터 전달하기. composed: true로 Shadow DOM 경계 넘기, EventBus 패턴, 부모→자식 메서드 직접 호출 패턴까지 다룹니다.
AD
CSS 변수, ::part(), constructable stylesheets, adoptedStyleSheets로 Shadow DOM 안팎을 우아하게 스타일링하는 방법을 실전 코드로 정리합니다.
ElementInternals API로 커스텀 엘리먼트를 네이티브 form과 연동하는 방법. formAssociated, setFormValue, validity 구현 패턴을 다룹니다.
innerHTML을 매번 파싱하는 비용을 줄이는 static template 패턴. Heap/Stack 메모리 구조, cloneNode와 ES Modules type=module을 실전 코드로 정리합니다.