함수형 경로 가드
함수형 가드로 경로를 보호합니다.
함수형 경로 가드은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
경로 가드란 무엇인가요
가드는 이동을 진행할 수 있는지 결정합니다. 인증으로 보호되는 경로를 제한하거나, 폼을 나가기 전에 확인하거나, 역할에 따라 접근을 제한할 수 있습니다. 최신 Angular에서는 함수형 가드를 사용하며, 이는 클래스가 아닌 일반 함수입니다.
CanActivateFn
CanActivateFn은 이동을 허용하려면 true, 차단하려면 false, 리디렉션하려면 UrlTree를 반환합니다. 이러한 값 중 하나의 옵저버블이나 프로미스를 반환할 수도 있습니다.
import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
return auth.isLoggedIn();
};가드를 경로에 연결하기
canActivate로 가드를 연결합니다(배열이므로 여러 개를 연이어 적용할 수 있습니다).
export const routes = [
{ path: 'dashboard', component: DashboardComponent,
canActivate: [authGuard] }
];UrlTree로 리디렉션하기
router.createUrlTree 또는 parseUrl에서 UrlTree를 반환하면 한 단계에서 차단과 리디렉션을 모두 처리할 수 있습니다.
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
const router = inject(Router);
return auth.isLoggedIn() ? true : router.parseUrl('/login');
};비동기 가드
가드는 관찰 가능 객체를 반환할 수 있으며, 라우터는 첫 번째 값을 받은 다음 완료될 때까지 기다립니다.
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
return auth.checkSession$().pipe(
map(ok => ok ? true : inject(Router).parseUrl('/login'))
);
};가드에서 경로 정보에 액세스하기
CanActivateFn은 ActivatedRouteSnapshot과 RouterStateSnapshot을 전달받으므로 매개변수, 데이터, 시도한 URL을 읽을 수 있습니다.
export const roleGuard: CanActivateFn = (route, state) => {
const needed = route.data['role'];
const auth = inject(AuthService);
return auth.hasRole(needed);
};canMatch 가드
CanMatchFn은 경로 정의가 아예 일치하는지 결정합니다. 기능 플래그에 따라 경로를 바꾸거나 허용된 경우에만 지연 로드할 때 유용합니다.
import { CanMatchFn } from '@angular/router';
export const featureGuard: CanMatchFn = () =>
inject(FeatureService).enabled('beta');canDeactivate 가드
CanDeactivateFn은 경로를 벗어날 때 실행되므로 저장하지 않은 변경 사항을 확인하는 데 적합합니다. 컴포넌트 인스턴스를 전달받습니다.
import { CanDeactivateFn } from '@angular/router';
export const unsavedGuard: CanDeactivateFn<FormComponent> =
(component) => component.isPristine() || confirm('Discard changes?');여러 가드 연이어 적용하기
배열의 모든 가드가 탐색을 허용해야 합니다. 가드는 함께 실행되며, 하나라도 false 또는 UrlTree를 반환하면 탐색이 차단되거나 리디렉션됩니다.
canActivate: [authGuard, roleGuard]
// both must pass클래스 가드보다 함수형 가드를 사용하는 이유
함수형 가드는 더 간단합니다. @Injectable 상용구 코드가 필요 없고, inject()를 쉽게 사용할 수 있으며, 조합 가능하고 트리 셰이킹을 지원합니다. 클래스 기반 CanActivate 인터페이스는 더 이상 사용되지 않습니다.
가드와 자식 경로
canActivateChild를 사용하면 부모의 모든 자식 경로를 한 곳에서 보호할 수 있어 각 자식에 가드를 반복해서 지정하지 않아도 됩니다.
{ path: 'admin', canActivateChild: [authGuard],
children: [ /* all protected */ ] }빠른 확인
함수형 가드에 대한 이해도를 확인해 보세요.
복습: 함수형 경로 가드
함수형 가드는 일반 함수로 탐색을 제어합니다.
CanActivateFn: 허용, 차단 또는 리디렉션(UrlTree)을 수행합니다.CanMatchFn: 경로가 아예 일치하는지 결정합니다.CanDeactivateFn: 경로를 벗어날 때 확인합니다.- 서비스에는
inject()를 사용하고, 배열에 가드를 연이어 지정합니다.
다음: 라우터 이벤트와 탐색입니다.
자주 묻는 질문
“함수형 경로 가드” 강의는 무료인가요?
네 — “함수형 경로 가드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“함수형 경로 가드”에서 뭘 배우나요?
함수형 가드로 경로를 보호합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“함수형 경로 가드” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.