API (Application Programming Interface)는 웹 개발에서 중요한 요소입니다. 데이터를 다른 애플리케이션과 공유하거나 외부 서비스에서 데이터를 가져와야 할 때 사용됩니다. 이러한 상황에서 다른 서버에 HTTP 요청을 보내고 응답을 받는 것은 매우 중요합니다. Axios는 JavaScript에서 사용할 수 있는 강력한 HTTP 클라이언트 라이브러리입니다. 이 블로그 포스트에서는 Axios를 사용하여 API 데이터를 가져오는 방법을 알아보겠습니다.

Axios 설치하기

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

npm install axios

Yarn을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다:

yarn add axios

Axios를 사용하여 API 데이터 가져오기

Axios를 설치한 후에는 다음과 같이 간단하게 API 데이터를 가져올 수 있습니다:

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

위의 코드에서는 axios.get() 메소드를 사용하여 https://api.example.com/data에 GET 요청을 보냅니다. 응답은 then() 메소드를 통해 처리하고, 에러가 발생할 경우 catch() 메소드를 통해 처리합니다.

추가적인 옵션 사용하기

Axios는 다양한 옵션을 제공하여 더욱 다양한 요청을 보낼 수 있습니다. 예를 들어, 헤더를 추가하거나 요청을 보낼 때 데이터를 전달할 수 있습니다. 다음은 몇 가지 예시입니다:

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer ACCESS_TOKEN'
  },
  params: {
    'page': 1,
    'limit': 10
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

위의 코드에서는 headers 옵션을 사용하여 Bearer 토큰을 인증에 추가했습니다. 또한, params 옵션을 사용하여 페이지와 제한 값을 전달하고 있습니다.

마무리

이번 블로그 포스트에서는 Axios를 사용하여 API 데이터를 가져오는 방법을 알아보았습니다. Axios는 간편하게 사용할 수 있는 HTTP 클라이언트 라이브러리이며 다양한 옵션을 제공합니다. Axios를 사용하여 다른 서버에 HTTP 요청을 보내고 응답을 처리하는 것은 웹 개발에서 매우 유용합니다!

더 많은 정보를 원한다면 Axios 공식 문서를 확인해보세요.

#axios #api