[TIL] 0107

axios함수를 추상화하는 작업을 진행했다.

axios create함수를 사용해 모든 api에 필요한 공통 속성들을 정의한 커스텀 axios를 만들고,
후에 리프레시 토큰 로직을 추가할 것을 대비해 interceptor도 적용해주었다.

import axios from 'axios';

const { REACT_APP_API_END_POINT } = process.env;
const token = sessionStorage.getItem('authorization');

const request = axios.create({
  baseURL: `${REACT_APP_API_END_POINT}`,
  timeout: 5000,
  headers: {
    ...(token && { Authorization: `Bearer ${JSON.parse(token)}` }),
  },
});

request.interceptors.request.use(
  config =>
    // 이 부분에서 리프레스 토큰 처리해주면 됩니다
    config,
  error => Promise.reject(error),
);

request.interceptors.response.use(
  response => response,
  error => Promise.reject(error),
);

export default request;

메소드 이름과 각 메소드에 필요한 값들을 파라미터로 넘겨주면 해당 메소드의 커스텀 axios함수를 실행시켜주는 추상화 함수도 만들었다.

const fetchWrap = async ({ method, url, data = {}, params = {} }) => {
  try {
    const config = {
      params,
    };

    const response =
      (method === 'get' && (await request.get(url, config))) ||
      (method === 'post' && (await request.post(url, data, config))) ||
      (method === 'put' && (await request.put(url, data, config))) ||
      (method === 'delete' && (await request.delete(url, config))) ||
      {};

    return response;
  } catch (error) {
    Swal.fire({
      title: error.response
        ? errorToString(error.response.data.code)
        : '요청 형식이 잘못되었습니다!',
      icon: 'question',
      confirmButtonText: '확인',
      confirmButtonColor: '#ffb15c',
    });

    return error;
  }
};

export const GET = ({ url, params }) =>
  fetchWrap({ method: 'get', url, params });

export const POST = ({ url, data, params }) =>
  fetchWrap({ method: 'post', url, data, params });

export const PUT = ({ url, data }) => fetchWrap({ method: 'put', url, data });

export const DELETE = ({ url }) => fetchWrap({ method: 'delete', url });

조건에 따라 객체의 key+value를 모두를 할당하거나 아예 할당하지 않게 하는 문법

const request = axios.create({
  baseURL: `${REACT_APP_API_END_POINT}`,
  timeout: 5000,
  headers: {
    ...(token && { Authorization: `Bearer ${JSON.parse(token)}` }),
  },
});

1차 프로젝트를 하면서 가장 약했던 부분이 axios, api, 비동기 관련 부분이었는데
2차 프로젝트 기간에 api를 많이 사용해보면서 어떻게 사용하는 지에 대한 감은 잡았지만,
axios를 효율적으로 작성해서 사용하지는 못했었다. (중복 코드가 많았었음)
그래서 리팩토링 기간에 내가 직접 axios코드를 수정하고 싶었다.
다른 팀들의 코드와 팀원이 찾아준 자료를 보면서 리팩토링 작업을 했는데 시간도 오래 걸리고 시행착오도 많았지만 결국엔 모든 api가 잘 동작하게 되었다.
가장 어려워했던 부분이었지만 이제는 코드를 보면 어떤 식으로 동작하게 되는지 보여서 뿌듯했다 ㅎㅎ
개인 프로젝트를 할 때도 혼자서 잘 사용할 수 있을 것 같다!!