커스텀 라우팅 규칙 매칭 만들기

Angular 라우터는 사용자가 애플리케이션을 탐색할 수 있도록 강력한 매칭 전략을 지원합니다. 이 전략은 정적 라우팅 규칙, 파라미터가 있는 가변 라우팅 규칙, 와일드카드 라우팅 규칙 등을 지원합니다. URL이 더 복잡한 경우에는 커스텀 패턴 매칭을 직접 만들 수도 있습니다.

이 튜토리얼에서는 Angular의 UrlMatcher로 커스텀 라우팅 규칙 매처를 만듭니다. 이 매처는 URL에서 X(이전 이름 Twitter) 사용자 이름을 찾습니다.

목표

Angular의 UrlMatcher를 구현해서 커스텀 라우팅 규칙 매처를 만듭니다.

예제 애플리케이션 생성하기

Angular CLI로 angular-custom-route-match라는 새 애플리케이션을 생성하세요. 기본 Angular 애플리케이션 구조와 함께 profile 컴포넌트도 생성합니다.

1. angular-custom-route-match라는 새 Angular 프로젝트를 생성하세요.

   ng new angular-custom-route-match

   Would you like to add Angular routing?이라는 질문이 나오면 Y를 선택하세요.

   Which stylesheet format would you like to use?라는 질문이 나오면 CSS를 선택하세요.

   잠시 후 새 프로젝트 angular-custom-route-match가 준비됩니다.

2. 터미널에서 angular-custom-route-match 디렉터리로 이동하세요.

3. profile 컴포넌트를 생성하세요.

   ng generate component profile

4. 코드 편집기에서 profile.html 파일을 열고 기본 내용을 다음 HTML로 교체하세요.

   profile.html

   <p>Hello {{ username() }}!</p>

5. 코드 편집기에서 app.html 파일을 열고 기본 내용을 다음 HTML로 교체하세요.

   app.html

   <h2>Routing with Custom Matching</h2>
   
   Navigate to <a routerLink="/@Angular">my profile</a>
   
   <router-outlet />

애플리케이션의 라우팅 규칙 설정하기

애플리케이션의 기본 구조를 준비했으면 app.config.ts 파일에 라우팅 기능을 추가하세요. 이 과정에서 URL의 X 사용자 이름을 찾는 커스텀 URL 매처를 만듭니다. 사용자 이름은 앞에 붙은 @ 기호로 구별합니다.

1. 코드 편집기에서 app.config.ts 파일을 여세요.

2. Angular의 provideRouter, withComponentInputBinding, 애플리케이션 라우팅 규칙을 불러오는 import 구문을 추가하세요.

   import {provideRouter, withComponentInputBinding} from '@angular/router';
   
   import {routes} from './app.routes';

3. providers 배열에 provideRouter(routes, withComponentInputBinding())을 추가하세요.

4. 애플리케이션 라우팅 규칙에 다음 코드를 추가해서 커스텀 라우팅 규칙 매처를 정의하세요.

   app.routes.ts

   {
     matcher: (url) => {
       if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
         return {consumed: url, posParams: {username: new UrlSegment(url[0].path.slice(1), {})}};
       }
   
       return null;
     },
     component: Profile,
   },

이 커스텀 매처는 다음 작업을 수행하는 함수입니다.

• 배열에 세그먼트가 하나만 있는지 확인합니다.
• 정규표현식으로 사용자 이름의 형식이 일치하는지 확인합니다.
• 일치하면 전체 URL을 반환하고, 경로의 부분 문자열을 username 라우팅 규칙 파라미터로 정의합니다.
• 일치하지 않으면 null을 반환하고, 라우터는 URL과 매칭되는 다른 라우팅 규칙을 계속 찾습니다.

라우팅 규칙 파라미터 읽기

커스텀 매처를 준비했으면 profile 컴포넌트에 라우팅 규칙 파라미터를 바인딩할 수 있습니다.

코드 편집기에서 profile.ts 파일을 열고 username 파라미터와 일치하는 input을 생성하세요. 앞에서 provideRouter에 withComponentInputBinding 기능을 추가했습니다. 이 기능을 사용하면 Router가 라우팅 규칙 컴포넌트에 정보를 직접 바인딩할 수 있습니다.

username = input.required<string>();

커스텀 URL 매처 테스트하기

코드가 준비되었으면 커스텀 URL 매처를 테스트할 수 있습니다.

1. 터미널에서 ng serve 명령을 실행하세요.

   ng serve

2. 브라우저에서 http://localhost:4200을 여세요.

   Navigate to my profile이라는 문장이 있는 웹 페이지가 표시됩니다.

3. my profile 링크를 클릭하세요.

   페이지에 Hello, Angular!라는 새 문장이 표시됩니다.

다음 단계

Angular 라우터의 패턴 매칭을 사용하면 애플리케이션의 동적 URL을 유연하게 처리할 수 있습니다. Angular 라우터가 더 궁금하면 다음 내용을 참고하세요.