[Angular] 02. 라우터로 내비게이션 구현하기

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter02. 라우터로 내비게이션 구현하기

학습목표 : 

1. Angular 라우터의 구성 요소에 대해 설명할 수 있다.

→Router:라우터를 구현하는 객체다. 원하는 경로로 이동하려면 이 객체의 navigate() 함수와 navigateByUrl() 함수를 사용하거나, 라우터 객체의 path 프로퍼티 값을 변경하면 된다. 브라우저의 URL을 직접 수정해도 원하는 경로로 이동할 수 있다.

RouterLink: HTML 앵커 태그(<a>)의 원래 용도는 브라우저의 URL 주소를 변경하는 것이지만, RouterLink 디렉티브를 사용하면 앵커 태그가 Angular 라우터를 통하도록 기능을 변경할 수 있다. RouterLink를 사용하면 라우터가 렌더링할 컴포넌트에 인자를 전달할 수도 있다.

2. Angular에서 주소를 관리하는 위치 정책에 대해 설명할 수 있다.  

→HashLocationStrategy(해시 기반 내비게이션 정책): URL에 해시 기호(#)를 사용해서 해시 기호 이후의 부분은 웹페이지의 특정 부분을 가리키도록 라우팅하는 정책이다. 이 방식은 오래된 브라우저에서도 잘 동작한다.

PathLocationStrategy(방문 기록 API 기반 내비게이션 정책): 브라우저의 방문 기록 API를 사용하는 정책이며 HTML5를 지원하는 브라우저에서만 동작한다. 이 정책이 Angular 라우터의 기본 정책이다.

3. Angular가 지원하는 Shadow DOM 모드에 대해 설명할 수 있다.

→ViewEncapsulation.Emulated: Angular 프레임워크가 제공하는 방식으로 Shadow DOM을 캡슐화한다(기본값). 이 방식에서는 HTML 엘리먼트에 어트리뷰트를 추가해서 이 컴포넌트의 스타일이 전역 DOM의 스타일에 영향을 주지 않도록 한다. 

ViewEncapsulation.Native: 브라우저에서 지원하는 Shadow DOM을 사용한다. 이 경우에는 컴포넌트의 HTML과 스타일은 웹 페이지의 DOM과 별개로 존재한다. 이 옵션은 브라우저에서 Shadow DOM을 지원하는 것이 확실할 때만 사용해야 하며, 지원하지 않는 경우에는 에러가 발생한다. 

ViewEncapsulation.None: Shadow DOM 캡슐화를 사용하지 않으며, 컴포넌트의 모든 HTML과 스타일을 전역 웹 페이지 DOM에 포함시킨다. 이 경우에는 Shadow Host가 없기 때문에 :host 셀렉터도 동작하지 않는다. 이때 :host 셀렉터 대신 컴포넌트 자신의 셀렉터를 사용할 수 있다.

학습내용  : 

이번 차시의 학습교재는 [Angular Development with TypeScript] 이며, 학습범위는 [103-174] 페이지 입니다.

본 차시의 주요학습 내용은 다음과 같습니다.

이번 차시에서는 라우터로 내비게이션 구현하기에 대해 학습합니다.

2차시 학습에서 중요한 키워드는 [Routes], [ActivatedRoute], [딥 링킹]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[Routes]

Routes는 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다.

[ActivatedRoute]

ActivatedRoute는 현재 동작하는 라우터 인스턴스를 가리키는 객체다.

[딥 링킹]

어떤 웹 페이지를 가리키는 링크를 만드는 것에서 좀 더 나아가, 웹 페이지의 특정 내용으로 접근하는 링크를 만드는 것을 딥 링킹이라고 한다.

학습요약 : 

 

• 브라우저의 주소 표시줄은 언제나 현재 뷰의 URL을 표시한다. URL은 여러 구성 요소로 나누어 볼 수 있는데, 프로토콜은 시작해서 도메인 이름이 있고, 그 뒤에 포트 번호가 붙기도 한다. HTTP GET 요청은 아래와 같이 URL 뒤에 물음표를 붙여 서버에 인자를 전달할 수도 있다.

http://mysite.com:8080/auction?somParam=123

• SPA는 서버에 요청을 보내지 않고도 URL을 변경할 수 있기 때문에, 애플리케이션에서는 이 주소를 기준으로 클라이언트의 상황에 맞는 뷰를 표시할 수 있다. Angular에서 주소를 관리하는 위치 정책은 다음과 같은 방식이 있다.

 HashLocationStrategy(해시 기반 내비게이션 정책) - URL에 해시 기호(#)를 사용해서 해시 기호 이후의 부분은 웹페이지의 특정 부분을 가리키도록 라우팅하는 정책이다. 이 방식은 오래된 브라우저에서도 잘 동작한다.

 PathLocationStrategy(방문 기록 API 기반 내비게이션 정책) - 브라우저의 방문 기록 API를 사용하는 정책이며 HTML5를 지원하는 브라우저에서만 동작한다. 이 정책이 Angular 라우터의 기본 정책이다.

• Angular 라우터는 다음과 같은 요소로 구성한다.

 Router - 라우터를 구현하는 객체다. 원하는 경로로 이동하려면 이 객체의 navigate() 함수와 navigateByUrl() 함수를 사용하거나, 라우터 객체의 path 프로퍼티 값을 변경하면 된다. 브라우저의 URL을 직접 수정해도 원하는 경로로 이동할 수 있다.

 RouterOutlet - 라우터가 컴포넌트를 렌더링하는 영역인 <router-outlet>을 구현하는 디렉티브다.

 Routes - 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다.

 RouterLink - HTML 앵커 태그(<a>)의 원래 용도는 브라우저의 URL 주소를 변경하는 것이지만, RouterLink 디렉티브를 사용하면 앵커 태그가 Angular 라우터를 통하도록 기능을 변경할 수 있다. RouterLink를 사용하면 라우터가 렌더링할 컴포넌트에 인자를 전달할 수도 있다.

 ActivatedRoute - 현재 동작하는 라우터 인스턴스를 가리키는 객체다.

• 라우터와 같은 Angular 프레임워크 구성요소는 TypeScript에서 제공하는 어노테이션 문법을 사용해서 설정한다. 따라서 코드는 TypeScript로 작성하고, 이 코드가 브라우저에 로드될 때 SystemJS를 사용해서 JavaScript 코드로 변환해서 실행하는 방식을 사용한다. 

• Angular에서는 Location 클래스를 제공하는데, 이 클래스의 go() 함수를 이용해서 원하는 절대 경로로 이동하거나, forward(), back() 함수를 이용할 수도 있다. 

• Shadow DOM은 컴포넌트의 캡슐화를 확실하게 보장하지만 아직 모든 브라우저에서 Shadow DOM을 지원하는 것은 아니기 때문에, Angular는 자체적으로 Shadow DOM을 구현하고 있다. 

• 딥 링킹(Deep linking)

 어떤 웹 페이지를 가리키는 링크를 만드는 것에서 좀 더 나아가, 웹 페이지의 특정 내용으로 접근하는 링크를 만드는 것을 딥 링킹이라고 한다. 

• Shadow DOM은 웹 컴포넌트 표준 중 하나다. 이 표준에 따르면 모든 웹 페이지는 DOM 객체의 계층으로 구성하지만, Shadow DOM은 전역 DOM과 분리된 별개의 DOM 계층을 구성한다. 그리고 이 Shadow DOM은 HTML 문서에 포함되어 렌더링되지만, HTML 문서에 해당하는 전역 DOM에서 Shadow DOM 내부의 엘리먼트에 접근할 수 없다. 

• Angular가 지원하는 Shadow DOM

 ViewEncapsulation.Emulated - Angular 프레임워크가 제공하는 방식으로 Shadow DOM을 캡슐화한다(기본값). 이 방식에서는 HTML 엘리먼트에 어트리뷰트를 추가해서 이 컴포넌트의 스타일이 전역 DOM의 스타일에 영향을 주지 않도록 한다. 

 ViewEncapsulation.Native - 브라우저에서 지원하는 Shadow DOM을 사용한다. 이 경우에는 컴포넌트의 HTML과 스타일은 웹 페이지의 DOM과 별개로 존재한다. 이 옵션은 브라우저에서 Shadow DOM을 지원하는 것이 확실할 때만 사용해야 하며, 지원하지 않는 경우에는 에러가 발생한다. 

 ViewEncapsulation.None - Shadow DOM 캡슐화를 사용하지 않으며, 컴포넌트의 모든 HTML과 스타일을 전역 웹 페이지 DOM에 포함시킨다. 이 경우에는 Shadow Host가 없기 때문에 :host 셀렉터도 동작하지 않는다. 이때 :host 셀렉터 대신 컴포넌트 자신의 셀렉터를 사용할 수 있다. 

• 라우팅 가드 동작은 다음과 같은 경우에 활용할 수 있다.

 사용자가 인증을 한 후에만 라우팅을 수행하고, 인증을 하지 않았다면 인증을 하게 한다.

 컴포넌트 몇 개로 만든 폼을 화면에 표시하고, 이 폼에 유효한 데이터를 입력한 경우에만 내비게이션을 허용한다.

 라우터에서 빠져나갈 때 저장하지 않은 정보가 있는 것을 사용자에게 알린다. 

• 라우터는 모듈에서 설정한다.

• 라우터는 주소와 컴포넌트를 매핑한다.

• 라우터와 연결된 컴포넌트가 렌더링되는 위치는 컴포넌트 템플릿에서 <router-outlet> 태그로 지정한다. 

• routerLink는 라우터 이름을 지정해서 사용할 수도 있다.

• nevigate() 함수를 사용할 때도 라우터 이름을 지정할 수 있다. 

• 라우터를 통해 인자를 전달하려면 라우터 설정의 path 프로퍼티가 인자를 받도록 지정해야 하며, 이 값은 routerLink나 navigate() 함수를 사용할 때 전달된다.

• 라우터를 통해 인자를 받으려면 인자를 받는 컴포넌트의 생성자에 ActivatedRoute를 의존성으로 주입하고 이 객체를 통해 값을 참조해야 한다.

• 라우터를 여러 계층으로 구성하려면 Routes 인터페이스를 정의할 때 children 프로퍼티로 지정한다.

• 라우터에 이름을 지정해서 사용하면 여러 개의 라우터를 동시에 사용할 수 있다.