유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Angular Interceptors — Auth & Global HTTP Error Handling (Basics, 2025)

Decoded Frontend

2025. 9. 3.

0

#frontend
#backend
  • Angular HTTP Interceptors는 HTTP 요청 전후에 작업을 수행하여 헤더 추가, 캐시 데이터 반환, 로딩 상태 설정 등에 활용됩니다. ⚙️
  • 인터셉터는 특정 인터페이스를 구현하고 애플리케이션에 등록해야 하는 간단한 함수로 표현됩니다. 🧩
  • 인증 헤더와 토큰을 모든 HTTP 요청에 추가하는 인터셉터를 만들어 보안을 강화할 수 있습니다. 🛡️
  • Angular CLI를 사용하여 인터셉터를 생성하고, app.config.ts 파일에서 withInterceptors 함수를 통해 등록합니다. 💻
  • 요청 불변성 원칙을 준수하여 인터셉터가 동일한 요청에 대해 항상 동일하게 작동하도록 요청을 복제해야 합니다. 🧬
  • HTTP 응답 이벤트에 반응하는 인터셉터를 만들어 오류를 처리하고, 재시도 메커니즘을 구현할 수 있습니다. 🚨
  • RxJS의 pipe를 사용하여 HTTP 이벤트를 관찰하고, catchError 연산자로 오류를 처리하며, tap 연산자로 사이드 이펙트를 수행합니다. 🎣
  • 오류 발생 시 스낵바 메시지를 표시하여 사용자에게 알리는 기능을 구현할 수 있습니다. 💬
  • 오류 유형에 따라 다른 방식으로 대응하기 위해 여러 인터셉터를 사용하여 코드를 분리하고 유지보수성을 높일 수 있습니다. ✇
  • 인터셉터는 HTTP 클라이언트를 통해 이루어지는 요청에만 적용되며, fetch 함수를 직접 호출하는 경우에는 적용되지 않습니다. 📡
  • 인터셉터 실행 순서는 app.config.ts 파일에 정의된 순서에 따르므로 순서가 중요한 경우 주의해야 합니다. 🔢
  • 고급 시나리오에서는 특정 경로에 대해서만 인터셉터를 적용하는 방법을 사용할 수 있습니다. 🗺️

Recommanded Videos