앵귤러에서 가장 중요한 개념 중 하나인 모듈에 대해 알아보도록 하겠습니다.
이번 포스트는 아래 내용을 다루고 있습니다.
- 앵귤러 모듈의 역할
- 애플리케이션의 구성
앵귤러 모듈이란
앵귤러 모듈은 NgModule 데코레이터가 있는 클래스입니다.
지난 포스트에서 계속 다뤘던 AppModule은 아래와 같습니다.
앵귤러 모듈의 역할
- 애플리케이션의 일부를 구성하고 이를 응집력 있는 기능 블록 정리해 주고 외부 라이브러리 기능 통해 애플리케이션을 확장하게 합니다.
- 앵귤러 모듈은 컴포넌트 템플릿에서 디렉티브와 파이프를 위한 실행 환경을 제공합니다.
- 다른 모듈로부터 클래스를 선택적으로 취합하여 통합 모듈로 다시 내보낼 수 있게 합니다.
- 애플리케이션이 시작될 때 빠르게 로드되거나 라우터에 의해 비동기적으로 느리게 로드(lazy load)를 가능하게 해 줍니다.
애플리케이션의 구성
앵귤러 모듈은 애플리케이션을 어떻게 구성할까요?
Angular 모듈은 관리하는 각 구성요소, 지시문 및 파이프를 선언(Declarations)합니다. 작성하는 모든 컴포넌트 디렉티브와 파이프는 하나의 모듈에 속해 있어야 합니다. 앵귤러 모듈은 루트 애플리케이션 컴포넌트를 부트스트랩하여 첫 번째 템플릿을 표시하는데 필요한 컴포넌트를 정의합니다.
앵귤러 모듈은 컴포넌트, 디렉티브, 파이프 및 기타 Angular 모듈들을 내보낼 수 있는데, 그러면 다른 모듈에서 export 한 부품을 다시 가져와서(imports) 사용할 수 있습니다.
Angular Module를 박스라고 생각해보세요.
우선 컴포넌트인 AppComponent, MovieListComponent, MovieDetailComponet, WelcomeComponent를 박스에 선언합니다.
해당 컴포넌트의 템플릿에 기능이 필요한 경우 해당 기능도 이 상자 내에 정의해야 합니다.
AppComponent의 템플릿은 routerLink를 사용하여 기본 메뉴에 대한 라우팅을 설정하고 router-outlet 디렉티브를 포함 하고 있으므로, 이 상자에는 RouterModule에 정의된 라우팅 지시문, 라우터 서비스 및 라우터가 필요합니다.
MovieListComponent 템플릿은 ngModel을 사용하므로 상자에 FormsModule, ngFor 및 ngIf를 사용하므로 상자에 BrowserModule, 커스텀 파이프를 사용하므로 상자에도 ConvertPipe가 필요합니다. 또한 MovieListComponent 템플릿은 <app-star-score> 디렉티브 사용하므로 상자 안에 각 구성 요소 템플릿에 필요한 모든 것이 포함되어 있어야 합니다.
Angular 모듈은 모듈에 속한 각 구성 요소에 대해 템플릿을 처리하고 실행할 수 있는 환경을 제공합니다. 다시 말하면 컴파일러가 HTML에 넣은 특별한 Angular 구문을 찾아 실행할 수 있는 방법을 제공합니다.
애플리케이션이 모두 하나의 모듈에 있다면 템플릿의 실행 환경을 생각할 필요가 없지만, 애플리케이션을 여러 앵귤러 모듈로 분할 할 때는 이를 반드시 염두해 둬야 합니다.
이번 포스트는 여기까지 입니다.
다음 포스트에서는 AppModule을 여러 모듈로 리팩터링 하여 코드 구성을 개선하겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 32. 공유 모듈(shared module) (0) | 2022.02.11 |
|---|---|
| 앵귤러 기초(Angular basic) 31. 기능 모듈, 모듈 분리 (0) | 2022.02.10 |
| 앵귤러 기초(Angular basic) 29. 라우트 가드(route guard) (0) | 2022.02.08 |
| 앵귤러 기초(Angular basic) 28. 코드에서 라우팅 하기 (0) | 2022.02.07 |
| 앵귤러 기초(Angular basic) 27. 라우팅 파라미터 건네기 (0) | 2022.02.07 |
댓글