Axios: 개념, HTTP 요청 및 API 작업 기초

Axios란?

Axios는 브라우저와 Node.js 환경에서 HTTP 요청을 수행하기 위해 설계된 JavaScript 라이브러리입니다. 브라우저에서는 XMLHttpRequest, Node.js에서는 http 모듈 위에 구축되어 두 플랫폼 모두에 통합된 API를 제공합니다.

네이티브 fetch에 비해 Axios의 주요 장점은 자동 JSON 처리, 인터셉터 지원 및 더 편리한 오류 처리입니다. fetch와 달리 Axios는 JSON 응답 본문을 얻기 위해 두 번의 .then 호출이 필요하지 않으며 HTTP 오류(4xx, 5xx)에서 자동으로 예외를 throw합니다.

라이브러리는 GET, POST, PUT, DELETE, PATCH 및 HEAD와 같은 모든 주요 HTTP 메서드를 지원합니다. 간단한 프로젝트부터 하루 수십만 건의 요청을 처리하는 대규모 엔터프라이즈 애플리케이션까지 사용할 수 있습니다.

Axios의 주요 특성

• Promise API — 모든 작업이 Promise를 반환하여 비동기 코드를 단순화
• TypeScript 지원 — 모든 메서드 및 구성에 대한 완전한 타입 지정
• 인터셉터 — 요청 및 응답 처리를 위한 미들웨어
• 변환 — 입력 및 출력에서 자동 데이터 변환

Axios 아키텍처 및 작동 원리

Axios 아키텍처는 어댑터 개념을 기반으로 합니다. 라이브러리는 전송 계층을 추상화합니다. 브라우저에서는 XMLHttpRequest를, Node.js에서는 http 또는 https 모듈을 사용합니다. 이는 런타임 환경에 관계없이 단일 인터페이스를 제공합니다.

각 요청은 요청 구성 또는 응답을 수정할 수 있는 인터셉터 체인을 통과합니다. 인터셉터 이후 요청은 실제 HTTP 호출을 수행하는 어댑터로 전달됩니다. 그런 다음 응답은 애플리케이션 코드에 도달하기 전에 응답 인터셉터를 통과합니다.

Axios 요청 수명 주기

1. 구성 생성 — 메서드, URL, 헤더, 요청 본문
2. 요청 인터셉터 — 구성 수정, 토큰 추가
3. HTTP 호출 — 브라우저 또는 Node.js 어댑터를 통한 실행
4. 응답 인터셉터 — 응답 변환, 오류 처리
5. 결과 반환 — Promise가 데이터로 해결되거나 거부됨

Axios의 주요 기능

Axios는 모바일 및 웹 애플리케이션에서 HTTP 작업을 위한 편리한 선택이 되게 하는 많은 내장 기능을 포함합니다. 주요 기능을 살펴보겠습니다.

자동 데이터 변환

요청을 보낼 때 Axios는 JSON.stringify를 사용하여 JavaScript 객체를 JSON 문자열로 자동 변환합니다. 응답을 받을 때 라이브러리는 JSON을 다시 객체로 파싱합니다. 이는 개발자가 데이터를 수동으로 직렬화 및 역직렬화하는 수고를 덜어줍니다.

CSRF 보호

브라우저 환경에서 Axios는 자동으로 쿠키에서 XSRF-TOKEN 헤더를 추가하여 사이트 간 요청 위조로부터 애플리케이션을 보호합니다. 이를 위해 서버가 XSRF-TOKEN이라는 쿠키로 토큰을 보내도록 구성하기만 하면 됩니다.

타임아웃 및 요청 취소

라이브러리는 timeout 매개변수를 통한 타임아웃 설정과 AbortController를 통한 요청 취소를 지원합니다. 이는 연결이 불안정한 모바일 애플리케이션에서 중단된 요청이 배터리와 데이터를 소비하기 때문에 특히 중요합니다.

Axios 설치 및 구성

Axios 설치는 모든 패키지 관리자를 통해 수행됩니다. 라이브러리는 npm 레지스트리에서 사용할 수 있으며 Node.js 및 브라우저 프로젝트 모두에서 사용할 수 있습니다. TypeScript의 경우 타입이 메인 패키지에 포함되어 있습니다 — 추가 종속성이 필요하지 않습니다.

설치 후 기본 URL, 기본 타임아웃, 공통 헤더 등 기본 구성으로 인스턴스를 생성할 수 있습니다. 이를 통해 각 요청에서 동일한 매개변수를 반복하지 않고 HTTP 클라이언트 설정을 중앙에서 관리할 수 있습니다.

# npm으로 설치
npm install axios

# yarn으로 설치
yarn add axios

# pnpm으로 설치
pnpm add axios

구성으로 인스턴스 생성

각 API 서비스에 대해 별도의 Axios 인스턴스를 생성하는 것이 좋습니다. 이렇게 하면 각 호출에서 반복하지 않고 이 인스턴스의 모든 요청에 적용될 기본 URL, 표준 헤더 및 타임아웃을 설정할 수 있습니다.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axios 코드 예제

요청 예제는 Axios의 주요 사용 패턴을 보여줍니다. 모든 예제는 async/await 구문을 사용하여 .then() 체인에 비해 비동기 코드를 더 읽기 쉽게 만듭니다.

매개변수가 있는 GET 요청

서버에서 데이터를 검색하려면 axios.get 메서드를 사용합니다. 요청 매개변수는 params 객체를 통해 전달되며 자동으로 쿼리 문자열로 변환됩니다. 응답에는 data 필드에 데이터, status에 상태, headers에 헤더가 포함됩니다.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('사용자 로딩 오류', error);
    throw error;
  }
}

본문이 있는 POST 요청

서버에 데이터를 보내려면 axios.post를 사용합니다. 두 번째 인수는 데이터가 있는 객체이며 Axios가 자동으로 JSON으로 직렬화합니다. Content-Type은 기본적으로 application/json으로 설정됩니다.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

인터셉터

인터셉터는 각 요청 또는 응답에 대해 실행되는 미들웨어 함수입니다. 인증 토큰 추가, 요청 로깅 및 오류를 중앙에서 처리할 수 있습니다. 요청 인터셉터는 저장소에서 검색된 토큰으로 Authorization 헤더를 추가합니다.

// 요청 인터셉터 — 인증 토큰 추가
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 응답 인터셉터 — 401 오류 처리
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios 오류 처리

오류 처리는 Axios에서 예외 메커니즘을 기반으로 합니다. fetch와 달리 Axios는 HTTP 오류(4xx, 5xx)를 자동으로 포착하여 catch 블록으로 전달합니다. 오류 객체에는 서버 응답, 요청 및 실행 컨텍스트에 대한 정보가 포함됩니다.

세 가지 유형의 오류를 구분하는 것이 중요합니다: 서버 응답 오류(response), 요청 오류(request), 구성 오류(config). 첫 번째는 HTTP 호출이 성공적으로 실행되었지만 오류 코드를 반환할 때, 두 번째는 서버에서 응답이 없을 때, 세 번째는 요청 구성이 잘못되었을 때 발생합니다.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('응답 오류', error.response.status);
      } else if (error.request) {
        console.warn('서버 응답 없음');
      } else {
        console.warn('구성 오류');
      }
    }
  }
}

Axios와 Fetch API 비교

Axios와 네이티브 Fetch API의 비교는 각 기술이 언제 적합한지 이해하는 데 도움이 됩니다. Fetch는 설치가 필요 없는 브라우저 내장 API입니다. Axios는 추가 기능을 갖춘 타사 라이브러리입니다. 단순한 요청에는 fetch로 충분하지만, 인터셉터와 중앙 집중식 오류 처리가 필요한 복잡한 애플리케이션에는 Axios가 더 편리합니다.

Fetch는 HTTP 오류(4xx, 5xx)를 예외로 처리하지 않습니다 — response.ok를 확인해야 합니다. Fetch는 JSON을 얻기 위해 두 번의 .then() 호출이 필요합니다: response.json()이 데이터와 함께 Promise를 반환합니다. Axios는 이 작업을 자동으로 수행합니다. Fetch는 추가 폴리필 없이 파일 업로드 진행을 지원하지 않습니다. Axios에는 내장 onUploadProgress 및 onDownloadProgress가 있습니다.

Node.js에서 Fetch는 버전 18부터 실험적 기능으로 사용 가능하지만, Axios는 Node.js 10부터 안정적으로 작동합니다. 이전 Node.js 버전을 지원하는 프로젝트의 경우 선택은 명확히 Axios입니다. 복잡한 요청 처리가 필요 없는 최신 브라우저 프로젝트의 경우 fetch로 충분할 수 있습니다.