라우팅은 어떻게 작동하게 될까요?
앵귤러 기초 포스트에서 만들고 있는 영화 관리 애플리케이션에 화면을 더 추가한 뒤, 앵귤러 라우팅 콘셉트에 대해 알아보겠습니다.
이번 포스트는 아래의 내용을 다루고 있습니다.
- Angular CLI로 컴포넌트 추가하기
- 라우팅 작동 방식
- 라우팅 모듈 만들기
- RouterModule
앱 구성
앱 구성은 아래 다이어그램과 같이 구축할 예정입니다.
현재 진행상태는 회색 박스인 WelcomeComponent와 MovieDetialComponent는 아직 작성하지 않은 상태입니다.
Angular CLI로 컴포넌트 추가하기
그럼 추가 컴포넌트를 작성하겠습니다.
Angular CLI를 사용하여 코드를 생성하려면 터미널에서 아래와 같이 입력하면 됩니다.
ng g c movies/movie-detail
ng는 angluar cli를 의미합니다.
g는 generator 약자, c는 component의 약자로 g 와 c를 써줌으로 컴포넌트를 만들겠다는 의미입니다.
movie폴더 아래 컴포넌트를 만들려고 하고 있으므로 movies/movie-detail 처럼, 폴더명과 컴포넌트명을 적습니다.
만약 angular cli를 global로 인스톨하지 않았다면, 아래 커맨드로 글로벌 인스톨을 할 수 있습니다.
npm install -g @angular/cli
커맨드를 실행하면 4개의 파일을 만들어주고, app.module에 자동으로 컴포넌트를 선언해줍니다.
여기서 만들어진 파일 중에 spec.ts란 파일은 단위 테스트용 파일입니다.
앵귤러의 테스트에 관해서는 차후 포스트에서 다룰 예정입니다.
같은 방식으로 WelcomeComponent도 추가하였고 위치는 다음과 같습니다.
컴포넌트 구성이 끝났으니 본격적으로 라우팅 설정을 시작하겠습니다.
라우팅 작동 방식
앵귤러 애플리케이션은 싱글 페이지 애플리케이션(SPA)입니다.
즉 모든 뷰가 일반적으로 index.html 파일에 정의된 한 페이지 내에 표시됩니다.
따라서 5개, 10개의 뷰가 한 페이지에서 번갈아 가면서 표시됩니다.
페이지에서 언제 어떤 뷰를 표시해야 하는지 관리하는 것이 라우팅의 목적입니다.
라우팅은 컴포넌트 기반이므로 라우팅 대상으로 제공할 컴포넌트들을 식별하고, 각 컴포넌트에 대한 경로를 정의해야 합니다.
각 컴포넌트에 대한 경로는 RouterModule에서 이뤄집니다.
라우팅 모듈 만들기
앵귤러 애플리케이션에는 앵귤러 라우터 서비스에서 관리되는 하나의 라우터가 있습니다.
HTTP 모듈과 유사하게 앵귤러는 RouterModule을 제공합니다.
RouterModule을 import하고 있는 AppRoutingModule을 살펴보겠습니다.
RouterModule
우선 import하고 있는 RouterModule을 알아보겠습니다.
RouterModule은 라우터 서비스 공급자를 등록하는 역할을 합니다.
서비스 제공자를 등록하는 것 외에도 RouterLink와 RouterOutlet과 같은 라우트 관련 지시문도 선언하고 있습니다.
제일 중요한 역할은 우리가 구성하는 경로(path)를 노출해 주는 것입니다.
RouterModule의 forRoot메서드를 호출하고 경로 배열을 해당 메서드에 전달함으로 경로를 노출해 줍니다.
AppRoutingModule에서는 RouterModule을 이용하여 라우팅의 설정을 하고 있습니다.
위에서 언급했듯이 라우팅 설정은 imports배열에서 RouterModule.forRoot()를 호출하면서 라우트 배열(routes)을 전달 함으로 이뤄집니다.
AppRoutingModule은 AppModule에 import되어 있는 상태입니다.
물론 AppModule에서 RouterModule을 import해서 라우팅 설정을 하는 것도 가능하지만, 앱이 커짐에 따라 라우팅 설정도 많아지니 따로 빼서 관리하는 것이 편리합니다.
RouterModule에 건네준 패스 경로를 살펴보겠습니다.
라우터는 경로(path) 정의 목록을 구성해야 합니다.
path 속성은 경로에 대한 URL 경로 세그먼트를 정의합니다. 이 경로가 활성화되면 이 URL 경로 세그먼트가 우리 애플리케이션의 URL에 추가됩니다. 또한 사용자는 URL을 입력하거나 즐겨찾기에 추가하여 관련 컴포넌트의 뷰로 직접 돌아갈 수 있습니다.
경로가 활성화될 때 표시되는 것은 해당하는 컴포넌트의 템플릿이 됩니다.
하나씩 살펴보겠습니다.
첫 번째 경로는 특정 URL 경로 세그먼트를 특정 구성요소에 매핑합니다.
따라서 이 URL은 ProductListComponent의 템플릿을 표시합니다.
두 번째 경로의 :id는 경로 매개 변수를 나타냅니다.
영화 세부 정보 페이지에서는 한 가지 영화에 대한 세부 정보를 표시해야 하므로 표시할 영화의 아이디를 알아야 합니다.
MovieDetailComponent에서는 이 경로 세그먼트에서 ID를 읽고 정의된 영화를 표시하게 됩니다.
슬래시로 구분된 파라미터는 여기서 얼마든지 정의할 수 있습니다.
아래 URL은 첫 번째와 같은 패턴으로, WelcomeComponent의 템플릿을 표시합니다.
다음은 default 경로를 정의하고 있습니다.
ridirectTo에는 빈 경로('')가 원하는 경로 세그먼트('welcome')로 변환될 값을 적어줍니다.
리디렉션 경로에는 URL 경로 세그먼트를 경로와 일치시키는 방법을 라우터에 알려 주는 pathMatch 속성이 필요합니다.
경로의 클라이언트 측 전체 부분이 비어 있을 때만 이 기본 경로를 사용하므로 경로 일치를 전체로 설정합니다.
마지막 path에 있는 별표는 와일드카드 경로를 나타냅니다.
요청한 URL이 구성에 정의된 이전 경로들과 일치하지 않으면 라우터가 '**'로 정의된 경로로 매칭 됩니다.
이 기능은 404 not found페이지를 표시하거나, 다른 뷰로 리디렉션 할 때 유용합니다.
예제에선 다시 welcome페이지로 돌려주었습니다.
몇 가지 유의할 사항이 있습니다.
path에는 선행 슬래시(/)가 없으며 이 배열의 경로 순서가 중요합니다.
라우터는 path를 일치시킬 때 첫 번째 일치 전략을 사용합니다.
이것은 더 구체적인 경로가 항상 와일드카드 경로와 같이 덜 구체적인 경로 앞에 있어야 함을 의미합니다.
이제 path설정을 설정을 마친 것뿐입니다.
이제 컴포넌트 혹은 템플릿에서 링크 클릭과 같은 path로 이동하기 위한 위한 액션이 필요로 할 것입니다.
여기까지 수고하셨습니다.
다음 포스트에서 이어서 실제 라우팅 작업이 이뤄지는 액션을 만들어 보겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 27. 라우팅 파라미터 건네기 (0) | 2022.02.07 |
|---|---|
| 앵귤러 기초(Angular basic) 26. 라우팅, 메뉴 만들기 (0) | 2022.02.04 |
| 앵귤러 기초(Angular basic) 24. Http서비스 만들기2 (0) | 2022.02.02 |
| 앵귤러 기초(Angular basic) 23. Http서비스 만들기1 (1) | 2022.02.01 |
| 앵귤러 기초(Angular basic) 22. RxJS, Observable (0) | 2022.01.31 |
댓글