자바스크립트를 이용한 날씨 및 기상 서비스 개발

10 Sep 2023

javascript

소개

날씨와 기상 정보는 매일 우리의 일상 생활에 영향을 미치는 중요한 요소입니다. 이러한 정보를 쉽고 편리하게 얻을 수 있는 서비스는 많이 사용되고 있습니다. 이번 포스트에서는 자바스크립트를 이용하여 실시간 날씨 및 기상 정보를 가져와 서비스를 개발하는 방법에 대해 알아보겠습니다.

OpenWeatherMap API

날씨 정보를 얻기 위해 사용할 수 있는 다양한 날씨 API가 있지만, 이번 포스트에서는 OpenWeatherMap API를 사용해보겠습니다. OpenWeatherMap은 각 도시의 현재 날씨 데이터를 제공하는 무료 API입니다.

먼저, OpenWeatherMap API 키를 발급받아야 합니다. OpenWeatherMap 공식 웹사이트에서 등록하고 키를 발급받으세요. 발급받은 API 키는 자바스크립트 코드에서 사용할 것입니다.

날씨 정보 가져오기

자바스크립트에서는 fetch를 이용하여 서버에 HTTP 요청을 보내고 응답을 받아올 수 있습니다. OpenWeatherMap API를 이용하여 날씨 정보를 가져오는 예시 코드는 다음과 같습니다.

const apiKey = "YOUR_API_KEY"; // 발급받은 OpenWeatherMap API 키를 여기에 입력하세요.
const city = "Seoul"; // 날씨 정보를 가져올 도시 이름을 입력하세요.

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)
  .then(response => response.json())
  .then(data => {
    // 날씨 데이터를 이용하여 필요한 작업을 수행하는 코드를 작성하세요.
  })
  .catch(error => {
    console.error("날씨 정보를 가져오는데 실패했습니다.", error);
  });

위 코드에서 YOUR_API_KEY 부분에 자신이 발급받은 API 키를 입력해야 합니다. 또한 city 변수에는 날씨 정보를 가져올 도시 이름을 입력해야 합니다. 반환된 데이터를 이용하여 필요한 작업을 수행할 수 있습니다.

날씨 정보 화면에 표시하기

데이터 가져오기가 성공적으로 이루어지면, 이를 화면에 표시해야 합니다. 이를 위해 HTML과 CSS, 그리고 자바스크립트를 조합하여 날씨 정보를 표시하는 예시 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
  <title>날씨 정보</title>
</head>
<body>
  <h1>날씨 정보</h1>
  <div id="weather-info"></div>

  <script>
    const apiKey = "YOUR_API_KEY";
    const city = "Seoul";

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)
      .then(response => response.json())
      .then(data => {
        const weatherInfoElement = document.getElementById("weather-info");
        weatherInfoElement.innerText = `현재 온도: ${data.main.temp}°C`;
      })
      .catch(error => {
        console.error("날씨 정보를 가져오는데 실패했습니다.", error);
      });
  </script>
</body>
</html>

위 코드에서 YOUR_API_KEY에 자신이 발급받은 API 키를 입력합니다. 이 코드는 h1 태그에 “날씨 정보”라는 제목을 표시하고, weather-info라는 ID를 가진 div 요소에 날씨 정보를 표시합니다.

결론

자바스크립트를 이용하여 실시간 날씨 및 기상 정보 서비스를 개발하는 방법에 대해 알아보았습니다. OpenWeatherMap API를 이용하여 날씨 정보를 가져오고, 이를 화면에 표시할 수 있는 방법을 살펴보았습니다. 이를 기반으로 웹 애플리케이션 등 다양한 서비스를 개발할 수 있습니다. 날씨 정보를 활용하여 사용자에게 유용한 기능을 제공하는 서비스를 개발해보세요!