Axios와 Axios instance

들어가기 전

Axios는 웹 개발을 공부하고 프로젝트를 경험해본 사람이라면 많이 경험해봤을 것이다. 특히 프론트엔드 개발에서 API 호출을 매우 많이 사용하게 된다. 오늘은 이 Axios에 대해서 알아보고 더불어 Axios instance에 대해서 알아보려고 한다.

 

Axios 란?

Axios는 브라우저와 Node.js 에서 작동하는 Promise 기반의 HTTP 클라이언트 라이브러리다.

import axios from 'axios';

axios.get('https://jaka.com/api/user')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));
  
// 가독성을 위해 들여쓰기

 

- axios는 HTTP 메서드 GET, POST, PUT, DELETE 등을 바로 호출이 가능하다.

- then / catch 또는 async / await 으로 처리 (Promise 기반)

 

Axios는 이처럼 비동기 통신을 위한 도구이다.

 

위에 API 호출을 보자. 기본 url을 쓰면 계속적으로 번거로우며 코드도 더러워진다. 그래서 API에 기본 URL을 .ENV 파일에 변수로 관리하여 사용한다. 그럴때 마다 axios에 변수를 넣어서 사용해야하는가? 그렇지 않다. Axios instance를 이용하면 더 간단하게 axios를 호출할 수 있다. Axios와 Axios instance를 같이 포스팅 하는 이유는 거의 필수로 쓰기 때문이다. 지금부터 Axios Instance가 뭔지 알아보자.

 

Axios Instance 란?

axios.create()를 사용해 생성한 커스터마이징된 Axios 객체를 의미한다.

 

주요 목적

- 공통 설정을 한 번에 적용할 수 있다. (Base URL, 헤더, 인터셉터 등)

(필자는 프로젝트에서 Base URL과 withCredentials를 설정하여 axios instance를 사용하였다.)

- 여러 개의 API 서버를 사용할 때. 서버별 인스턴스 분리 가능.

 

예시

// api/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.jaka.com',
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true,
});

export default axiosInstance;

 

instance가 필요한 경우

- API 서버가 많거나 baseURL이 반복될 때

- 모든 요청에 인증 토큰을 붙여야 할 때

- 글로벌 에러 핸들링을 할 때

- 헤더, timeout 등 공통 설정이 많은 경우

 

Axios와 Axios Instance 비교

항목	axios	axios instance
공통 설정	요청마다 반복 설정 필요	기본값으로 한 번만 설정 가능
확장성	낮음	높음 (interceptor, baseURL 등 분리 가능)
코드 재사용	어렵다	높음
사용 용도	빠른 테스트, 간단한 호출	규모 있는 프로젝트, 팀 협업 (거의 필수)