지도 API는 웹사이트나 앱에서 지도를 표시하고 위치 정보를 활용하기 위해 사용됩니다. Axios는 JavaScript에서 HTTP 요청을 보내는 데 사용되는 간편한 라이브러리입니다. 이번 포스트에서는 Axios를 사용하여 지도 API를 호출하는 방법을 알아보겠습니다.

설치 및 세팅

먼저 Axios를 설치해야 합니다. 명령 프롬프트나 터미널에서 다음 명령을 실행하여 Axios를 설치합니다.

npm install axios

그리고 Axios를 import하고 API 키 등 필요한 세팅을 해줍니다.

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';

API 호출

Axios를 사용하여 지도 API를 호출하는 방법은 간단합니다. 예를 들어 Google Maps API를 호출하는 방법은 다음과 같습니다.

axios.get(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=37.5665,126.9780&radius=1000&key=${apiKey}`)
  .then(response => {
    // API 호출에 성공한 경우 데이터를 처리합니다.
    console.log(response.data);
  })
  .catch(error => {
    // API 호출에 실패한 경우 에러를 처리합니다.
    console.error(error);
  });

위의 예제에서는 axios.get() 함수를 사용하여 GET 요청을 보냅니다. URL에는 API 엔드포인트와 요청에 필요한 매개변수들이 들어갑니다. 이후 .then() 메서드를 사용하여 성공적인 응답을 처리하고, .catch() 메서드를 사용하여 실패한 경우 에러를 처리합니다.

결과 활용

API 호출의 결과는 .then() 메서드에서 받아온 response 객체에 담겨 있습니다. 이는 특정 API에 따라 다를 수 있으므로 API 문서를 참조해야 합니다. 결과는 JSON 형태로 제공되기 때문에 필요에 따라 데이터를 추출하고 활용할 수 있습니다.

위의 예제에서는 호출한 결과를 콘솔에 출력한 것이지만, 실제로는 웹사이트나 앱에서 해당 데이터를 활용하여 지도를 표시하거나 다른 작업을 수행할 수 있습니다.

마무리

이번 포스트에서는 Axios를 사용하여 지도 API를 호출하는 방법에 대해 알아보았습니다. Axios는 간단하고 유연한 라이브러리이므로 다양한 API 호출에 활용할 수 있습니다. Axios의 사용법을 숙지하고 지도 API를 활용하여 웹사이트나 앱을 개발해 보세요!