Axios

1. Axios 란?

Axios는 Node.js와 브라우저 환경 모두에서 사용 가능한 Promise 기반 HTTP 클라이언트 라이브러리이다.

외부 API와 통신하는 것은 웹 개발의 핵심 부분으로, 백엔드 서버가 다른 서비스와 데이터를 주고받기 위해 HTTP 클라이언트 라이브러리가 필요하다.

Axios는 현대적인 JavaScript 개발 환경에 가장 적합한 HTTP 클라이언트로 많이 사용되고 있다.

 

1.1. API 라이브러리

Node.js에서 API 통신을 위해 주로 사용되는 라이브러리는 두 가지이다.

 

1) request 모듈: 오랫동안 가장 인기 있는 HTTP 클라이언트 라이브러리였지만, 현재는 deprecated 상태이다.

2) axios: 현대적인 Promise 기반 HTTP 클라이언트로, 현재 가장 많이 사용되고 있다.

 

1.2. Request 모듈의 한계

• 비동기 작업을 위해 콜백 패턴을 사용해야 함
• Promise를 기본적으로 지원하지 않음
• async/await 문법과 함께 사용하기 어려움

이러한 한계로 인해 현대 JavaScript 개발 환경에서는 Axios와 같은 대안이 선호되고 있다.

 

1.3. Axios의 주요 장점

• Promise 기반으로 설계되어 비동기 처리가 간편함
• async/await 문법과 함께 사용 가능
• 요청과 응답에 대한 인터셉터 제공
• 자동 JSON 데이터 변환
• 요청 취소 기능
• 타임아웃 설정 기능
• 크로스 사이트 요청 위조(CSRF) 보호

 

 

2. Axios 사용법

2.1. 기본 요청 방식

Axios를 사용하는 방법은 크게 세 가지가 있다.

 

1) URL만 넣어 요청 전송

const axios = require('axios');

// GET 요청 예시
axios('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

 

2) Config 객체로 요청 전송

const axios = require('axios');

// 옵션 객체를 사용한 요청
axios({
  method: 'post',
  url: 'https://api.example.com/users',
  data: {
    name: '홍길동',
    email: 'hong@example.com'
  },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

 

3) HTTP 메서드 별칭 사용

// GET 요청
axios.get('https://api.example.com/users')
  .then(response => console.log(response.data));

// POST 요청
axios.post('https://api.example.com/users', {
  name: '홍길동',
  email: 'hong@example.com'
})
  .then(response => console.log(response.data));

// 그 외 지원하는 메서드들
axios.put(url, data, [config]);
axios.delete(url, [config]);
axios.head(url, [config]);
axios.options(url, [config]);
axios.patch(url, data, [config]);

 

2.2. 응답 객체 구조

Axios로 받은 응답은 다음과 같은 구조를 가진 객체이다.

{
  // 서버에서 제공한 데이터
  data: {},

  // HTTP 상태 코드
  status: 200,

  // HTTP 상태 메시지
  statusText: 'OK',

  // 응답 헤더
  headers: {},

  // Axios 요청 설정
  config: {},

  // 요청 객체
  request: {}
}

 

그러므로 Axios 응답에서 실제 서버 데이터에 접근하려면 반드시 .data 속성을 사용해야 한다.

 

 

3. 실용적인 활용 패턴

3.1. 요청 취소하기

Axios는 요청을 취소할 수 있는 기능을 제공한다.

 

ex)

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/long-operation', {
  cancelToken: source.token
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('요청이 취소되었습니다:', error.message);
    } else {
      console.error('에러 발생:', error);
    }
  });

// 요청 취소
source.cancel('사용자가 요청을 취소했습니다.');

 

이 기능은 사용자가 페이지를 벗어나거나 검색 결과가 더 이상 필요 없을 때 유용하다.

 

3.2. 동시에 여러 요청 보내기

여러 API 요청을 동시에 처리해야 할 때는 axios.all()과 axios.spread()를 사용할 수 있다.

 

ex)

const userRequest = axios.get('/api/users');
const postsRequest = axios.get('/api/posts');

axios.all([userRequest, postsRequest])
  .then(axios.spread((userResponse, postsResponse) => {
    const users = userResponse.data;
    const posts = postsResponse.data;

    console.log('사용자:', users);
    console.log('포스트:', posts);
  }))
  .catch(error => console.error('에러 발생:', error));

 

여러 데이터 소스에서 정보를 가져와야 하는 대시보드나 페이지 초기화에 유용하다.

 

3.3. 타임아웃 설정

네트워크 문제로 요청이 무한정 대기하는 것을 방지하기 위해 타임아웃을 설정할 수 있다.

 

ex)

axios.get('/api/data', {
  timeout: 5000 // 5초
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('요청 시간 초과');
    } else {
      console.error('에러 발생:', error);
    }
  });

 

타임아웃은 사용자 경험을 향상시키고 리소스를 효율적으로 관리하는 데 도움이 된다.

 

4. Axios vs 다른 대안 비교

4.1. Axios vs Fetch API

Fetch API는 브라우저에 내장된 모던 API로, 별도의 라이브러리 없이 HTTP 요청을 보낼 수 있다.

 

Axios의 장점:

• 브라우저 호환성이 더 좋음 (구형 브라우저 지원)
• 자동 JSON 변환
• 요청 취소 및 타임아웃 기본 지원
• 인터셉터 기능
• 응답 시간 초과 자동 감지

Fetch의 장점:

• 별도 라이브러리 불필요 (번들 크기 감소)
• 표준 웹 API
• Service Worker와 함께 사용 가능

 

4.2. Axios vs got/request

서버 사이드 Node.js 환경에서는 Axios 외에도 got이나 (deprecated된) request 같은 대안이 있다.

 

Axios의 장점:

• 브라우저와 Node.js 모두 지원
• Promise 기반 설계
• 풍부한 기능(인터셉터, 자동 변환 등)

got의 장점:

• 더 가벼운 번들 크기
• 스트림 API 지원
• 캐싱 지원