앙귤러 뷰 엔케이펄레이션 이해: 타입과 내부 작동 방식

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 특히 앙귤러 애플리케이션에서 스타일 유출 문제를 해결하는 개발자

난이도: 중급 (앙귤러 기초 지식 필요)

핵심 요약

• 뷰 엔케이펄레이션은 @angular/core의 ViewEncapsulation enum을 통해 Emulated, ShadowDom, None 세 가지 전략 제공
• Emulated(기본)는 런타임 시 CSS를 사전 처리하여 _ngcontent- 속성 선택자로 스타일 범위 제한 (Shadow DOM 사용 X)
• ShadowDom은 브라우저의 네이티브 Shadow DOM API 활용 (스타일 격리 O, Shadow DOM 사용 O)
• None은 전역 스타일 적용 (스타일 격리 X, 개발자 주의 필요)

섹션별 세부 요약

1. 뷰 엔케이펄레이션 개요

• 스타일 유출 문제: 컴포넌트 내 스타일이 다른 컴포넌트에 영향을 주는 현상
• 뷰 엔케이펄레이션의 역할: 컴포넌트 스타일의 범위를 제한하여 격리
• 기본 전략: Emulated (대부분의 프로젝트에서 사용)

2. 엔케이펄레이션 전략 세부 사항

• Emulated:

- _nghost-c0 (호스트 요소), _ngcontent-c0 (자식 요소) 속성 추가

- CSS 선택자에 _ngcontent-c0 속성 추가 (예: .box[_ngcontent-c0])

- Shadow DOM 사용 없이 스타일 격리 가능

• ShadowDom:

- 브라우저 네이티브 Shadow DOM API 사용

- _ngcontent-c0 속성 선택자 필요 없음

- 모든 브라우저가 Shadow DOM 기능 지원 X

• None:

- 스타일 전역 적용 (예: 글로벌 테마, 외부 콘텐츠 스타일링 시 유용)

- 대규모 프로젝트에서 충돌 위험 높음

3. Emulated 전략의 내부 작동 방식

• 컴포넌트 고유 속성 생성: 컴파일 시 app-root → _nghost-c0 (호스트), _ngcontent-c0 (자식)
• CSS 선택자 재작성: .box → .box[_ngcontent-c0]
• 스타일 격리: _ngcontent- ID가 다른 컴포넌트 스타일은 적용 X

4. ShadowDom 전략의 특징

• 브라우저 네이티브 Shadow DOM 사용
• 스타일 격리: 자동으로 적용 (Shadow DOM 내부에서만 작용)
• 제한사항: 글로벌 스타일 (폰트, 테마)이 Shadow DOM 내부로 투영되지 않을 수 있음

5. None 전략의 사용 시나리오

• 글로벌 스타일 적용: 외부 라이브러리, 글로벌 테마 정의
• 위험 요소: 대규모 프로젝트에서 스타일 충돌 발생 가능

결론

• Emulated 전략이 대부분의 프로젝트에 적합 (Compatibility & style isolation 균형)
• ShadowDom은 브라우저 지원이 충분한 경우에만 사용 (True encapsulation 가능)
• None은 주의 깊게 사용해야 하며, 외부 콘텐츠 스타일링 시 유용
• Angular의 내부 스타일 처리 방식 이해 → 스타일 유출 문제 예방 가능