axios-retryer: 강력한 API 통신을 위한 Axios 요청 최적화 라이브러리

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- React 애플리케이션 개발자: 복잡한 API 요청 관리와 토큰 갱신 처리가 필요한 프론트엔드 개발자

- 중간~고급 수준: 병렬 처리, 회복 전략, 회로 차단 기능을 활용한 고성능 API 통신 구현이 필요한 개발자

핵심 요약

• 우선순위 및 병렬 처리: __priority 옵션으로 요청 우선순위 설정, maxConcurrentRequests로 병렬 처리 제한
• 고도화된 재시도 전략: 선형, 지수, 정적, 커스텀 방식의 백오프 전략 지원 (AXIOS_RETRYER_BACKOFF_TYPES)
• 토큰 갱신 플러그인: 401 에러 발생 시 자동 토큰 갱신 및 재시도 처리 (TokenRefreshPlugin)
• 모듈화된 확장성: CircuitBreakerPlugin, CachingPlugin 등 플러그인 기반 확장 가능

섹션별 세부 요약

1. **라이브러리 개요 및 동기**

- 병렬 처리, 우선순위, 재시도, 토큰 갱신, 회로 차단 기능을 통합한 Axios 요청 관리 라이브러리

- 기존 솔루션의 복잡성을 줄이고, 일관된 API를 제공

- 핵심 기능: createRetryer()를 통해 axiosInstance 생성

2. **우선순위 및 병렬 처리 구현**

- maxConcurrentRequests: 최대 병렬 요청 수 제한 (예: 2)

- __priority: CRITICAL, HIGH, LOW 등 수치 기반 우선순위 설정

- blockingQueueThreshold: 특정 우선순위 이상 요청만 처리

3. **재시도 전략 구성**

- 선형: 1s → 2s → 3s

- 지수: 1s → 2s → 4s → 8s (기본값)

- 커스텀: retryStrategy 객체로 isRetryable, shouldRetry, getDelay 함수 정의 가능

- 예: getDelay(attempt) => (attempt + 1) 1000 + (Math.random() 500)

4. **토큰 갱신 플러그인 사용법**

- 401 에러 발생 시 createTokenRefreshPlugin을 통해 자동 토큰 갱신

- localStorage에서 refresh token 가져와 새 access token 발급

- 예: await axios.post('/auth/refresh', { refreshToken })

5. **설치 및 기본 설정**

- 설치: npm install axios-retryer 또는 yarn add axios-retryer

- 기본 사용:

```ts

import { createRetryer } from 'axios-retryer';

const retryer = createRetryer({ retries: 3, debug: false });

retryer.axiosInstance.get('/api/data');

```

결론

• axios-retryer는 병렬 처리, 우선순위 관리, 자동 토큰 갱신, 회로 차단 기능을 통합한 Axios 요청 최적화 라이브러리로, 복잡한 API 통신 요구사항을 단일 라이브러리로 해결할 수 있다. 6.4 kB 미만의 작은 크기로 성능 저하 없이 사용 가능. 핵심은 createRetryer()를 통해 생성한 axiosInstance를 활용하는 것.