Angular Router 적용

Angular 17 환경에서 SPA 내비게이션을 관리하는 Angular Router의 기본 적용 방법을 단계별로 설명하는 튜토리얼이다. ng CLI 명령부터 app.routing.module.ts 라우팅 규칙 등록, routerLink/routerLinkActive/router-outlet 속성 적용까지 전체 구성 흐름을 실제 코드와 함께 제시한다.

핵심 포인트

routerLink vs `<a href>`: routerLink는 새로고침 없이 컴포넌트 교체(SPA 방식), href는 전체 페이지 재로드
`--no-standalone` 플래그: Angular 17+에서 기본 standalone 구조를 app.module.ts 포함 방식으로 전환
app.routing.module.ts에 `{ path: 'First', component: FirstComponent }` 형태로 라우팅 규칙 등록
`routerLinkActive="active"` 속성으로 현재 활성 링크에 CSS 클래스 자동 적용
`<router-outlet>`: 라우터가 활성 경로의 컴포넌트를 동적으로 마운트하는 디렉티브

상세 정리

환경: Node 20.9.0, Angular CLI 17.0.3
프로젝트 생성: `ng new --no-standalone` — 17버전 이후 기본 standalone 구조를 module 방식으로 전환
컴포넌트 생성: `ng generate component First`, `ng generate component Second`
app.routing.module.ts: `const routes: Routes = [{ path: 'First', component: FirstComponent }, { path: 'Second', component: SecondComponent }]`
app.module.ts: declarations에 컴포넌트 추가, imports에 AppRoutingModule + BrowserModule 포함
app.component.html 네비게이션 구성: `<a routerLink="/First" routerLinkActive="active" ariaCurrentWhenActive="page">First</a>`
`<router-outlet>`: 라우터가 활성 경로에 해당하는 컴포넌트를 동적으로 주입하는 위치 마커
ariaCurrentWhenActive="page": 현재 활성 메뉴 항목을 접근성 표준에 맞게 시각적으로 구별