정정지용
기술스택 목록
프론트엔드

Axios

프로젝트 4개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

브라우저와 Node.js 환경에서 HTTP 요청을 처리하는 Promise 기반 클라이언트 라이브러리

Axios는 브라우저와 Node.js에서 모두 사용할 수 있는 HTTP 클라이언트 라이브러리입니다. XMLHttpRequest나 fetch API를 직접 다루는 것보다 간결한 API를 제공하며, 요청/응답 변환, 에러 처리, 타임아웃 설정 등을 선언적으로 다룰 수 있습니다. 특히 인터셉터를 통해 요청 전후에 공통 로직을 주입할 수 있어, 인증 토큰 추가나 전역 에러 핸들링 같은 반복 작업을 효율적으로 처리할 수 있습니다.

이럴 때 사용합니다

  • REST API 호출 시 요청/응답 변환과 에러 핸들링을 일관되게 처리하고 싶을 때
  • 인증 토큰 주입이나 refresh 로직처럼 모든 API 호출에 공통 로직이 필요할 때
  • 브라우저와 서버 환경에서 동일한 HTTP 클라이언트 코드를 재사용하고 싶을 때
  • 요청 취소나 진행률 추적처럼 fetch API보다 풍부한 기능이 필요할 때

핵심 개념

instance
기본 URL, 헤더, 타임아웃 등의 설정을 미리 정의한 독립적인 Axios 클라이언트 객체입니다. 여러 API 엔드포인트를 다룰 때 각각의 instance를 만들어 관리할 수 있습니다.
interceptor
요청을 보내기 직전이나 응답을 받은 직후에 실행되는 함수로, 인증 토큰 주입, 에러 로깅, 응답 데이터 변환 등 공통 로직을 처리하는 데 사용됩니다.
config
요청마다 설정할 수 있는 옵션 객체로, URL, method, headers, params, data, timeout 등을 포함합니다. instance 생성 시 기본값을 지정하고 개별 요청에서 덮어쓸 수 있습니다.
response schema
Axios가 반환하는 응답 객체 구조로, data(실제 응답 본문), status(HTTP 상태 코드), headers, config 등의 정보를 담고 있습니다.
cancel token
진행 중인 요청을 취소할 수 있게 해주는 메커니즘으로, 사용자가 화면을 떠나거나 중복 요청을 방지할 때 사용됩니다.

기본 사용과 인터셉터 구성

API 인스턴스를 만들고 인터셉터로 인증 토큰 주입과 에러 처리를 자동화한 뒤, GET과 POST 요청을 보내는 기본 흐름입니다.

JavaScript
import axios from 'axios';

// 인스턴스 생성 및 기본 설정
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 요청 인터셉터: 모든 요청에 토큰 추가
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

// 응답 인터셉터: 에러 공통 처리
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // 인증 실패 시 로그아웃 처리
    }
    return Promise.reject(error);
  }
);

// API 호출
const data = await api.get('/users');
const newUser = await api.post('/users', { name: 'Alice' });

처음 쓸 때 흔한 함정

  • 응답 인터셉터에서 response.data만 반환하면 이후 코드에서 status나 headers를 참조할 수 없음
  • 인터셉터 안에서 같은 instance로 재요청하면 무한 루프에 빠질 수 있음
  • 전역 axios와 instance를 혼용하면 인터셉터가 예상과 다르게 적용될 수 있음

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Docker4React4React Hook Form4TypeScript4Vite4nginx3React Query3SCSS3Zustand3Firebase2MSW2React Router2