[React] Axios API 모듈화

Axios API 모듈화 왜 궁금했을까❓

뉴스타 프로젝트를 개발할 때, 팀원들이 Axios를 모듈화 하지 않고 직접 Axios 코드를 필요할 때마다 작성하는 것을 보고 유지보수가 어려울 것이라 생각되었다. 그래서 재사용성을 증가하고 오타와 같은 개발자 실수를 줄이기 위해 Axios를 모듈화 하여 사용하기로 결정했다.

 

1. Axios API 모듈화 장점

• API를 모듈화하여 사용함으로써 코드의 중복을 줄이고 가독성을 향상시켜 유지보수의 이점이 있다.
• Access Token을 헤더에 지속적으로 넣어줘야 하는 번거로움을 줄일 수 있다.
• Intercepter를 활용하여 인증 처리를 손쉽게 할 수 있다.

 

2. Axios 모듈 생성

const axiosInstance = axios.create({
    baseURL: BASE_URL,
});

export { axiosInstance };

• axios.create() 함수의 baseURL 옵션에 Rest API 서버의 주소를 지정하여 객체를 생성하고 export 했다.
• 이를 통해, 일관성 있는 옵션을 가진 인스턴스를 활용하여 유지 보수에 이점을 가져갈 수 있다.

import { api, axiosInstance } from "./api"

// 뉴스 데이터 조회
function getNews(success, fail) {
  return axiosInstance.get(api.news)
    .then(success)
    .catch(fail)
}

• 위 코드에서 보면 axiosInstance를 가져와 get 요청을 하는데 baseURL을 지정해놨기 때문에 Rest API 서버로 요청을 보낼 것이다.

 

3. Axios Intercepter

Axios 라이브러리에서 제공하는 기능으로 HTTP 요청 또는 응답을 가로채고 수정할 수 있다.

Request Intercepter

axiosInstance.interceptors.request.use(
    (config) => {
        const accessToken = localStorage.getItem('X-USER-ID');
        config.headers['X-User-Id'] = accessToken;
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

• Rest API 서버에 요청할 때마다 localStorage에 있는 인증 정보를 가져오고 헤더에 값을 부여하도록 설정할 수 있다.

Response Intercepter

axiosInstance.interceptors.response.use((response) => response, (error) => {
    switch (error.response.status) {
        case 401: {
            localStorage.removeItem('X-USER-ID');
            navigate('/');
            break;
        }
        default:
            break;
        }
        return Promise.reject(error);
});

• Rest API 서버로부터 401 에러 코드를 수신한다면 인증 정보를 삭제하고 메인 홈으로 돌아가서 로그인을 다시 하도록 설정했다.
• 이 외에도 RefreshToken을 활용한 AccessToken 재발급과 같은 작업도 수행할 수 있을 것이다.