[Angular] 2장 Angular 모듈 구조 이해

1. Angular 모듈이란?

Angular에 NgModule은 Angular 애플리케이션의 기능 단위를 정의하는 데 사용되며 Angular 모듈은 @NgMudle 데코레이터를 사용해 정의하며, 주요 속성으로 declarations,imports, porviders, bootstrap 등이 있습니다. 각 모듈은 컴포넌트, 디렉티브, 파이, 서비스 등과 같은 Angular 애플리케이션 요소들을 그룹화해 하나의 독립적 단위로 묶습니다.

---

2. 모듈의 주요 역할

• 앱 기능의 그룹화: 관련된 기능들을 하나의 모듈로 묶어 애플리케이션을 조직화
• 코드 분리: 애플리케이션의 크기가 클 경우, 각 모듈을 독립적으로 개발, 테스트, 유지보수할 수 있도록 지원
• Lazy Loading(지연 로딩): 필요할 떄만 모듈을 로드하여 앱의 성능 개선
• 공유 로직 관리: 공통 기능(ex. 유틸리티, 함수, 공통 UI)을 한 모듈로 정의하여 재사용성 극대화

---

3. Angular 모듈 구조

Angular 모듈을 @NgModule 데코레이터를 사용하여 정의하고, 이 데코레이터는 메타데이터를 포함하고 있으며, 주요 속성은 다음과 같습니다.

import { bootstrapApplication } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app/app.component';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

bootstrapApplication(AppComponent).catch((err) => console.error(err));

• declarations: 모듈에서 사용할 컴포넌트, 디렉티브, 파이프를 선언
• imports: 다른 모듈을 가져와 사용할 수 있게 함
• providers: 서비스와 같은 의존성 주입을 위한 공급자 정의
• bootstrap: 애플리케이션의 시작 시 로드할 컴포넌트 지정 

---

3. 공유 모듈

여러 모듈에서 재사용할 수 있는 컴포넌트, 디렉티브, 파이프를 포함하는 공유 모듈을 만들 수 있습니다.

ng generate module shared

 

이 명령어로 shard 모듈을 생성합니다. 생성된 파일은 src/app/shared/shared.module.ts입니다. 이제 공유할 컴포넌트도 생성해보겠습니다. common이라는 이름의 컴포넌트를 추가합니다.

ng generate component shared/common

 

이 명령어를 통해 다음과 같은 파일이 생성됩니다.

• src/app/shared/common/common.component.ts
• src/app/shared/common/common.component.html
• src/app/shared/common/common.component.css

다음은 shared.module.ts 파일을 열고, 생성한 컴포넌트를 decrations와 exports에 추가합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CommonComponent } from './common/common.component';

@NgModule({
  declarations: [CommonComponent],
  imports: [CommonModule],
  exports: [CommonComponent], // 다른 모듈에 사용 가능하게 export
})
export class SharedModule {}

 

---

4. 기능 모듈 생성

기능 모듈은 특정 기능과 관련된 컴포넌트, 서비스를 포함합니다.

ng generate module feature

 

이 명령어로 feature 모듈을 생성합니다. 생성된 파일은 src/app/feature/feature.module.ts입니다. 이제 feture 모듈에 feature 컴포넌트를 추가해줍니다.

ng generate component feature/feature

 

feature.module.ts를 열고 생성한 컴포넌트를 declarations에 추가합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature/feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
})
export class FeatureModule {}

---

5. 라우팅 모듈 생성

라우팅 모듈은 애플리케이션의 라우팅 설정을 관리합니다.

ng generate module app-routing --flat --module=app

 

이 명령어로 app-routing.module.ts 파일이 생성되고, 자동으로 AppModule이 포함됩니다. 이제 app-routing.module.ts 파일을 열고, 라우팅 경로를 설정합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './app/feature/feature/feature.component';

const routes: Routes = [
  { path: 'feature', component: FeatureComponent },
  { path: '', redirectTo: '/feature', pathMatch: 'full' }, // 기본 경로
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

 

이제 생성한 모듈을 AppModule에 통합합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // 추가
import { SharedModule } from './shared/shared.module';
import { FeatureModule } from './feature/feature.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule, // 라우팅 모듈 추가
    SharedModule,
    FeatureModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}