[javascript] Axios를 사용하여 날씨 API 호출하기

Axios는 브라우저와 Node.js에서 사용할 수 있는 HTTP 통신 라이브러리로, 간편한 API 호출을 도와줍니다. 이번에는 Axios를 사용하여 날씨 API를 호출하는 방법을 살펴보겠습니다.

1. Axios 설치하기

먼저, 프로젝트에 Axios를 설치해야 합니다. 아래의 명령어를 사용하여 npm으로 Axios를 설치하세요:

npm install axios

2. API 호출하기

Axios를 설치한 후에는 날씨 API를 호출할 수 있습니다. 아래는 OpenWeatherMap의 날씨 API를 사용하는 예시입니다:

const axios = require('axios');

axios.get('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=your_api_key')
  .then(response => {
    // API 호출이 성공한 경우
    console.log(response.data);
  })
  .catch(error => {
    // API 호출이 실패한 경우
    console.error(error);
  });

위의 코드는 axios.get()을 사용하여 API를 호출하고, 호출 성공 시 then 블록에서 응답 데이터를 처리합니다. 호출 실패 시 catch 블록에서 에러를 처리합니다.

3. API 응답 데이터 사용하기

API 응답 데이터는 JSON 형식으로 제공됩니다. 따라서 적절한 JSON 파싱을 통해 데이터를 사용할 수 있습니다. 예를 들어, 아래의 코드는 응답 데이터에서 날씨 상태와 온도를 가져와 출력하는 예시입니다:

axios.get('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=your_api_key')
  .then(response => {
    const data = response.data;
    const weather = data.weather[0].main;
    const temperature = data.main.temp;

    console.log(`현재 날씨: ${weather}, 온도: ${temperature}`);
  })
  .catch(error => {
    console.error(error);
  });

위의 코드에서 data.weather[0].main은 날씨 상태를, data.main.temp는 온도를 나타냅니다. 이를 이용하여 적절한 처리를 할 수 있습니다.

마무리

이제 Axios를 사용하여 날씨 API를 호출하는 방법을 알아보았습니다. Axios는 간편한 API 호출을 위해 많이 사용되는 라이브러리로, 다양한 프로젝트에서 유용하게 활용될 수 있습니다. API 호출 시 토큰이나 인증 등의 보안 요소를 함께 고려하여 사용해야 합니다.

더 자세한 정보를 알고 싶다면 Axios 공식 문서를 참조하세요.