AI 요약관련 정보

• 웹 컴포넌트 API의 본질: 사용자 정의 UI를 컴포넌트 단위로 개발하여 코드 재사용성과 확장성을 높이는 웹 표준 기술입니다. 🧩
• HTML 태그로의 추상화: 개발된 컴포넌트는 사용자 정의 HTML 태그(예: like-button)로 정의되어 직관적이고 간결하게 사용될 수 있습니다. 🏷️
• 프레임워크 독립성: 웹 표준이므로 React, Vue, Angular 등 모든 웹 개발 프레임워크에서 호환되어 사용 가능합니다. 🌐
• 컴포넌트 생명주기 메서드: HTMLElement를 상속받아 constructor, connectedCallback, disconnectedCallback, adoptedCallback 등의 메서드를 통해 컴포넌트의 생성, 페이지 추가/제거, 이동 시 로직을 제어합니다. 🔄
• 섀도우 DOM을 통한 캡슐화: attachShadow를 사용하여 컴포넌트 내부의 DOM 구조와 스타일을 외부와 격리시켜 충돌을 방지하고 독립성을 보장합니다. 🛡️
• 속성(Attribute) 처리: static get observedAttributes()로 관찰할 속성을 등록하고, attributeChangedCallback을 통해 속성 값 변경에 반응하여 컴포넌트의 상태를 업데이트합니다. ⚙️
• 이벤트 처리 및 해제: connectedCallback에서 DOM 이벤트 리스너를 등록하고, disconnectedCallback에서 메모리 누수 방지를 위해 등록된 이벤트를 반드시 해제합니다. 👂
• 사용자 정의 이벤트 발행: CustomEvent를 생성하고 dispatchEvent를 통해 컴포넌트 내부의 상태 변화(예: 카운트 변경)를 외부에 알릴 수 있어 유연한 상호작용이 가능합니다. 📢
• 유지보수성 향상: 기능 단위의 컴포넌트 개발은 코드의 재사용성과 확장성을 높여 웹 애플리케이션의 유지보수를 용이하게 합니다. ✅