안녕하세요! 오늘은 React에서 axios 모듈화 하기라는 주제로 글을 작성 해보도록 하겠습니다. axios는 흔히 자바스크립트에서 서버 통신 작업을 진행할 때 널리 쓰이고 있는 라이브러리 인데요, 이 라이브러리를 좀 더 효율적으로 쓰는법을 알아보겠습니다.
일반적으로, 글 작성하기라는 api를 사용할 때, 일반적인 axios 활용 코드는 아래와 같습니다.
import axios from 'axios';
import cookies from 'js-cookie';
const SERVER = 'http://localhost:8080/api/v1';
const requestPost = async (postDto) => {
const res = await axios.get(`${SERVER}/write-post`, postDto, {
headers: {
access_token: cookies.get('access_token'),
},
});
}
만약 기능을 위처럼 구현한다고 가정하면, 일일히 headers에 토큰을 넣는 코드를 작성하고, 기본 서버 URL을 계속해서 작성하는 코드를 넣게 됩니다.
그런데 이 작업들을 일일히 하지 않고, 자동으로 값이 삽입이 된다면 어떨까요?
그래서 저희는 이 axios를 커스텀하여 사용해보도록 하겠습니다.
가장 먼저 파일을 생성해보도록 하겠습니다. 저는 src/lib 경로에 customAxios.ts라는 파일을 생성하겠습니다. 이 파일에는 axios 인스턴스를 생성해주도록 할거에요.
참고 문서: https://xn--xy1bk56a.run/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD
customAxios 파일에 아래의 코드를 추가하도록 하겠습니다.
import axios, { AxiosInstance } from 'axios';
import cookies from 'js-cookie';
export const customAxios: AxiosInstance = axios.create({
baseURL: `${SERVER_ADDRESS}`, // 기본 서버 주소 입력
headers: {
access_token: cookies.get('access_token'),
},
});
위의 axios.create 함수 안에 매개변수로 넘겨진 baseURL과 headers 객체는 무엇을 의미하는 걸까요?
baseURL은 서버의 기본 URL을 의미하며, headers에는 자신이 매번 전달해야하는 객체 (예: 사용자 토큰)를 넣어주시면 자동으로 삽입이 됩니다.
해당 customAxios를 export를 하였으니, 이제 직접 사용해보도록 하겠습니다.
1번 주제에서 구현하였던 글 작성하기 API 활용 기능을 customAxios를 사용하여 구현해보도록 하겠습니다. 코드는 아래와 같습니다.
import { customAxios } from 'lib/customAxios';
const requestPost = async (postDto) => {
const res = await customAxios.post('/write-post', postDto);
}
위의 일반적인 axios 코드와 비교하여 어떤 느낌이 드시나요? URL 경로에는 baseURL의 뒷부분만 삽입을 해도 되며, headers에는 일일히 토큰을 넣어주지 않아도 됩니다.
저는 위의 두가지 장점이 axios를 커스텀하여 사용하는데 가장 큰 이유가 되었던 것 같습니다.
마지막으로, axios 인터셉터를 활용하는법에 대해서 알아보도록 하겠습니다. 인터셉터
는 가로채다 라는 뜻을 지니고 있는데요, 말 그대로 요청을 날리기 전에 request를 가로채는 역할을 수행합니다.
해당 예제를 리프레쉬 토큰 처리를 바탕으로 설명 하겠습니다.
리프레쉬 토큰을 처리하는 함수 코드를 작성하겠습니다.
import axios, { AxiosRequestConfig } from 'axios';
import cookies from 'js-cookie';
import * as jwt from 'jsonwebtoken';
export const checkToken = async (config: AxiosRequestConfig) => {
let accessToken = cookies.get('access_token');
const decode = jwt.decode(accessToken);
const nowDate = new Date().getTime() / 1000;
// 토큰 만료시간이 지났다면
if (decode.exp < nowDate) {
const { data } = await axios.post(`${SERVER_URL}/token`, { accessToken }, {
headers: {
access_token: getToken(),
},
});
// 리프레쉬 토큰 발급 서버 요청
const { refreshToken } = data.data;
accessToken = refreshToken;
}
config.headers['access_token'] = accessToken;
return config;
}
함수를 다 적고나서, customAxios.ts 파일에 한줄을 더 추가해주세요. 코드는 아래와 같습니다.
customAxios.interceptors.request.use(checkToken);
해당 코드를 추가하고나면, axios로 request 요청을 보낼때마다 헤더의 토큰을 검증하여 만료 여부를 확인한 뒤, 리프레쉬 토큰 처리를 자동으로 해줍니다.
오늘은 axios를 커스텀하여 사용하는법에 대해서 알아보았습니다. 다음에도 유익한 주제로 찾아뵙도록 하겠습니다. 긴 글 읽어주셔서 감사합니다. 😀
Code quality가 높아질뿐더러, 편해서 좋네요