지금까지 우리는 루트 애플리케이션 모듈인 AppModule을 사용했습니다.
하나의 모듈에 모든 부품과 파이프를 선언 하였습니다.
이번 포스트에서는 모듈을 분리해 책임과 구분을 나눠보겠습니다
이번 포스트는 아래 내용을 다루고 있습니다.
- 모듈 분리하기
- 모듈 정의하기
- 기능 모듈 작성하기
모듈 분리하기
현재 루트 모듈인 AppModule에서는 WelcomComponent와 같은 기본 애플리케이션 기능과 StarComponent과 같은 공유기능을 함께 관리 하고 있습니다.
우선 기본 애플리케이션 기능은 AppComponent, WelcomeComponent로 생각해 볼 수 있습니다. 영화 관련된 기능은 MovieListComponent, MovieDetailComponet로 볼 수 있겠네요. 그 외로 StarScoreComponent 와 ConvertPipe는 어떤 특정 부분과 상관없이 다양한 모듈에서 이용 가능한 부품들입니다. 만약 이 애플리케이션에 영화 음악, 영화배우 조회 등과 같은 기능 세트를 추가할수록 AppModule에서 관리하기가 더 어려워질 것입니다. 그래서 이것을 여러 Angular 모듈로 나눠야 할 필요가 있습니다.
먼저 이 조각들 중 일부를 기능그룹(feature set)으로 추출해야 합니다. 그런 다음 각 기능 그룹에 대한 기능 모듈을 작성할 수 있습니다. 기능 모듈을 사용하면 응용 프로그램을 별도의 관심사를 가진 논리적 그룹으로 분할할 수 있습니다.
모듈 정의하기
지금부터 새로운 기능 모듈을 정의해 보겠습니다.
기능 모듈을 작성하려면 새 모듈 파일인 MovieModule을 정의하고 모든 관련 기능 조각과 필요한 모든 것이 이 모듈에 포함되도록 응용 프로그램의 조각을 재구성해야 합니다. 기능 모듈의 선언 배열에서 응용 프로그램에 기능을 제공하는 적절한 컴포넌트를 추가합니다.
아래와 같이 새로운 기능 모듈을 정의 했습니다.
MovieModule에 MovieListComponent, MovieDetailComponet를 선언 합니다.
MovieListComponent 템플릿에서는 StartScoreComponent와 ConvertPipe를 이용하고 있으니 추가해 줍니다.
ngModel과 ngFor를 사용하고 있으며, 라우팅도 사용하고 있습니다. 이러한 기능을 사용하기 위해서 앵귤러 모듈의 CommonModule, FormsModule, RouterModule에서 가져와 넣었습니다.
CommonModule이 생소하신가요?
AppModule에서는 BrowserModule을 가져와서 ngIf나 ngFor를 사용할 수 있었습니다. 하지만 루트 이외의 모듈은 BrowserModule대신 CommonModule을 import해야 합니다.
이렇게 구성된 MovieModule을 AppModule에 import해 주면 모듈의 분리가 끝이 납니다.
위의 내용을 그대로 코드로 옮겨 보겠습니다.
기능 모듈 작성하기
터미널에서 아래와 같이 angular cli명령어를 입력하면 모듈이 자동 생성 됩니다.
ng g m movies/movie --flatg는 생성, m은 모듈의 약자 입니다. 마지막 --flat은 movie라는 폴더를 생성하지 말고 movies아래에 바로 movieModule을 생성하기 위한 옵션입니다.
생성된 클래스를 베이스로 코드를 수정 하였습니다.
선언 배열에는 필요한 컴포넌트와 파이프를, imports배열에는 이 모듈에서 필요한 외부 모듈을 넣어주었습니다.
RouterModule의 forChild에 주목해 주세요. AppModule의 RoutingModule에서는 경로 배열 정보를 등록할때는 forRoot로 호출 했던거 기억 나시나요? RouterModule은 라우터 서비스 공급자를 등록하고 라우터 디렉티브를 선언하며 구성된 경로를 노출 시켜주는 역할을 합니다. 그리고 라우터 서비스는 두 번 이상 등록을 하고 싶지 않습니다. forChild를 사용하면 RouterModule은 Router서비스를 다시 등록하지 않는 것으로 인식합니다.
아래는 수정된 AppMoudle입니다.
영화 관련 경로 정보는, MovieModule에서 관리하게 됨으로 삭제하였습니다. 이곳에서는 경로배열을 forRoot로 등록하고 있는걸 볼 수 있습니다. Movie에 관련한 컴포넌트들은 삭제하였고 불필요한 module도 삭제 했습니다. 기능모듈로 작성한 MovieModule이 imports배열에 추가된걸 확인 할 수 있습니다.
이제 기능모듈의 작성이 완성 되었습니다.
브라우저에서 동작을 확인해 보겠습니다.
모든 기능이 잘 작동하네요!
애플리케이션이 커질 수록 기능 별로 모듈을 분리해서 작성하는것이 매우 중요합니다.
다음 포스트에서는 특정 모듈에 종속하지 않는 공유 모듈인 shardModule을 작성해 보도록 하겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 33. Angular CLI, ng new 생성 파일 (0) | 2022.02.12 |
|---|---|
| 앵귤러 기초(Angular basic) 32. 공유 모듈(shared module) (0) | 2022.02.11 |
| 앵귤러 기초(Angular basic) 30. 앵귤러 모듈(Angular Module) (0) | 2022.02.10 |
| 앵귤러 기초(Angular basic) 29. 라우트 가드(route guard) (0) | 2022.02.08 |
| 앵귤러 기초(Angular basic) 28. 코드에서 라우팅 하기 (0) | 2022.02.07 |
댓글