ShadowDOM

'<p>심연에서 왔도다</p>' p태그가 숨겨짐

스타일 캡슐화

각 컴포넌트의 스타일이 해당 컴포넌트의 뷰를 벗어나 다른 부분에 영향을 미치지 않도록 하는 기능을 나타낸다. 즉, 각 컴포넌트는 자체적으로 정의한 스타일을 갖고 있고, 이 스타일은 컴포넌트를 포함하는 뷰 내에서만 적용된다.

컴포넌트 스타일 캡슐화 두 가지 방식

Shadow DOM(영역 지역 돔)

• 브라우저 기능이다.
• 각 컴포넌트가 자체의 독립된 DOM 트리와 스타일 트리를 가질 수 있게 해준다.
• 단, 이 기능은 모든 브라우저에서 완전히 지원되지 않을 수 있다.

Emulated Encapsulation(시뮬레이션된 캡슐화)

• Shadow DOM을 지원하지 않는 브라우저에서는 Emulated Encapsulation을 사용한다.

예제)
.my-component 클래스는 .my-component[_ngcontent-c1]로 변환된다.

결론

• 스타일 캡슐화는 Angular 애플리케이션의 모듈성을 높인다.
• 컴포넌트 간의 간섭을 최소화하는데 도움이 된다.
• 개발자가 작성한 스타일은 해당 컴포넌트 내부에서만 적용된다.
• 각각의 컴포넌트를 독립적으로 개발하고 유지보수 할 수 있도록 해준다.

서비스와 의존성 주입

서비스(Service)

컴포넌트의 관심사와 애플리케이션 전역의 관심사를 분리하는 것이 필요한데 이때 사용하는 것이 서비스이다.

장점

애플리케이션 전역의 관심사를 분리하여 외부에서 관리할 수 있다면 컴포넌트는 자신의 관심사에 집중할 수 있어 복잡도가 낮아지고 서비스는 재사용이 가능하게 되어 일관된 애플리케이션 코드를 작성할 수 있다.

의존성 주입(Dependency Injection)

@Injectable

'root'를 설정하면 루트 인젝터에게 서비스를 제공하도록 지시하여 애플리케이션의 모든 구성요소에 싱글턴 전역 서비스를 주입할 수 있다.