카테고리

Frontend 22

1–9 / 전체 22

Javascript / Web components · 2026.04.01

[Part 1] Web Components — 등장 배경과 4가지 핵심 기술

React, Vue 없이 브라우저 표준만으로 재사용 컴포넌트를 만드는 Web Components API. Custom Elements, Shadow DOM, Template, ES Modules 4가지 핵심 기술을 소개합니다.

Javascript / Web components · 2026.04.08

customElements.define()으로 나만의 HTML 태그를 만드는 방법. Autonomous vs Customized built-in elements 차이와 실전 예제를 다룹니다.

Javascript / Web components · 2026.04.15

Shadow DOM으로 CSS 충돌을 완전히 막는 방법. open/closed 모드 차이, :host, ::slotted, CSS 변수로 외부에서 스타일을 커스터마이즈하는 패턴을 정리합니다.

Javascript / Web components · 2026.04.22

template 태그로 파싱 비용을 줄이고, slot으로 외부 콘텐츠를 삽입하는 패턴. named slot과 slotchange 이벤트 활용법까지 다룹니다.

Javascript / Web components · 2026.04.29

connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback 4가지 라이프사이클의 실행 시점과 올바른 사용 패턴을 정리합니다.

Javascript / Web components · 2026.05.06

CustomEvent로 부모에게 데이터 전달하기. composed: true로 Shadow DOM 경계 넘기, EventBus 패턴, 부모→자식 메서드 직접 호출 패턴까지 다룹니다.

Javascript / Web components · 2026.05.13

CSS 변수, ::part(), constructable stylesheets, adoptedStyleSheets로 Shadow DOM 안팎을 우아하게 스타일링하는 방법을 실전 코드로 정리합니다.

Javascript / Web components · 2026.05.20

ElementInternals API로 커스텀 엘리먼트를 네이티브 form과 연동하는 방법. formAssociated, setFormValue, validity 구현 패턴을 다룹니다.

Javascript / Web components · 2026.05.27

innerHTML을 매번 파싱하는 비용을 줄이는 static template 패턴. Heap/Stack 메모리 구조, cloneNode와 ES Modules type=module을 실전 코드로 정리합니다.