Axios 인터셉터로 요청과 응답을 한곳에서 관리하기

인터셉터 기본 사용법

요청(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)
  }
)

응답(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)
  }
)

대표적인 예시

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
})

사용할 때 주의할 점

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

결론

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

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