API 통합을 위한 Axios 라이브러리 활용하기 💻

웹 개발에서 API와의 소통은 웹사이트나 애플리케이션에 다양한 기능과 정보를 추가하는 데 필수적입니다. 오늘은 API 통합을 위해 자바스크립트에서 널리 사용되는 Axios 라이브러리를 어떻게 활용할 수 있는지 살펴보겠습니다. Axios는 HTTP 요청을 쉽게 만들어주는 라이브러리로, API와의 통신을 간단하게 해줍니다.

Axios 시작하기

먼저, Axios를 사용하기 위해서는 프로젝트에 설치해야 합니다. npm을 사용하는 경우, 다음 명령어로 설치할 수 있습니다:

npm install axios

설치가 완료되면, Axios를 프로젝트 파일에 불러와 사용할 수 있습니다.

간단한 GET 요청 보내기

API로부터 데이터를 받아오기 위한 가장 기본적인 방법은 GET 요청을 보내는 것입니다. Axios를 사용하여 간단한 GET 요청을 보내보겠습니다:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('API 요청 중 문제가 발생했습니다:', error);
  });

이 코드는 https://api.example.com/data URL로 GET 요청을 보내고, 응답으로 받은 데이터를 콘솔에 출력합니다. 만약 요청 중에 오류가 발생하면, 오류 메시지를 콘솔에 출력합니다.

POST 요청으로 데이터 보내기

데이터를 API로 보내기 위해서는 POST 요청을 사용할 수 있습니다. Axios를 활용한 POST 요청 예시는 다음과 같습니다:

axios.post('https://api.example.com/data', {
  firstName: 'Jane',
  lastName: 'Doe'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('데이터 전송 중 오류가 발생했습니다:', error);
});

이 코드는 firstName과 lastName 필드를 포함한 객체를 https://api.example.com/data URL로 POST 요청을 통해 보냅니다. 요청이 성공하면, 응답 데이터를 콘솔에 출력합니다.

요청 설정하기

Axios를 사용하면 요청 헤더 설정, 타임아웃 설정 등 요청을 세부적으로 설정할 수 있습니다. 예를 들어, 특정 헤더를 포함한 GET 요청을 보내려면 다음과 같이 할 수 있습니다:

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('요청 중 오류가 발생했습니다:', error);
});

이 코드는 Authorization 헤더를 포함하여 GET 요청을 보냅니다. 이렇게 요청에 다양한 설정을 추가할 수 있습니다.

Axios 라이브러리를 활용하면 API 통합을 위한 HTTP 요청을 쉽고 효율적으로 처리할 수 있습니다. 간단한 설정과 코드 몇 줄로 데이터를 주고받을 수 있어, 웹 개발 프로젝트에 매우 유용합니다.