문제 정의

API 요청 시마다 매번 수동으로 Authorization 헤더에 토큰을 추가하고, 응답에서 response.data를 추출해야 하는 불편함이 있었습니다. 이러한 수동 처리는 코드의 중복을 초래하고, 유지보수를 어렵게 만들었으며, 특히 다수의 API 요청이 있을 경우 실수로 인한 버그 발생 가능성이 높아지는 문제가 있었습니다. 또한, 응답 데이터를 일일이 처리해야 하는 번거로움으로 인해 개발 생산성이 저하되었습니다.

해결 과정

이 문제를 해결하기 위해 Axios 인터셉터를 도입하여 요청과 응답을 자동으로 처리하도록 설정하였습니다. 이를 통해 모든 API 요청 시 Authorization 헤더에 토큰을 자동으로 추가하고, 응답에서는 response.data를 자동으로 반환하도록 구현하였습니다. 다음은 구체적인 해결 과정입니다:

1. Axios 인스턴스 생성 기본 설정을 포함한 Axios 인스턴스를 생성하여 일관된 API 요청을 관리할 수 있도록 했습니다.

import axios, { AxiosResponse, AxiosError } from 'axios';

const API_URL = 'https://api.example.com';

const api = axios.create({
  baseURL: API_URL,
});

2. 요청 인터셉터 설정 모든 요청 전에 실행되어 Authorization 헤더에 토큰을 자동으로 추가합니다. 이를 통해 매번 요청할 때마다 헤더를 수동으로 설정할 필요가 없어졌습니다.

api.interceptors.request.use((config) => {
  if (typeof window !== 'undefined') {
    const token = localStorage.getItem('pagebrothers-token');
    if (token) {
      config.headers.set('Authorization', `Bearer ${token}`);
    }
  }
  return config;
});

3. 응답 인터셉터 설정 모든 응답 후에 실행되어 response.data를 자동으로 반환하도록 설정합니다. 이를 통해 응답 데이터를 일일이 처리할 필요가 없어졌습니다.

api.interceptors.response.use(
  <T>(response: AxiosResponse<T>): T => response.data as T,
  (error: AxiosError) => {
    return Promise.reject(error);
  },
);

결과

Axios 인터셉터를 도입한 후 다음과 같은 개선 효과를 얻었습니다:

• 코드 중복 감소: API 요청 시마다 Authorization 헤더를 수동으로 추가할 필요가 없어져 코드가 간결해졌습니다.
• 유지보수 용이성 향상: 헤더 추가 및 응답 처리 로직이 중앙 집중화되어, 변경이 필요할 경우 인터셉터 설정만 수정하면 됩니다.
• 버그 발생률 감소: 헤더 추가 및 응답 처리 로직의 일관성이 확보되어 실수로 인한 버그 발생 가능성이 줄어들었습니다.
• 개발 생산성 향상: 반복적인 코드 작성을 줄여 개발 속도가 빨라졌으며, 더 중요한 비즈니스 로직에 집중할 수 있게 되었습니다.
• 응답 데이터 처리의 일관성: 모든 응답에서 response.data만을 반환하도록 설정하여, 응답 데이터를 처리하는 방식이 일관되게 유지되었습니다.

배운 점 (인사이트)

• Axios 인터셉터의 강력함: 인터셉터를 활용하면 요청과 응답을 중앙에서 일괄적으로 처리할 수 있어, 코드의 중복을 줄이고 일관성을 유지하는 데 큰 도움이 된다는 것을 깨달았습니다.
• DRY 원칙 준수: 반복되는 코드를 피하고, 재사용 가능한 로직을 인터셉터에 통합함으로써 DRY(Don't Repeat Yourself) 원칙을 효과적으로 적용할 수 있었습니다.
• 효율적인 에러 처리: 응답 인터셉터를 통해 전역적인 에러 핸들링을 구현할 수 있어, 개별 요청에서 에러 처리를 일일이 구현할 필요가 없음을 알게 되었습니다.
• 코드 유지보수성 향상: 인터셉터 설정을 통해 상태 관리와 데이터 처리 로직을 분리함으로써, 코드의 유지보수성이 크게 향상되었습니다.