API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기

자바스크립트를 활용한 동적 날씨 정보 출력

이번에는 자바스크립트를 활용하여 날씨 정보를 동적으로 출력하는 방법을 알아보겠습니다. 이를 위해 7Timer라는 날씨 API를 사용하여 필요한 데이터를 가져올 것입니다.

1. API 데이터 가져오기

가져온 데이터를 활용하여 날씨 정보를 동적으로 출력하기 위해, 먼저 API 데이터를 가져와야 합니다. 이를 위해 fetch()를 사용하였습니다. fetch() 함수는 Promise를 반환하므로, async/await를 활용하여 비동기적으로 API 데이터를 가져옵니다.

async function loadItems() {
  const data = await fetch(
    "https://www.7timer.info/bin/api.pl?lon=127.378&lat=36.349&product=civillight&output=json"
  );
  const list = await data.json();
  return list.dataseries;
}

API 주소는 위와 같이 입력하였습니다. loadItems() 함수는 위 API에서 반환되는 list 데이터 중 dataseries 정보를 반환합니다.

2. HTML 페이지 구성하기

API 데이터를 가져왔다면, 이를 활용하여 HTML 페이지를 구성합니다. 위 코드에서는 날씨 정보를 출력할 영역을 ul 요소로 구성하였습니다.

<ul id="app">
  <!-- 날씨 정보 출력영역 -->
</ul>
<div class="app2">
  <div>
    <ul id="today"></ul>
  </div>
  <div>
    <ul id="week"></ul>
  </div>
</div>

위 코드에서는 날씨 정보 출력 영역으로 id가 app인 ul 요소를 사용하였으며, 추가로 today와 week ul 요소를 사용하여 각각 오늘의 날씨 정보와 이후 일주일간의 날씨 정보를 출력할 것입니다.

 

3. 자바스크립트를 활용한 날씨 정보 출력

먼저, loadItems() 함수를 통해 외부 API에 요청을 보내서 날씨 정보 데이터를 받아옵니다. 이 API는 경도(longitude)와 위도(latitude) 값을 입력으로 받아 해당 지역의 날씨 정보를 JSON 형태로 반환합니다.

 

async function loadItems() {
  const data = await fetch(
    "https://www.7timer.info/bin/api.pl?lon=127.378&lat=36.349&product=civillight&output=json"
  );
  const list = await data.json();
  return list.dataseries;
}

다음으로 displayItems() 함수에서는 받아온 데이터를 이용해 HTML 요소를 생성하고, 화면에 출력합니다. 이 함수에서는 전체 주간 날씨와 오늘의 날씨를 출력합니다.

 

function displayItems(items) {
  const $container = document.querySelector("#app");
  const $today = document.querySelector("#today");
  const $week = document.querySelector("#week");

  // 오늘 날씨 출력
  const todayInfo = items[0];
  const createHtmlToday = `<li>
    <p><span>${todayInfo.date}</span></p>
    <p>
      <img src="./weather_img/${todayInfo.weather}.png" alt="날씨" />
    </p>
    <p>
      <span>${todayInfo.temp2m.max}</span>/<span>${todayInfo.temp2m.min}</span>
    </p>
  </li>`;
  $today.innerHTML = createHtmlToday;

  // 주간 날씨 출력
  const createHtmlAll = (item) => {
    return `
    <li>
      <p><img src="./weather_img/${item.weather}.png" alt="날씨"></p>
    </li>`;
  };
  $week.innerHTML = items.map((item) => createHtmlAll(item)).join("");
}

displayItems() 함수에서는 오늘 날씨와 주간 날씨를 구분하여 출력하고 있습니다. 오늘 날씨는 items 배열에서 첫번째 요소를 추출해서 출력하고, 주간 날씨는 items 배열에서 나머지 요소들을 반복문으로 돌면서 출력합니다. 각 날씨 정보는 해당하는 날씨 이미지와 최고/최저 기온 등을 함께 표시합니다.

마지막으로 loadItems() 함수를 호출하여 날씨 정보를 받아오고, 그 결과를 displayItems() 함수를 통해 출력합니다.

 

loadItems()
  .then((items) => {
    displayItems(items);
  })
  .catch(console.log);

이렇게 JavaScript를 활용하여 날씨 정보를 출력하는 코드를 작성할 수 있습니다.