핵심 요약 (불릿)
- 표준 기반의 재사용 가능한 UI 구성 요소
- Custom Elements + Shadow DOM + HTML Templates로 구성
- 프레임워크에 의존하지 않는 독립적 컴포넌트 제작 가능
- 캡슐화(스타일·DOM 격리)로 안정적 유지보수 가능
실제 면접 답변 예시 (문장형)
“Web Components는 브라우저 표준만으로 재사용 가능한 UI 컴포넌트를 만들 수 있는 기술입니다. Custom Elements로 태그 자체를 정의하고, Shadow DOM으로 스타일과 구조를 캡슐화해 외부 영향 없이 독립적으로 동작하게 할 수 있습니다. 프레임워크와 무관하게 사용할 수 있어, 장기 유지보수나 여러 기술 스택이 혼재된 환경에서 특히 유리합니다.”
실무 팁 & 주의점
- Shadow DOM은 스타일 캡슐화에 좋지만 글로벌 스타일이나 리셋 적용이 어려울 수 있음.
- 프레임워크와 함께 사용할 경우 생명주기 훅 충돌이나 렌더링 시점 차이를 고려해야 함.
- IE 등 구형 브라우저는 폴리필이 필요하므로 지원 범위를 먼저 검토해야 안정적임.
'Coding Study > 면접질문' 카테고리의 다른 글
| 브라우저의 Reflow(Re-layout)와 Repaint의 차이점은 무엇이며, 이를 최소화하기 위한 방법은 무엇인가요? (0) | 2025.12.05 |
|---|---|
| CSS 우선순위(CSS Specificity)는 어떻게 결정되며, 스타일 충돌 상황에서 이를 어떻게 해결할 수 있나요? (0) | 2025.11.27 |
| JavaScript 이벤트 루프(Event Loop)는 어떻게 동작하며, 프론트엔드 애플리케이션에서 왜 중요한가요? (0) | 2025.11.26 |
| Intersection Observer API는 무엇이며, 프론트엔드에서 어떤 상황에서 활용하면 효과적인가요? (0) | 2025.11.26 |
| Web Worker는 무엇이며, 프론트엔드 애플리케이션에서 이를 활용하면 어떤 이점이 있나요? (0) | 2025.11.21 |