Axios: 강력하고 쉬운 HTTP 클라이언트 사용 가이드

웹 애플리케이션을 개발하면서 서버와 통신하는 작업은 필수적입니다. 이 과정에서 HTTP 요청을 손쉽게 처리하기 위한 도구가 필요한데, 자바스크립트 생태계에서 널리 사용되는 HTTP 클라이언트 라이브러리 중 하나가 바로 Axios입니다. 이 글에서는 Axios를 사용하여 HTTP 요청을 처리하는 방법, baseURL 설정, 다양한 설정 방법 등을 코드 예제와 함께 살펴보겠습니다.

Axios란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. REST API 호출, 데이터를 주고받기, 에러 처리 등을 간편하게 할 수 있도록 돕는 기능들이 제공됩니다. 그럼 설치 방법부터 살펴볼까요?

Axios 설치하기

Axios를 설치하려면 npm 또는 yarn을 사용하여 간단히 설치할 수 있습니다:

npm install axios

또는

yarn add axios

설치 후에는 Axios를 import하여 사용할 수 있습니다:

import axios from 'axios';

기본 사용법

가장 기본적인 HTTP 요청 예제를 살펴보겠습니다. GET 요청을 보내고 서버에서 응답을 받는 코드입니다.

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

위 예제에서는 특정 URL에 대한 GET 요청을 보내고, 응답을 받아서 response.data를 출력하고 있습니다. catch 블록에서는 요청 중 발생한 에러를 처리합니다.

Base URL 설정하기

여러 개의 API 엔드포인트를 다루다 보면 매번 API의 전체 URL을 작성하는 것이 번거로울 수 있습니다. 이때 baseURL을 설정하면 매번 반복적으로 URL을 작성하지 않아도 됩니다.

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

// 이제 baseURL을 사용하여 간단하게 요청할 수 있습니다.
apiClient.get('/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

axios.create() 메서드를 사용하여 기본 설정이 포함된 Axios 인스턴스를 생성할 수 있습니다. 이렇게 설정된 apiClient를 사용하면 /posts/1과 같은 엔드포인트만 지정해도 baseURL과 결합되어 요청이 이루어집니다.

Axios 설정 옵션들

Axios는 다양한 설정 옵션을 통해 요청을 커스터마이징할 수 있습니다. 가장 자주 사용하는 옵션들을 코드로 살펴보겠습니다.

1. 헤더 설정하기

HTTP 요청 시 헤더(Header)를 설정해야 하는 경우가 많습니다. 예를 들어, 인증 토큰을 추가할 때는 다음과 같이 설정합니다:

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json',
  },
});

이렇게 하면 생성된 apiClient 인스턴스의 모든 요청에 공통적으로 헤더가 추가됩니다.

2. 타임아웃 설정하기

요청이 일정 시간 이상 걸릴 경우, 타임아웃을 설정하여 요청을 취소할 수 있습니다. 타임아웃 시간은 밀리초(ms) 단위로 지정합니다:

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000, // 5초 후 타임아웃 발생
});

이렇게 설정하면 요청이 5초 이상 걸릴 경우 자동으로 요청이 취소되고 에러가 발생합니다.

3. 요청/응답 인터셉터 사용하기

**인터셉터(Interceptor)**는 요청이나 응답을 가로채어 중간에 원하는 처리를 할 수 있게 해줍니다. 예를 들어, 요청을 보내기 전 인증 토큰을 추가하거나, 응답에서 특정 데이터를 가공하는 작업을 할 수 있습니다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  console.log('Request sent at:', new Date());
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  console.log('Response received:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

이 인터셉터를 사용하면 모든 요청이 가로채져서 특정 로직을 추가할 수 있게 됩니다. 예를 들어 로딩 상태를 관리하거나, 에러 로그를 기록하는 데 유용합니다.

HTTP 메서드 사용하기

Axios는 다양한 HTTP 메서드를 지원합니다. 아래는 대표적인 메서드와 사용 예제입니다:

1. GET 요청

axios.get('/posts', { params: { userId: 1 } })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

params 옵션을 사용하여 쿼리 파라미터를 쉽게 추가할 수 있습니다.

2. POST 요청

axios.post('/posts', {
  title: 'New Post',
  body: 'This is the body of the post',
  userId: 1
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

POST 요청을 사용할 때는 데이터(payload)를 두 번째 인수로 전달합니다.

3. PUT 및 DELETE 요청

// PUT 요청 (수정)
axios.put('/posts/1', {
  title: 'Updated Post',
  body: 'This is the updated body',
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// DELETE 요청 (삭제)
axios.delete('/posts/1')
  .then(response => console.log('Deleted:', response.data))
  .catch(error => console.error(error));

결론

Axios는 사용하기 쉽고 강력한 HTTP 클라이언트로, 설정을 통해 유연하게 커스터마이징할 수 있는 점이 장점입니다. baseURL 설정, 타임아웃, 인터셉터 등 다양한 기능을 잘 활용하면 서버와의 통신을 더 간편하고 효율적으로 만들 수 있습니다.

이 포스트를 통해 Axios의 기본적인 사용법과 설정 방법을 이해하고, 직접 프로젝트에 적용해 보세요. 서버와 클라이언트 사이의 데이터를 더 쉽게 관리할 수 있을 것입니다.