[JSClock 클론코딩] 5. 마지막으로 날씨 API를 사용해보자! (完)

길고 길었던 JS 클론코딩의 마지막 시간입니다!

오늘은 API를 가져와서 날씨정보를 출력해보도록 하겠습니다!

0. index.html

날씨를 알려주는 부분을 span을 통해 만들어줍니다. div로 해도 상관은 없습니다.

그리고 script를 추가합니다.

<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
    <title>Something</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="js-clock">
        <h1>00:00</h1> <!-- 임시로 -->
    </div>
    <form class="js-form form"> <!-- 작성창용 css를 적용하기 위해 class를 2개로!! form을 통해 엔터를 누를 때마다 정보가 전달!! -->
        <input type="text" placeholder="What is your name?" /> <!-- 입력창 추가 -->
    </form>
    <h4 class="js-greetings greetings"></h4>

    <!-- 할 일을 작성하는 부분 -->
    <form class="js-toDoForm">
        <input type="text" placeholder="Write a to do" />
    </form>

    <!-- 이 부분에 toDoList안에 들어갈 내용들이 출력된다 -->
    <ul class="js-toDoList"> 

    </ul>

    <span class="js-weather"></span>

    <script src="clock.js"></script>
    <script src="greeting.js"></script>
    <script src="todo.js"></script>
    <script src="bg.js"></script>
    <script src="weather.js"></script>
</body>


</html>

1. weather.js

먼저 현재 위치를 파악하기 위해서 askForCoords()를 사용합니다.

navigator.geolocation.getCurrentPosition을 통해 사용자의 현재 위치를 요청할 수 있는데, 여기서 사용자가 원하지 않을 수 있기 때문에 잘 불러온 경우(handleGeoSucces)와 잘 불러오지 못한 경우(handleGeoErro)로 나눠서 함수를 작성합니다. 한 글자씩 빠져있는 이유는 니꼬쌤의 재치..가 아닐까 싶네요 ㅋㅋㅋㅋ

그러면 아래와 같이 새로고침을 했을 때 권한을 요청하는 팝업창이 뜹니다. 여기서 허용하면 잘 불러오는 것이고, 차단하면 불러오지 못하여 콘솔창에 Can't access geolocation이 뜨는 것이죠.

그 다음 할 일은, OpenWeatherMap 사이트에서 공용api를 사용하여 날씨 정보를 받아오는 것입니다.

홈페이지에 가입한 후에, API키를 생성해주고 키를 weather.js에 상수값으로 넣어줍니다.

그리고 현재 날씨 데이터를 가져올 수 있는 API문서에서, 위도와 경도를 통해 날씨를 구하는 API call를 찾아서 getWeather함수에서 사용해줍니다. 이것에 관한 자세한 내용은 강의와 아래 코드를 참조하시면 도움이 되실 수 있을 것이라고 생각합니다.

api를 불러와서 그 자료를 이용하는 getWeather부분만 확실히 이해하신다면, 다른 프로젝트에서 api를 가져와서 데이터를 이용하실 때도 수월하게 하실 수 있을 것이라고 생각합니다.

마지막으로 가장 중요한 부분이라고 하면 then을 사용하는 부분이라고 할 수 있겠네요. then은 데이터가 완전히 들어온 다음 함수를 호출할 때 사용합니다. 아무리 컴퓨터가 빨라도 데이터를 불러오는 중에 다음 함수가 작동한다면 그 함수는 완전하지 못한 데이터를 가지고 돌아갈 것이기 때문에, 그런 상황을 방지하고자 사용하는 것이 바로 then입니다.

그 외의 내용은 주석과 강의를 참고해주시면 되겠습니다!

// weather.js

const weather = document.querySelector(".js-weather");

const API_KEY = "c3001d6c36bfa343ca01e3a84d962b00"; // OpenWeatherMap에서 key를 가져와서 넣는다!
const COORDS = "coords";

function getWeather(lat,lng){ // API를 이용해 날씨를 받아오는 함수
    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric` // units=metric는 화씨를 섭씨로 바꾸기 위해서, fetch는 데이터를 가져올 때 사용!
    ).then(function(response){ // 데이터가 완전히 들어온 다음 함수를 호출하기 위해서 then을 사용!! api를 받아와서 response 안에 json에서 각각의 자료를 빼온다
        return response.json();
    }).then(function(json){
        const temperature = json.main.temp; // 온도만 빼와서 temperature에 저장
        const place = json.name; // 장소만 빼와서 place에 저장
        weather.innerText = `${temperature} @ ${place}`; // 온도와 지역 이름을 맨 위에서 가져온 weather의 text에 삽입
    }) // 데이터가 완전히 들어온 다음 함수를 호출하기 위해서 then을 사용!!
}

function saveCoords(coordsObj){ // 객체를 localStorage에 저장하는 함수
    localStorage.setItem(COORDS, JSON.stringify(coordsObj)); // 객체를 string형태로 바꿔서 저장!
}

function handleGeoSucces(position){ // 잘 불러왔다면?
    const latitude = position.coords.latitude; // 위도를 latitude에 저장
    const longitude = position.coords.longitude; // 경도를 longitude에 저장
    const coordsObj = { // 객체의 변수 이름과 key의 이름을 같게 저장할 때는 : value를 생략해도 된다!
        latitude,
        longitude
    }; // coordsObj 객체에 위도와 경도를 저장
    saveCoords(coordsObj); // 객체를 저장하는 함수 실행
}

function handleGeoErro(){ // 못 불러왔다면?
    console.log('Can\'t access geolocation');
}

function askForCoords(){ // 현재 위치를 묻는 함수
    navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoErro); // 매개변수는 2개로, 앞은 잘 불러왔을 때, 뒤는 못 불러왔을 때 작동하는 함수이다.
}

function loadCoords(){
    const loadedCoords = localStorage.getItem(COORDS); // COORDS를 localStorage에서 가져온다
    if(loadedCoords === null){ // 만약 null이면
        askForCoords(); // 날씨를 묻는다
    } else{ // 날씨값이 있다면
        const parseCoords = JSON.parse(loadedCoords); // string을 다시 object형태로 바꿔줌
        getWeather(parseCoords.latitude, parseCoords.longitude); // parseCoords에서 받아온 위도와 경도를 사용하여 날씨를 구한다
    }
}

function init(){
    loadCoords();
}

init();