재시도와 로딩 표시기
재시도와 전역 로딩 표시기를 구현합니다.
재시도와 로딩 표시기은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 가지 공통 기능
인터셉터는 앱 전체에 적용되는 두 가지 동작에 적합합니다. 실패한 요청을 자동으로 재시도하고, 요청이 진행 중인 동안 전역 로딩 상태를 추적할 수 있습니다.
retry로 재시도하기
next(req) 뒤에 retry를 연결하여 일시적인 실패를 다시 시도합니다.
import { retry } from 'rxjs';
export const retryInterceptor: HttpInterceptorFn = (req, next) =>
next(req).pipe(retry(2));안전한 요청만 재시도하기
멱등 메서드인 GET과 HEAD는 자유롭게 재시도해도 되지만, 중복을 일으킬 수 있는 POST와 PUT을 재시도할 때는 주의해야 합니다. 메서드를 확인하여 제한합니다.
export const retryInterceptor: HttpInterceptorFn = (req, next) => {
if (req.method !== 'GET') return next(req);
return next(req).pipe(retry(2));
};지연 및 백오프를 적용해 재시도하기
재시도할 때 서버에 과도한 요청이 몰리지 않도록 지연을 추가하고, 복원력을 높이기 위해 지수 백오프를 적용합니다.
import { timer } from 'rxjs';
next(req).pipe(
retry({
count: 3,
delay: (_err, n) => timer(Math.pow(2, n) * 500)
})
);조건부 재시도
재시도할 수 있는 오류(5xx, 네트워크 오류)에만 재시도하고, 다시 실패할 4xx 클라이언트 오류에는 재시도하지 않습니다.
retry({
count: 2,
delay: (err, n) =>
err.status >= 500 ? timer(n * 500) : throwError(() => err)
})전역 로딩 상태
로딩 서비스는 활성 요청 수를 추적하므로 UI에 전역 스피너를 표시할 수 있습니다.
export class LoadingService {
private active = signal(0);
readonly isLoading = computed(() => this.active() > 0);
start() { this.active.update(n => n + 1); }
stop() { this.active.update(n => Math.max(0, n - 1)); }
}로딩 인터셉터
요청이 시작될 때 수를 증가시키고, 성공 또는 오류로 완료될 때 finalize를 사용하여 수를 감소시킵니다.
import { finalize } from 'rxjs';
export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
const loading = inject(LoadingService);
loading.start();
return next(req).pipe(finalize(() => loading.stop()));
};finalize를 사용하는 이유
finalize는 완료, 오류 또는 구독 취소 시 실행되므로 로딩 카운터가 항상 감소합니다. 요청이 실패하거나 취소되더라도 스피너가 멈추지 않는 문제가 발생하지 않습니다.
스피너 표시하기
루트 템플릿에 로딩 신호를 바인딩하세요.
// root component template:
// @if (loading.isLoading()) {
// <app-spinner />
// }백그라운드 요청 제외하기
일부 폴링 또는 프리페치 요청은 스피너를 표시하지 않아야 합니다. 사용자 지정 헤더나 컨텍스트 토큰을 사용하여 이러한 요청을 건너뛰세요.
import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);재시도와 로딩 결합하기
재시도가 하나의 로딩 구간 안에서 이루어지도록 순서를 정하세요. 로딩을 시작하고, 내부에서 재시도한 다음, 마지막에 한 번만 완료 처리하세요. 모든 재시도 시도를 포함하도록 로딩을 가장 바깥에 배치하세요.
빠른 확인
재시도와 로딩 표시기에 대한 이해도를 확인해 보세요.
복습: 재시도 및 로딩 표시기
인터셉터를 사용하면 재시도와 전역 로딩을 깔끔하게 처리할 수 있습니다.
- 지연 또는 백오프와 함께
retry를 사용하되, 멱등 작업이나 재시도 가능한 경우로 제한합니다. - 서비스에서 활성 요청을 추적하고,
finalize에서 개수를 감소시킵니다. - 컨텍스트 토큰을 사용하여 백그라운드 요청을 건너뜁니다.
HttpClient 인터셉터를 모두 학습했습니다.
자주 묻는 질문
“재시도와 로딩 표시기” 강의는 무료인가요?
네 — “재시도와 로딩 표시기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“재시도와 로딩 표시기”에서 뭘 배우나요?
재시도와 전역 로딩 표시기를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“재시도와 로딩 표시기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.