티스토리 뷰

하드 스킬/API

[API] javascript, fetch를 활용해 날씨 검색 웹페이지 만들기

chanstouch 2023. 12. 20. 12:21

Intro

API를 활용하면 직접 무언가를 구축할 필요 없이 이미 만들어진 데이터나 코드를 활용할 수 있습니다.

API는 Application Programming Interface의 약자로 소스 코드 수준에서 정의되는 인터페이스입니다.

쓰는 사람 입장에서는 이미 만들어 둔 것들을 약속만 지키며 활용할 수 있는 것이죠!

 

이번 포스팅에서는 간단하게 실시간 날씨 API를 받아와 도시를 입력하면 온도를 출력하는 html 페이지를 제작해 보겠습니다.

 

 

ajax를 이용하는 방법도 있지만, fetch를 활용하는 편이 훨씬 간단했습니다.

 

해야할 일은 다음과 같았습니다.

  1. api 활용 방법 배우기
  2. console에서 작동 확인
  3. html에서 작동하도록 구현

Body

1. API 활용법 배우기

조코딩의 유튜브 영상을 참고하고, 구글에 javascript fetch를 검색해 사용 예시를 확인해 코드를 구성했습니다.

https://www.youtube.com/watch?v=pLBJgvC_ZUA&t=1046s

 

2. Console에서 작동 확인

일단 기본 html 파일을 만들고 F12를 눌러 개발자도구의 Console에서 fetch를 이용해 데이터가 어떻게 구성되었는지 확인해 봅시다.

API에서 제공하는 data 안에 temperature, description, forecast, wind가 있군요.

forecast 안에는 Array 형식으로 1일, 2일, 3일 후의 예상 날씨가 저장되어 있습니다.

 

저는 도시를 입력하면 온도를 표시하는 웹사이트를 만들고 싶습니다.

그러면 (data) => document 를 통해 콘솔이 아니라 페이지에 표시되도록 만들어야겠습니다.

당연히 백엔드에서 temperature 값을 가져와서, 표시될 위치도 지정해 줘야겠죠.

아직은 아무 버튼도 없습니다.

 

3. html에서 작동하도록 구현

<input id="city" type="text" value="">
    <button onclick="getWeather()">날씨 가져오기</button>

html 코드를 통해 도시를 입력 받는 input과 날씨를 가져올 자바스크립트 함수가 포함된 button을 만들어 주었습니다.

 

function getWeather() {
            let city = document.getElementById("city").value;
                fetch('https://goweather.herokuapp.com/weather/'+ city)
                  .then((response) => response.json())
                  .then((data) => {
                      document.getElementById('temperature').innerHTML = data['temperature']
                });

script를 만들어 주고, 안에 getWeather() 함수를 만들어 주었습니다.

앞에서 input을 통해 사용자에게 받은 city 값을 불러와서, API에 fetch에서 city값을 사용할 수 있습니다.

아까 (data)=>console과 다르게 data의 temperature 값을 가져와 document의 temperature id를 값을 갖는 위치에 표시합니다.

따라서 온도는 <p id="temperature"></p>에 출력됩니다.

 

최종 코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>오늘의 날씨</title>
</head>
<body>
    <h1>오늘의 날씨</h1>
    <input id="city" type="text" value="">
    <button onclick="getWeather()">날씨 가져오기</button>
    <p id="temperature"></p>
    <script>
        function getWeather() {
            let city = document.getElementById("city").value;
            fetch('https://goweather.herokuapp.com/weather/'+ city)
              .then((response) => response.json())
              .then((data) => {
                  document.getElementById('temperature').innerHTML = data['temperature']
            });
        }
    </script>
</body>
</html>

weather.html
0.00MB

 

Outro

지금까지는 필요한 데이터를 수집해 db를 만들고 분석해왔습니다.

하지만 API를 통해 직접 저장하지 않고도 훨씬 방대한 실시간 데이터를 활용할 수 있었습니다.

 

바퀴나 볼트부터 직접 만들기 시작하면 몇년이 지나서야 집을 지을 수 있을 겁니다.

처음부터 모든 것을 만들 필요는 없습니다.

간간히 API를 활용해 새로운 것들을 만들어 보겠습니다.

저작자표시 비영리 변경금지
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함