[Frontend] Axios Interceptor vs Transform(Request/Response)

1. Axios란?

Axios는 브라우저와 Node.js 환경에서 사용 가능한 HTTP 클라이언트 라이브러리입니다. 주로 API 요청을 보낼 때 사용되며, 응답을 처리하는 기능을 제공합니다.

2. Axios Interceptor

Interceptor는 요청(request) 또는 응답(response)이 처리되기 전후에 실행되는 기능입니다. 이를 통해 공통적인 요청/응답 로직을 중앙에서 관리할 수 있습니다.

요청 인터셉터(Request Interceptor)

요청을 보내기 전에 특정 작업을 수행할 수 있습니다. 예를 들어, 모든 요청에 인증 토큰을 추가하는 경우가 있습니다.

axios.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

응답 인터셉터(Response Interceptor)

서버에서 응답을 받은 후 데이터 변환, 오류 처리 등을 수행할 수 있습니다.

axios.interceptors.response.use(
  (response) => {
    return response.data; // 응답 데이터만 반환
  },
  (error) => {
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);

3. Axios Transform(Request/Response)

Transform 기능은 요청을 보내거나 응답을 받기 전에 데이터를 변환하는 기능을 제공합니다. 특정 요청 또는 응답에서만 변환이 필요할 때 유용합니다.

요청 데이터 변환(Request Transform)

요청을 보내기 전에 데이터를 변환하는 기능입니다.

axios.post('/user', { name: 'John' }, {
  transformRequest: [(data, headers) => {
    return JSON.stringify(data); // 데이터를 JSON 문자열로 변환
  }]
});

응답 데이터 변환(Response Transform)

응답을 받은 후 데이터를 가공하는 기능입니다.

axios.get('/user', {
  transformResponse: [(data) => {
    return JSON.parse(data).map(user => user.name.toUpperCase());
  }]
}).then(response => console.log(response));

4. Interceptor vs Transform 비교

Interceptor	Transform
글로벌하게 요청/응답을 가로채어 처리 가능	개별 요청/응답에서 데이터 변환 가능
모든 API 요청에 공통적인 로직을 적용할 때 사용	특정 API 요청/응답에서만 변환이 필요할 때 사용
주로 인증 토큰 추가, 로딩 스피너 표시, 공통 오류 처리 등에 활용	데이터 포맷 변경, 특정 응답 가공 등에 활용

---

결론

Axios의 Interceptor와 Transform은 각각의 역할이 다릅니다. Interceptor는 모든 요청/응답을 가로채는 데 유용하며, Transform은 특정 요청이나 응답에서만 데이터 변환이 필요할 때 사용됩니다. 개발자는 프로젝트의 요구사항에 따라 적절한 방식을 선택해야 합니다.

 

[참고]

APIDog - Axios 문서