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

1. Axios 인터셉터란?

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

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

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 인터셉터를 사용하면서 주의할 점

6. 결론

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