Angular 19 라우팅 마스터하기: 실전 가이드 및 코드 예제

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 개발자 및 웹 애플리케이션 개발 초보자

난이도: 중급(기초 라우팅부터 고급 기능까지 포함)

핵심 요약

• Angular 19 라우팅 시스템 설정과 RouterModule.forRoot(routes) 사용법
• 동적 라우팅(product/:id) 및 라우트 가드(AuthGuard) 구현
• 로지컬 로딩(loadChildren)과 Resolver로 데이터 사전 로딩
• 커스텀 애니메이션(routeAnimations) 적용

섹션별 세부 요약

1. 기본 라우팅 설정

• ng new 명령어로 프로젝트 생성 시 --routing 옵션 사용
• AppRoutingModule에서 RouterModule.forRoot(routes)로 루트 라우트 정의
• HomeComponent, AboutComponent 등 기본 컴포넌트와의 연결 예시

2. 동적 라우팅 및 파라미터 사용

• path: 'product/:id' 형식으로 동적 URL 생성
• ActivatedRoute를 통해 params 구독하여 ID 추출
• 예: this.route.params.subscribe(params => console.log(params['id']));

3. 라우트 가드(AuthGuard) 구현

• ng generate guard auth/auth로 가드 생성
• canActivate() 메서드에서 인증 로직 구현(예: isLoggedIn 상태 확인)
• 라우트에 canActivate: [AuthGuard]로 적용

4. 라우트 리졸버(Resolver) 사용

• @Injectable로 정의된 ProductResolver 클래스 생성
• resolve() 메서드로 데이터 사전 로딩: this.service.getProduct(id)
• 라우트에 resolve: { product: ProductResolver }로 연결

5. 라우트 애니메이션 적용

• trigger('routeAnimations', [transition(' <=> ', [animate('500ms ease-out')])]) 형식으로 애니메이션 정의
• 템플릿에 [@routeAnimations] 속성 추가

6. 일반적인 라우팅 실수 및 해결법

• 누락 시 라우팅 오류 발생
• 와일드카드 라우트(path: '**') 순서 오류
• pathMatch: 'full' 사용을 잊으면 URL 매칭 오류 발생
• 프로그래밍적 네비게이션 시 Router 인젝션 누락

결론

• 라우트 애니메이션은 @routeAnimations 속성으로 간단히 적용 가능
• 래지 로딩(loadChildren)으로 성능 향상 및 모듈 분리
• 가드와 리졸버를 통해 보안 및 데이터 로딩 최적화
• pathMatch: 'full'과 누락은 라우팅 오류의 주요 원인
• Angular 19의 라우팅 시스템은 SPA 개발에 필수적인 핵심 기능!