Axios 라이브러리를 이용한 API 호출

// api/sample.js
import axios from 'axios'

export async function sample() {
  try {
    const response = await axios.get('http://localhost:8080/api/v1/sample/1',{
	      headers: {
		    'Content-Type': 'application/json',
			 Authorization: `Bearer ${accessToken}`,
				  },
    });
    return response.data;
  } catch (error) {
    console.error('sample error : ', error);
  }
}

Axios 라이브러리 사용 예제 입니다.

axios.get 메서드를 사용해 HTTP GET 요청을 보냅니다.
post 요청을 하고싶으면 axios.post 메서드를 사용하면 되고 delete 요청을 하고싶으면 axios.delete 메서드를 사용하시면 됩니다.

그리고 메서드 안에 엔드포인트를 작성해 줍니다.
지금은 백엔드에서 만들어준 API의 예시 엔드포인트를 작성해서 넣어주었습니다.
헤더는 필요하면 넣고 필요없으면 빼주셔도 상관 없습니다.

그리고 마지막으로 요청이 성공을 하면 response값인 response.data값을 반환해 API 호출의 결과를 받아옵니다.
만약 요청에 오류가 있다면 catch문이 실행돼서 console창에 에러 메세지가 출력이 되겠죠?

결론적으로 이 sample() 함수는 Axios 라이브러리를 이용해 특정 API에 대한 GET 요청을 보내고 그 결과를 받아오는 기능을 가진 함수입니다.

문제점

사실 이렇게 코드를 작성하면 문제가 생깁니다.
오류가 나는건 아니지만 중복되는 코드를 작성하게 됩니다.
위의 예시에서는 API 호출 함수를 하나밖에 만들지 않았지만 만약 저런식으로 API 함수를 여러개 만든다면 중복되는 코드가 무조건 생깁니다.

예를들면 위의 예시에서 엔드포인트 중 'http://localhost:8080/api/v1' 가 API 호출 함수를 만들때마다 사용을 하겠죠? 헤더 또한 항상 중복이 될겁니다.

그럼 계속 중복되는 코드를 작성하게 되니 코드 가독성도 떨어집니다. 효율적인 코드를 짜지 않은 거죠.

그래서 이때 create 메서드를 사용해서 커스텀 axios 함수를 만듭니다!

커스텀 Axios 만들기

우선 글을 읽고 있는 여러분께 질문하겠습니다. 우리가 변수를 사용하려는 이유가 뭔가요?

console.log('진우의 Velog');
console.log('진우의 메일');
console.log('진우의 Github');

const name = '진우';
console.log(name, '의 Velog');
console.log(name, '의 메일');
console.log(name, '의 Github');

이 코드를 실행하면 어떻게 나올까요? 두 코드 모두

진우의 Velog
진우의 메일
진우의 Github

라고 같은값이 출력이 될겁니다. 두 코드의 차이는 뭘까요?
name의 변수로 '진우'라는 값을 재사용을 하냐 안하냐의 차이가 있습니다.
변수를 사용해서 어떤 장점이 있을까요?

결과적으로 코드의 가독성이 올라가죠! 또한 코드의 중복을 피할 수 있고 '진우'라는 값을 수정할 때 일일히 하나하나 사용된 모든 값을 바꿀 필요 없이 name 변수의 값만 바꾸면 되는 편리함이 있습니다.

이제 본격적으로 커스텀 Axios 사용방법에 대해 알려드리겠습니다.

커스텀 Axios는 API 호출을 할 때 중복되는 부분을 변수처럼 미리 지정해 함수화 하여 재사용 하는 함수입니다.

우선 커스텀 Axios 함수를 담을 파일을 하나 만들어 줍니다. 저는 axios.config.js라고 만들어 줬는데 이름은 아무렇게나 만들어도 상관없습니다.

//src/api/axios.config.js

import axios from 'axios';

// const BASE_URL = 'https://sample.com'; // 배포용
const BaseUrl = 'http://localhost:8080/api/v1'; // 개발용

export const api = axios.create({
  baseURL: BaseUrl;, // 기본 URL 설정
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${accessToken}`,
  },
});

우선 BaseUrl 변수에 중복되는 엔드포인트를 작성해 줍니다.
아까 예시에서는 중복되는 엔드포인트가 'http://localhost:8080/api/v1' 였죠?

Base URL은 중복되는 엔드포인트를 변수처럼 사용해서 재활용을 하기 위한 속성입니다.
만약 Base URL을 사용하지 않고 배포를 한다면 모든 API 호출 함수의 엔드포인트를 바꿔줘야하는 대참사가...생길 수 있습니다.
지금 예시는 개발용 URL로 되어있으니 만약 배포를 하게 되면 BASE_URL을 바꿔주면 모든 API 호출이 배포용 API로 호출하게 됩니다.

그리고 본격적으로 커스텀 Axios 함수를 만들어줍니다! 저는 이름을 그냥 단순하게 api라고 했습니다.
axios.create 메서드를 이용해 새로운 axios 인스턴스를 생성합니다.
생성 후 baseURL옵션에 아까 정의해 주었던 BaseUrl 변수를 넣어줍니다.
그리고 헤더도 중복해서 사용한다면 안에 헤더도 정의해 줄 수 있습니다.
Content-Type도 정의해 줄 수 있고 만약 토큰이 필요한 로그인 로직을 구현한다면 Authrization에 토큰값을 넣어줄 수도 있겠죠?

이 외에 중복되는 부분을 추가하고싶으면 GPT 돌려서 추가해 달라해서 추가하시면 됩니다.

결론적으로 커스텀 Axios는 변수를 선언해서 사용하는것과 비슷합니다! 중복되는 부분을 재활용 하기 좋고 중복되는 부분을 수정할 때 일일히 수정할 필요가 없죠. 또한 가독성을 높이는데 장점이 있습니다!

커스텀 Axios 함수를 이용한 예제

//src/api/sample.ts

import { api } from './axios.config.ts';

export async function sample() {
  try {
    const response = await api.get('/sample/1');
    return response.data;
  } catch (error) {
    console.error('sample error : ', error);
  }
}

아까 일반적인 Axios 사용 예제 코드를 커스텀 Axios 함수를 사용해 작성한 예제입니다.
아까 위의 예제와 방식과 결과는 완전히 똑같습니다.

똑같이 비동기 함수인 sample 함수를 만들어 주고 get요청을 해 줍니다.
위에서 커스텀 Axios를 사용하지 않은것과 다르게 axios.get 메서드를 사용하는게 아니라 api.get 메서드를 사용해 줍니다.
당연히 api 함수를 사용하기 위해선 아까 만든 커스텀 Axios 함수를 선언해주어야겠죠?

그리고 엔드포인트에는 중복되지 않는 부분 즉 Base URL 뒤에 부분들만 작성해 주면 됩니다.
그리고 헤더 또한 작성할 필요가 없습니다.

끝입니다. 별거 없죠? 아까 예시와 똑같이 요청값을 반환해 줄겁니다.

이렇게 커스텀 Axios 함수를 사용해서 중복되는 부분들을 재활용해서 사용할 수 있습니다!

번외

API 함수들은 api 폴더를 따로 만들어서 따로 만들어두는것이 좋습니다.
왜냐하면 같은 API를 재사용 하는 경우가 적지 않게 있고 가독성이 좋거든요!

진우

Frontend 개발이 재밌어요 ><

다음 포스트

Axios 라이브러리를 이용한 API 호출

Tech Tools

읽기 전에