Axios 인터셉터로 응답 및 요청 관리하기

Axios 인터셉터로 응답 및 요청 관리하기

1. Axios 인터셉터란?

Axios 인터셉터는 HTTP 요청 또는 응답을 처리하기 전에 실행되는 함수입니다. 이를 활용하면 다음과 같은 작업을 효율적으로 처리할 수 있습니다:

• 모든 요청에 공통 헤더 추가
• 응답 데이터의 가공 및 표준화
• 에러 처리 및 로깅
• 인증 토큰 갱신

2. 왜 인터셉터를 사용할까?

• 코드 중복 제거: 반복되는 로직을 한 곳에서 관리.
• 일관된 응답 처리: 백엔드에서 제공하는 응답 구조를 통일.
• 에러 핸들링 간소화: 공통 에러 처리를 한 번에 적용.
• 확장성 강화: 새로운 API가 추가되더라도 인터셉터만 업데이트하면 적용 가능.

---

3. 인터셉터 기본 사용법

1) 요청(Request) 인터셉터

모든 요청에 특정 헤더를 추가하거나, 데이터를 가공하기 위해 사용됩니다.

typescript
코드 복사
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
})

instance.interceptors.request.use(
  (config) => {
    // 요청 전에 특정 작업 수행
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`
    console.log('Request:', config)
    return config
  },
  (error) => {
    // 요청 에러 처리
    return Promise.reject(error)
  }
)

2) 응답(Response) 인터셉터

응답 데이터를 가공하거나, 에러를 공통적으로 처리할 때 사용됩니다.

typescript
코드 복사
instance.interceptors.response.use(
  (response) => {
    // 성공 응답 데이터 가공
    return {
      ...response,
      success: true,
    }
  },
  (error) => {
    // 에러 응답 처리
    console.error('API Error:', error.response?.data || error.message)
    return Promise.reject(error)
  }
)

---

4. 대표적인 예시

1) 공통 응답 구조 표준화

백엔드에서 다양한 응답 형식을 보내더라도, 프론트엔드에서는 통일된 구조로 사용할 수 있습니다.

typescript
코드 복사
instance.interceptors.response.use(
  (response) => {
    return {
      data: response.data,
      status: response.status,
      message: response.data?.message || 'Success',
    }
  },
  (error) => {
    return Promise.reject({
      data: null,
      status: error.response?.status || 500,
      message: error.response?.data?.message || 'An error occurred',
    })
  }
)

2) JWT 토큰 자동 갱신

토큰 기반 인증 시스템에서 액세스 토큰이 만료되면 자동으로 갱신합니다.

typescript
코드 복사
instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      const originalRequest = error.config
      const refreshToken = localStorage.getItem('refreshToken')

      if (refreshToken) {
        const newToken = await axios.post('/auth/refresh-token', { token: refreshToken })
        localStorage.setItem('token', newToken.data.accessToken)
        originalRequest.headers['Authorization'] = `Bearer ${newToken.data.accessToken}`
        return axios(originalRequest)
      }
    }
    return Promise.reject(error)
  }
)

3) 다국어 지원

글로벌 애플리케이션에서 모든 요청에 Accept-Language 헤더를 추가하여 다국어 지원을 간단히 구현합니다.

typescript
코드 복사
import i18n from 'i18next'

instance.interceptors.request.use((config) => {
  config.headers['Accept-Language'] = i18n.language
  return config
})

---

5. Axios 인터셉터를 사용하면서 주의할 점

1. 인터셉터가 모든 요청/응답에 영향을 미침 : 특정 요청에만 다르게 처리하려면 인터셉터에서 조건문을 사용해야 한다
2. 원본 데이터 접근 제한 : 인터셉터에서 데이터를 가공하면 원본 데이터를 바로 사용할 수 없으니 주의해야한다.
3. 복잡성 관리 : 인터셉터를 과도하게 사용하면 디버깅이 어려울 수 있다.

---

6. 결론

Axios 인터셉터는 프론트엔드 개발에서 API 요청 및 응답을 효율적으로 관리하는 강력한 도구입니다. 특히 프로젝트가 커질수록 코드의 중복을 줄이고 유지보수성을 높이는 데 중요한 역할을 합니다

• 적용 사례: JWT 인증, 에러 로깅, 응답 데이터 가공, 다국어 지원