[Angular] 구성 요소

1. Component

- 템플릿과 메타데이터 그리고 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결된다. 컴포넌트는 화면을 구성하는 View를 생성하고 관리하는 것이 주된 역할이다.

 

2. Directive

- 애플리케이션 전역에서 사용할 수 있는 View에 관련한 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로 컴포넌트의 복잡도를 낮추고 가독성을 높여준다. Structural Directive와 Attribute Directive로 구분할 수 있으며 큰 틀에서는 Component와 Directive로 구분한다.

 

3. Service

- 다양한 목적의 애플리케이션 공통적인 로직을 담당한다. Component에서 애플리케이션 전역 관심사를 분리하기 이해 사용하며 Dependency Injection이 가능한 클래스로 작성된다.

 

4. Router

- Component를 교체하는 방법으로 뷰를 전환하여 화면간 이동을 구현한다.

 

5. NgModule

- 기능적으로 관련된 구성요소를 하나의 단위로 묶는 메커니즘을 말한다. 모듈은 관련된 기능들이 응집된 블록으로 애플리케이션을 구성하는 하나의 단위를 만든다. 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하며 애플리케이션을 구성한다.

 

6. Pipe

- 템플릿에서 값의 표시되는 형태를 변환해서 보여주기 위해서 사용한다. 예시로 Date 형식을 사용자가 읽기 쉬운 형식으로 바꿔주기를 원할 것인데 이때 데이터 자체를 변경하는 것은 Side Effect가 있ㅇ으므로 화면에 표시되는 형식만 변경하고 싶을 때 사용하는 것이 Pipe이다.

 

7. Guard 

- Component에게 요청을 전달하기 전 먼저 동작을 하기위해 사용한다. 보통 Router를 사용하면서 접하게 되는데 Routing을 진행하는 동안 url에 대한 접근을 제어할 때 사용한다.

• CanActivate Guard: 라우터에 대해서 접근이 가능한지 불가능한지 접근 권한을 체크하는 기능
• CanActivateChild Guard: CanAtivate Guard와 같은 역할을 하며 자식 라우터의 접근에 대한 판별을 한다.
• CanDeactivate Guard: 현재 라우터에서 다른 라우터로 변경되면서 현재의 라우터가 비활성 될 때 호출된다.
• Resolve Guard: 라우터의 데이터를 가져와 Component에 제공하는 역할을 한다.
• CanLoad Guard: Module 사용을 방지한다. LazyLoad된 Module에서 사용한다.