앵귤러 튜토리얼(Angular tutorial) - 16 : 라우팅

저번시간에 우리는 서비스를 통해 특정 데이터를 공유하는 방법에 대해 살펴보았습니다.
이번시간에는 라우팅에 대해서 살펴보도록 하겠습니다.
라우팅이란 사용자의 요청에 대해서 다양한 페이지로 이동하는 방법을 의미합니다.

이전까지 우리는 컴포넌트에서 조건을 통해서 화면이동을 할 수 있었습니다.
그러나 "새로고침" 등의 행위가 발생하면 여지없이 처음 화면으로 돌아가 버렸습니다.
라우팅 방법은 이러한 문제를 해결하면서 동시에 각종 경로(Path)를 사용할 수 있습니다.

먼저 프로젝트를 1개 만들어 보겠습니다.

간만에 만났네요..

 

간만에 보는 ng new 명령어 입니다.
여기서 마찬가지로 처음 선택은 N, 다음 선택은 css를 선택하여주세요.
가장 처음 만들어진 app컴포넌트는 이전처럼 "컨트롤"의 역할을 하게 될 것 입니다.
그러면, 어플리케이션 모습을 갖추어 보기위해서 기존과 마찬가지로 login컴포넌트, board 컴포넌트 2개를 만들어 줍니다.
컴포넌트를 만드는 위치에 주의하여 주세요. src - app 디렉토리까지 이동하여야 합니다.

아래 명령어를 통해서 컴포넌트를 만들어 줍니다.

ng g component login
ng g component board

디렉토리 위치를 잘 확인하여 주세요!!

여기까지는 어렵지 않는 내용입니다.
자, 그러면 이제 라우터 기능을 달아보도록 하겠습니다.
app모듈의 내용을 아래처럼 변경하여 줍니다.

* 대상 : app.module.ts

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

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BoardComponent } from './board/board.component';

import { RouterModule,Routes} from '@angular/router'; //라우터

const router : Routes = [  //라우팅
  {path : 'login' , component : LoginComponent},  
  {path : 'board' , component : BoardComponent},
  {path : '', redirectTo : '/login',  pathMatch : 'full'}
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(router,{enableTracing:false}),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

뭔지는 잘 모르겠지만 일단 위 내용으로 변경합니다.
다음으로는 가장 먼저 로딩되는(bootstrap) 컴포넌트인 app컴포넌트의 내용을 아래처럼 바꾸어 줍니다.
* 대상 : app.component.html

<router-outlet></router-outlet>

 

기존 내용을 전부 제거하고 단촐해 보이는 1줄만 남겨 둡니다.
자, 이제 실행하여봅니다.  * ng serve
* 접속 : http:127.0.0.1:4200

login 경로가 붙어서 이동되었습니다!

 

분명 아무런 경로없이 접속 하였는데 login이라는 기호가 붙어있습니다.
신기하게도 login컴포넌트로 이동한 것을 볼 수 있습니다.
그러면 한번 board컴포넌트로 이동하여 보겠습니다.
* 접속 : http:127.0.0.1:4200/board

board컴포넌트가 동작하였습니다!

 

마찬가지로 훌륭하게 이동한 것을 볼 수 있습니다.
그러면 app모듈의 내용을 다시한번 살펴봐야 하겠습니다.

* 대상 : app.module.ts

//생략..
const router : Routes = [  //라우팅
  {path : 'login' , component : LoginComponent},  
  {path : 'board' , component : BoardComponent},
  {path : '', redirectTo : '/login',  pathMatch : 'full'}
]
//생략..

 

Routes타입의 router 객체입니다. 
배열로 구성되어 있으며 내부 내용은 json형태 입니다.
첫번째 key값인 path는 요청을 의미 합니다. 
그리고 뒤의  key값인 component는 해당 요청에 대해 동작 할 컴포넌트를 의미합니다.
"login요청이 오면 LoginComponent가 동작하라" 라는 것이 첫번째 내용입니다.
두번째 내용도 마찬가지이며, 세번째는 아무런 경로없이 접근을 하는 경우에 login으로 리 다이렉트를 하게 하였습니다.
아스테리크(*) 2개를 사용하면 설정되지 않는 요청에 대해서 전부 응답하게 할 수 있습니다.  
* 마지막 내용을 ** 로 바꾼다음에 설정되지 않는 경로로 요청하여 보세요!

 

다음으로 app모듈에서 import부분에 대한 설명 입니다.

* 대상 : app.module.ts

//생략..
  imports: [
    BrowserModule,
    RouterModule.forRoot(router,{enableTracing:false}),
  ],
//생략

 

라우터 모듈(RouterModule)을 사용하기 위해서 imports를 통해서 등록 해 주었습니다.
forRoot 부분은 static 함수 입니다. static 함수는 객체를 new를 통해서 선언하지 않아도 사용 할 수 있는 함수 입니다.
여기서 forRoot는 라우터 모듈에게 라우팅할 정보를 넘겨주는 역할을 합니다.

 

또한 라우터 옵션중에 useHash 라는 옵션이 있습니다.
useHash를 true 값으로 준 다면 새로고침(F5)에 완벽하게 대응하는 어플리케이션으로 탄생합니다.

* 한번 바꾸고 해보세요!

* 지금 개발할 당시에는 사실 필요가 없습니다.
* 해당 내용은 나중에 다시한번 언급하겠습니다.

//생략..
  imports: [
    BrowserModule,
    RouterModule.forRoot(router,{enableTracing:false, useHash: true}),  //useHash는 나중에 요긴하게 쓰입니다..^^
  ],
//..생략

 

여기까지가 모듈에 라우터를 설정하는 방법입니다.

 

모듈에서 설정이 끝나면 가장 처음 로딩되는(bootstrap) 컴포넌트.html 파일에 router-outlet 테그를 붙여서 해당 컴포넌트 파일이 다방면으로 요청을 전달하도록 해 주어야 합니다.
그래서 일반적으로 app컴포넌트파일에서는 따로 html 파일을 만들지 않고 아래처럼 사용하기도 합니다.

* 대상 : app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template : '<router-outlet></router-outlet>',  //template으로 대체해도 괜찮습니다.
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'thirdStudy';
}

 

예전에는 app컴포넌트에 조건을 통해서 가리기 보여주기를 직접 하였다면 이제 우리는 라우터라는 훌륭한 기능을 통해서 손쉽게 할 수 있게 되었습니다.
이러한 방법을 통해서 컴포넌트를 여러개 만든 뒤에 app모듈에서 경로를 추가하여 사용하면 됩니다.

 

* 라우팅 추가(심화) 설명(2021.08.04)

앵귤러에서의 라우팅은 브라우저 내부에서의 이동을 의미 합니다.
예를 들어 앵귤러에서 가장 처음 동작하는 주소가 main이라고 가정합니다.
그런데 main에서 board로 이동한다고 가정하여 봅니다.
버튼을 눌러서 이동하였다고 가정하여 봅니다.

http://localhost:3000/main   ->  http://localhost:3000/board

페이지는 이동되어 화면은 전환 될 것 입니다.
앵귤러에 의해서 라우팅되면 화면 상단의 주소는 바뀌지만 실제로 서버에 대한 요청은 없습니다.
앵귤러에서의 라우팅이라고 하는 것은 브라우저의 맨 위의 주소를 바꾸고 화면만 전환시킬 뿐 
동작하는 서버와는 아무런 상관 없는 기술 입니다.

조금 더 설명하면,
서버는 최초 1회 http://localhost:3000/main 이라는 접속이 들어오면 동작에 필요한
모든 앵귤러와 관련된 파일을 브라우저에 전달 합니다.
이후 앵귤러의 라우팅에 의해서 화면 전환이 이루어 지게 되면, 서버로의 이동이 아니라
브라우저 내부의 가상 이동을 통하여 화면을 바꾸게 됩니다.

위 내용을 예로 들면,
처음 http://localhost:3000/main 주소로 접속한 뒤에 버튼클릭으로 board 페이지로 이동을 하게 되면,
앵귤러의 라우팅에 의해서 http://localhost:3000/board 페이지가 나타나게 됩니다.
여기서 만약 사용자가 새로고침(F5)키를 누르면 404페이지가 나타나게 됩니다.
왜냐하면 새로고침(F5키) 이라는 것은 입력된 주소를 서버에 요청하는 것 이기 때문 입니다.

그래서 나중에 서버개발자들은 이러한 앵귤러에서 필요한 라우팅 목록을 받아서 
404페이지에 가지 않도록 리다이렉트 해주는 작업을 하게 됩니다.

* 앵귤러 자체에서 이러한 404를 방지하기 위해서 useHash를 추가하는 방법이 있습니다.

 

이번시간에는 가볍게 라우터에 대해서 살펴보았습니다.
다음시간에는 로그인 기능과 로그인이 되지 않았을때 인터셉트하는 방법에 대해서 살펴보겠습니다.

thirdStudy.zip

0.01MB