앵귤러 튜토리얼(Angular tutorial) - 28 : 모듈과 라우터 심화1

저번시간까지 앵귤러와 파이어베이스를 활용한 방법에 대해서 살펴 보았습니다.
이번시간에는 여태껏 사용해 왔던 모듈과 라우팅에 대해서 다시한번 살펴보려고 합니다.
간만에 새로운 프로젝트를 만들겠습니다.
프로젝트 이름은 fourStudy로 하겠습니다.

프로젝트를 만듭니다!

 

매번 N을 눌렀던 부분을 이번에는 Y를 눌러서 진행하여 봅니다.
자시히는 몰라도 라우팅을 할건지에 대해 Y로 대답하였으니 라우팅하는 기능이 자동으로 들어갈 것 같습니다.
프로젝트를 구성하는 데 시간이 좀 걸립니다.
프로젝트가 구성이 되고 나면 src - app 폴더까지 이동하여 봅니다.

모듈이 2개입니다..?

 

모듈이 2개가 되어있습니다?
일반적으로 사용하였던 app모듈말고 AppRoutingModule이라는 모듈이 생긴것을 볼 수 있습니다.
이해를 위해서 컴포넌트를 제작하여 봅니다.
ng g component good
ng g component bad

컴포넌트 2개를 추가합니다.

 

다음으로 app-routing모듈의 내용을 아래와 같이 수정하여 줍니다.
* 대상 : app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GoodComponent } from './good/good.component';
import { BadComponent } from './bad/bad.component';


const routes: Routes = [
  { path: 'good', component: GoodComponent },
  { path: 'bad', component: BadComponent },  
];

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

 

이제 화면에 good경로로 접속하여 봅니다.

맨 밑에 good이라는 문구가 보입니다. 해당 문구는 good컴포넌트에 있는 내용 입니다.

 

이제 왜 이런 화면이 나왔는지 app컴포넌트의 html파일을 열어 맨 끝을 확인하여 봅니다.

요기 요겁니다~

 

라우터와 관련된 테그가 맨 하단에 존재합니다.
app컴포넌트는 가장 맨 처음 동작하는(bootstrap) 컴포넌트이며, app모듈 또한 가장 먼저 동작하는(bootstrap) 모듈입니다.
그러므로 가장 맨처음 동작하며 화면을 구성합니다.

이후의 라우터 테그를 만나서 해당 기능 동작하려고 하나 app모듈에는 라우터 설정과 관련된 기능이 없습니다.
그런데 imports 부분에서 AppRoutingModule이라는 모듈을 만나 AppRoutingModule에서의 라우팅 기능에 의해서 해당 동작을 실행하게 되는 것 입니다.

 

app모듈은 완벽히 이제 중심역할만 하는 모듈로 분리가 되었습니다.
이러한 방법을 통해서 모듈을 추가한 뒤에 라우팅 기능을 계속해서 붙여서 구분할 수 가 있습니다.
이해를 위해서 모듈을 한개 더 추가하여봅니다.

ng g module routing2

모듈 1개를 더 추가합니다.

 

그리고 bad컴포넌트를 bad2라는 요청이 들어가게되면 라우팅하도록 설정을 바꾸도록 합니다.
해당 모듈에게도 라우팅 기능이 되도록 수정합니다.
파일 경로에 주의하도록 합니다!

* 대상 : routing2.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BadComponent } from '../bad/bad.component';


const routes: Routes = [
  { path: 'bad2', component: BadComponent },  
];


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

 

이제 만들어준 routing2모듈을 app모듈에 imports에 추가하여 줍니다.

* 대상 : app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Routing2Module } from './routing2/routing2.module';

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

 

bad2 경로를 붙여서 접속하여보면 bad컴포넌트가 이상없이 동작하는 것을 볼 수 있습니다.

bad컴포넌트가 동작 합니다.

 

이렇게 app모듈을 중심으로 2개의 모듈을 만들어서 추가하였습니다.
app모듈은 모듈들을 관리하는 기능만 하도록 변경되었습니다.
나머지 추가된 2개의 모듈은 라우팅 기능과, 각각의 요청에 따른 컴포넌트를 동작시키도록 하였습니다.

모듈을 이렇게 분리하는 이유는 무엇일까요?

먼저 협업에서의 편리성 입니다.
app모듈을 중심으로 사용자가 여러개의 화면 작업을 한다고 하면, app모듈이 서로 공유(share)되어 여러번의 수정이 이루어지게 됩니다.
그렇게 될 경우 버전관리가 매우 어렵습니다.
그러나 이처럼 모듈을 분리하여 준 다면 각각의 모듈에서만 작업을 하면 되기 때문에 버전관리에 대한 문제가 사라지게 됩니다.

다음으로 기능의 분리입니다.
앵귤러는 사용자의 요청에 의해서 화면을 구성 할 때 모듈 단위로 화면구성을 실행합니다.
모듈의 규모가 커지고 복잡해지는데 1개의 모듈로 관리를 한 다면 너무많은 내용에 의해서 관리하기가 힘들어 질 수 있습니다.
이러한 문제를 해결하기 위해서 위 방식처럼 모듈을 나누어서 라우팅을 해 주는 것 입니다.

내용이 조금 복잡합니다만 중요한 개념이므로 꼭 이해하여야 합니다.
다음시간에도 이어서 모듈과 관련된 내용에 대해서 살펴 보겠습니다.

fourStudy.zip

0.02MB