애플리케이션에 라우팅 규칙 추가하기

이번 실습에서는 앱에 라우팅 규칙을 추가하는 방법을 알아봅니다.

IMPORTANT: 라우팅 실습은 로컬 환경에서 진행하는 것을 권장합니다.

학습 목표

이번 실습을 마치면 애플리케이션에서 라우팅을 사용할 수 있습니다.

라우팅 개념 살펴보기

이번 실습에서는 Angular 라우팅을 소개합니다. 라우팅은 애플리케이션의 한 컴포넌트에서 다른 컴포넌트로 이동하는 기능입니다. 싱글 페이지 애플리케이션(SPA)에서는 사용자가 요청한 화면을 표시하기 위해 페이지의 일부만 갱신합니다.

Angular 라우터를 사용하면 라우팅 규칙을 선언하고 해당 경로를 요청했을 때 표시할 컴포넌트를 지정할 수 있습니다.

이번 실습에서는 애플리케이션에서 상세 페이지로 이동할 수 있도록 라우팅을 활성화합니다.

  1. 기본 상세 페이지 컴포넌트 만들기

    1. 터미널에서 다음 명령어로 Details를 만드세요:

      ng generate component details

      이 컴포넌트는 특정 주택의 자세한 정보를 제공하는 상세 페이지를 표시합니다.

  2. 애플리케이션에 라우팅 추가하기

    1. src/app 디렉터리에 routes.ts 파일을 만드세요. 이 파일에 애플리케이션의 라우팅 규칙을 정의합니다.

    2. 애플리케이션에서 라우팅을 활성화하도록 main.ts를 다음과 같이 수정하세요:

      1. 라우팅 규칙 파일과 provideRouter 함수를 불러오세요:

      src/main.ts에서 라우팅 관련 항목 불러오기

      import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));
      1. 라우팅 설정을 포함하도록 bootstrapApplication 호출을 수정하세요:

      src/main.ts에 라우터 설정 추가하기

      import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));

    3. src/app/app.ts에서 컴포넌트가 라우팅을 사용하도록 수정하세요:

      1. 파일 수준에 라우터 디렉티브인 RouterOutlet과 RouterLink를 불러오는 구문을 추가하세요:

      src/app/app.ts에서 라우터 디렉티브 불러오기

      import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
      1. @Component 메타데이터의 imports에 RouterOutlet과 RouterLink를 추가하세요.

      src/app/app.ts의 컴포넌트 imports에 라우터 디렉티브 추가하기

      import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}
      1. template 프로퍼티의 <app-home /> 태그를 <router-outlet> 디렉티브로 바꾸고 홈 페이지로 돌아오는 링크를 추가하세요. 다음 코드와 같아야 합니다:

      src/app/app.ts에 router-outlet 추가하기

      import {Component} from '@angular/core';
import {Home} from './home/home';
import {RouterLink, RouterOutlet} from '@angular/router';
@Component({
  selector: 'app-root',
  imports: [Home, RouterOutlet, RouterLink],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

  3. 컴포넌트의 라우팅 규칙 추가하기

    앞 단계에서 템플릿의 <app-home> 컴포넌트를 제거했습니다. 이 단계에서는 해당 컴포넌트로 이동하는 라우팅 규칙을 추가합니다.

    1. routes.ts에서 다음과 같이 라우팅 규칙을 만드세요.

      1. 파일 수준에 Home, Details와 라우팅 규칙 정의에 사용할 Routes 타입을 불러오는 구문을 추가하세요.

        컴포넌트와 Routes 불러오기

        import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;

      2. Routes 타입의 routeConfig 변수를 만들고 앱의 라우팅 규칙 두 개를 정의하세요:

        앱에 라우팅 규칙 추가하기

        import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;

        routeConfig 배열의 각 항목은 애플리케이션의 라우팅 규칙입니다. 첫 번째 항목은 URL이 ''와 일치할 때 Home으로 이동합니다. 두 번째 항목의 특별한 형식은 이후 실습에서 다룹니다.

    2. 모든 변경 사항을 저장하고 브라우저에서 애플리케이션이 동작하는지 확인하세요. 이전과 동일하게 주택 목록이 표시되어야 합니다.

    4. SUMMARY: 이번 실습에서는 앱의 라우팅을 활성화하고 새 라우팅 규칙을 정의했습니다. 이제 화면 사이를 이동할 수 있습니다. 다음 실습에서는 특정 주택의 상세 페이지로 이동하는 방법을 알아봅니다.

    앱 개발이 순조롭게 진행되고 있습니다. 잘하셨습니다.

    이 실습에서 다룬 내용을 더 알아보려면 다음 문서를 참고하세요: