axios 모듈화를 해보자!

이번에는 axios 모듈화에 대해서 알아볼 것이다.

 

axios는 서버와 통신하기 위해서 사용하는 HTTP 비동기 통신 라이브러리이다.

fetch api와는 달리 추가적으로 설치 후 사용할 수 있는 라이브러리이기 때문에 별도로 설치해주었다.

 

기본으로 axios를 사용해서 서버로부터 데이터를 받아오는 코드는 다음과 같다.

const apiUrl = 'https://fullcare.store/api/auth/project?state=ongoing';


const response = await axios.get(apiUrl, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  },
})

 

그런데, 이 코드는 특정 데이터를 불러오기 위한 코드이기 때문에, 다른 페이지/컴포넌트에서 서버로부터 데이터를 받아오기 위해서는 추가적으로 헤더에 Authorization, Content-Type과 같은 설정을 해주어야 한다.

그리고 헤더도 헤더지만, apiUrl 또한 개별적으로 계속 설정해주는 것이 좋은 코드는 아닌 거 같다.

 

그래서, 우리 프로젝트에서 필요한 baseURL과 header 값을 담아서 axios 모듈화를 했다.

customAxios.js 파일에 작성을 해두었고, 코드는 다음과 같다.

import axios from "axios";

const accessToken = localStorage.getItem("access_token");

export const customAxios = axios.create({
  baseURL: "https://fullcare.store/api",
  headers: {
    "Content-Type": "application/json",
  },
});

customAxios.defaults.headers.common["Authorization"] = accessToken
  ? `Bearer ${accessToken}`
  : null;

 

위 코드를 보면 customAxios라는 axios 인스턴스를 만들기 위해서 axios.create라는 코드를 작성해주었다.

이렇게 axios를 모듈화하기 위해서 axios.create를 사용해주어야 하고, 추가적으로 공통으로 필요한 설정(baseURL, header 설정 등)을 입력해주면 된다.

 

baseURL의 경우, 계속해서 공통적인 url을 입력하지 않기 위해서 공통으로 설정할 수 있는 url을 baseURL로 설정해주었고, headers의 경우, 서버에 공통적으로 비동기 요청을 할 때 필요한 헤더 설정을 해준 것이다.

 

주목할 점은 아래 코드이다.

customAxios.defaults.headers.common["Authorization"] = accessToken
  ? `Bearer ${accessToken}`
  : null;

이 코드는 헤더에 Authorization 필드에 토큰 값을 담아서 보내는 코드이다.

accessToken이 존재하면 Bear + accessToken 값을 담은 문자열을 보내주고, 그렇지 않다면 null 값을 보내주도록 설정하였다.

 

이제 이렇게 axios 모듈화를 해주면 다음과 같이 편리하게 서버에 데이터를 요청할 수 있다.

const response = await customAxios.get(
  `/auth/project?state=ongoing`
);

헤더 설정, baseURL은 이미 설정해줬으니, baseURL 뒤에 서버에 요청을 하기 위해서 필요한 url을 적어주면, 추가적으로 설정을 하지 않게 돼서 편하게 코드를 작성할 수 있다.