axios로 네트워크 요청 깔끔하게 하기

와플카드 서비스가 궁금하다면!
와플카드 서비스 둘러보기 : https://waffle-card.com/
와플카드 깃허브 둘러보기 : https://github.com/waffle-card

와플카드를 개발하면서 네트워크 요청은 axios를 활용하였다. fetch를 사용하지 않고 axios를 사용한 이유는 아래와 같은 장점들 때문이다.

• JSON 데이터를 자동 변환해준다. (파싱을 추가로 할 필요 없음)
• 요청을 중도에 취소하거 응답시간 초과 등의 다양한 기능이 있다.
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리해진다.
• 코드가 훨씬 간결해진다.
• 인스턴스를 생성하여 설정을 쉽게 할 수 있다.
• 인터셉터를 활용하여 요청과 응답을 가로채어 설정할 수 있다.

가장 편리하고 유용하다고 생각한 기능은 인터셉터의 기능이었다. 인터셉터의 기능을 활용하면 네트워크 요청을 하는 컴포넌트에서 응답을 파싱하는 번거로운 작업을 네트워크 요청 모듈에서 해결할 수 있다.

api 네트워크 요청의 에러 응답은 아래와 같은 구조라고 가정해보자.

// sucess
{
  status: number;
  data : {...};
  ...
}

// error
{
  status: number;
	message: String;
}

그리고 아래 와플카드의 네트워크 요청의 모듈 예시를 보자.

// 에러 파싱 함수 예시
const convertErrorResponse = (response) => {
  return {
    status: response.status ?? 500,
    message: response.data.message ?? '알 수 없는 에러가 발생했습니다.',
  };
};

// 응답 데이터 파싱
const convertSucessResponse = (response) => {
  return {
    status: response.status ?? 500,
    data: response.data, // 구조에 따라 구조분해
  };
}

// 인터셉터를 활용하여 요청과 응답을 가로채어 파싱처리
const setInterceptors = (instance: AxiosInstance) => {
  instance.interceptors.request.use(
    config => {
      config.headers = {
        // 생략
        ...config.headers,
      };
      return config;
    },
    error => Promise.reject(convertErrorResponse(error.response)), // 에러 파싱
  );

  instance.interceptors.response.use(
    response => {
      return parseResponse(response); // 응답 파싱
    },
    error => Promise.reject(convertErrorResponse(error.response)), // 에러 파싱
  );
  return instance;
};


// 인스턴스 생성 및 config 설정
const createInstance = () => {
  const instance = axios.create({
    baseURL: process.env.REACT_APP_API_END_POINT,
    timeout: 5000,
  });
  return setInterceptors(instance);
};

export const request = createInstance(); // request로 모듈 내보내기


// in 유저 관련 네트워크 요청 모듈
export const userApi = {
	login: userInfo => request.post('/auth/login', userInfo),
  ...
}

위 코드를 보면 인스턴스를 활용하여 반복되는 설정을 하나의 인스턴스로 만들어서 재사용할 수 있는것을 확인할 수 있다. 그리고 인터셉터를 활용하여 응답과 에러를 파싱하여 리턴하도록 설정할 수 있다.

결과적으로 axios 모듈을 사용하는 측에서는 아래와 같이 별다른 파싱없이 응답 데이터를 편리하게 사용할 수 있고 코드를 훨씬 간결하게 구성할 수 있었다.

try {
  const user = await userApi.login(userInfo);
  setUser(user); // 간편하게 데이터를 바로 활용
} catch (error) {
  alert(error.message); // 에러 메세지를 편리하게 활용
}