자바스크립트에서 JSON 데이터를 이용하여 날씨 정보 표시하기

15 Sep 2023

javascript

자바스크립트는 웹 개발에서 많이 사용되는 프로그래밍 언어입니다. 이번 글에서는 자바스크립트를 활용하여 JSON 데이터로부터 날씨 정보를 받아와서 웹페이지에 표시하는 방법을 알아보겠습니다.

JSON 데이터란?

JSON(JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 데이터 형식입니다. 자바스크립트의 객체와 비슷한 구조를 가지고 있으며, 키-값 쌍으로 이루어진 형태로 데이터를 표현합니다.

날씨 API를 이용하여 JSON 데이터 받아오기

먼저, 날씨 정보를 제공하는 API를 사용하여 JSON 데이터를 받아와야 합니다. 예를 들어, OpenWeatherMap이라는 날씨 API를 사용해보겠습니다. 아래는 해당 API를 통해 날씨 정보를 받아오는 예제 코드입니다.

const API_KEY = "YOUR_API_KEY";
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=${API_KEY}`;

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    // JSON 데이터로부터 필요한 정보 추출 및 처리
    const city = data.name;
    const temperature = data.main.temp;
    const weatherDescription = data.weather[0].description;
    
    // 추출한 정보를 웹페이지에 표시
    const weatherElement = document.getElementById("weather");
    weatherElement.innerHTML = `현재 ${city}의 온도는 ${temperature}℃이며, ${weatherDescription}입니다.`;
  })
  .catch(error => console.error(error));

위의 예제에서 YOUR_API_KEY 부분에는 OpenWeatherMap에서 발급받은 API 키를 입력해야 합니다. 그리고 https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=${API_KEY}로 요청을 보내면 해당 도시의 날씨 정보를 JSON 형식으로 받아올 수 있습니다.

웹페이지에 날씨 정보 표시하기

위의 예제 코드에서 날씨 정보를 추출한 후, 해당 정보를 웹페이지에 표시하는 부분을 처리할 수 있습니다. HTML 파일에 아래와 같은 코드를 추가하여 날씨 정보를 표시할 공간을 마련해봅시다.

<!DOCTYPE html>
<html>
  <head>
    <title>날씨 앱</title>
  </head>
  <body>
    <div id="weather"></div>
    <script src="weather.js"></script>
  </body>
</html>

위의 코드에서 <div id="weather"></div> 부분은 날씨 정보를 표시할 공간입니다. 이제 날씨 정보를 표시하는 JavaScript 코드를 별도의 weather.js 파일에 작성하고, 위의 HTML 파일과 연결해줍니다.

마무리

이렇게 자바스크립트와 JSON 데이터를 활용하여 날씨 정보를 받아오고 웹페이지에 표시하는 방법을 알아보았습니다. API를 사용하면 더 다양한 정보를 받아올 수 있으며, 이를 활용하여 다양한 기능을 구현할 수 있습니다.

#javascript #JSON #날씨