오류 처리 연산자
catchError와 retry로 복구합니다.
오류 처리 연산자은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
옵저버블의 오류
옵저버블에서 오류가 방출되면 스트림은 종료됩니다. 더 이상 값이 방출되지 않고 오류 처리기가 실행됩니다. 오류 연산자를 사용하면 스트림을 중단하는 대신 복구하거나 재시도하거나 오류를 변환할 수 있습니다.
오류 경로
옵저버에서 또는 연산자를 사용하여 오류를 처리하세요. 처리하지 않은 오류가 발생하면 구독이 중단될 수 있습니다.
this.http.get('/api/data').subscribe({
next: d => console.log(d),
error: err => console.error('failed', err)
});catchError
catchError는 오류를 가로채고 대체 옵저버블을 반환하여 스트림이 정상적으로 계속되도록 합니다.
import { catchError, of } from 'rxjs';
this.http.get('/api/data').pipe(
catchError(err => {
console.error(err);
return of([]); // fallback value
})
).subscribe(data => console.log(data));선택적으로 다시 발생시키기
catchError 내부에서 오류를 확인한 후 복구할지, 아니면 throwError를 사용해 다시 발생시킬지 결정할 수 있습니다.
import { catchError, throwError, of } from 'rxjs';
source$.pipe(
catchError(err =>
err.status === 404 ? of(null) : throwError(() => err)
)
).subscribe();retry
retry(n)은 오류가 발생하면 소스를 최대 n번 다시 구독합니다. 일시적인 네트워크 오류에 유용합니다.
import { retry } from 'rxjs';
this.http.get('/api/flaky').pipe(
retry(2) // try up to 3 times total
).subscribe(d => console.log(d));설정을 사용한 retry
객체 형식을 사용하면 시도 사이에 지연 시간을 추가할 수 있고 지수적 지연 함수도 지원하므로 서버에 반복적으로 요청을 보내는 일을 방지할 수 있습니다.
this.http.get('/api/flaky').pipe(
retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));retryWhen 방식의 지수적 지연
지수적 지연을 사용하려면 delay 옵션을 함수로 지정할 수 있습니다. 이 함수는 시도할 때마다 점점 더 오래 지연하는 옵저버블을 반환합니다.
import { timer } from 'rxjs';
source$.pipe(
retry({
delay: (err, count) => timer(count * 1000)
})
).subscribe();retry 후의 catchError
두 연산자를 결합해 보세요. 일시적인 오류는 재시도하고, 재시도를 모두 소진하면 정상적으로 대체 처리합니다.
this.http.get('/api/data').pipe(
retry({ count: 2, delay: 500 }),
catchError(() => of([]))
).subscribe(data => console.log(data));배치 위치가 중요합니다
파이프라인에서 catchError의 위치가 적용 범위를 결정합니다. switchMap 내부에 배치하면 각 내부 요청의 오류를 처리하면서 외부 스트림은 계속 유지하고, 마지막에 배치하면 모든 오류를 처리합니다.
term$.pipe(
switchMap(t => this.http.get('/api?q=' + t).pipe(
catchError(() => of([])) // outer stream survives
))
).subscribe();조용한 대체 처리로서의 EMPTY
catchError에서 EMPTY를 반환하면 값 없이 스트림이 완료됩니다. 오류를 무시하고 아무것도 방출하지 않으려 할 때 유용합니다.
import { EMPTY, catchError } from 'rxjs';
source$.pipe(
catchError(() => EMPTY)
).subscribe();정리를 위한 finalize
finalize는 스트림이 어떤 이유로든 끝날 때(완료, 오류 또는 구독 해지) 콜백을 실행합니다. 오류 처리와 함께 사용하면 항상 로딩 상태를 초기화할 수 있습니다.
import { finalize, catchError, of } from 'rxjs';
this.loading = true;
source$.pipe(
catchError(() => of([])),
finalize(() => this.loading = false)
).subscribe();빠른 확인
오류 처리에 대한 이해도를 확인해 보세요.
복습: 오류 처리 연산자
오류는 처리하지 않으면 스트림을 종료합니다.
catchError: 대체 옵저버블을 반환하여 복구합니다.retry: 오류가 발생하면 다시 구독하며, 지연 또는 지수적 지연을 선택적으로 적용할 수 있습니다.- 배치 위치(
switchMap내부 또는 마지막)가 적용 범위를 제어합니다.
RxJS 연산자 심화 과정을 모두 완료하셨습니다.
자주 묻는 질문
“오류 처리 연산자” 강의는 무료인가요?
네 — “오류 처리 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“오류 처리 연산자”에서 뭘 배우나요?
catchError와 retry로 복구합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“오류 처리 연산자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.