javascript

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

2023. 3. 28. 15:30
목차
  1. 자바스크립트를 활용한 동적 날씨 정보 출력

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

이번에는 자바스크립트를 활용하여 날씨 정보를 동적으로 출력하는 방법을 알아보겠습니다. 이를 위해 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를 활용하여 날씨 정보를 출력하는 코드를 작성할 수 있습니다.

'javascript' 카테고리의 다른 글

자바스크립트 메소드 공부(pop)  (0) 2023.04.18
카카오맵 API를 이용한 주소 검색 기능 만들기  (0) 2023.04.05
HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기  (0) 2023.03.29
자바스크립트를 사용한 간단한 메뉴 구현하기  (0) 2023.03.27
자바스크립트를 이용한 버튼 클릭 시 내용 보이기  (0) 2023.03.26
  1. 자바스크립트를 활용한 동적 날씨 정보 출력
'javascript' 카테고리의 다른 글
  • 카카오맵 API를 이용한 주소 검색 기능 만들기
  • HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기
  • 자바스크립트를 사용한 간단한 메뉴 구현하기
  • 자바스크립트를 이용한 버튼 클릭 시 내용 보이기
솔브1
솔브1
솔브1
솔브
솔브1
전체
오늘
어제
  • 분류 전체보기 (18)
    • chat GPT (1)
    • 인사글 (1)
    • javascript (6)
    • react (4)
    • node.js (0)
    • 코딩테스트 (4)
    • publishing (0)
    • reactnative (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • HTML
  • 알고리즘
  • 개발자
  • 서버 연결 오류
  • javascript
  • 자바스크립트
  • 다음 버튼
  • 웹개발
  • css
  • API
  • 좌표검색
  • 프로그래밍
  • 웹 개발
  • js
  • 로컬 개발환경
  • Chat gpt
  • React
  • 배열
  • 이전 버튼
  • ChatGPT

최근 댓글

최근 글

hELLO · Designed By 정상우.
솔브1
API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.