노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.

weather.js

• openweathermap.org에서 weather API KEY를 받아야 함.
• then은 이전 자바스크립트 코드가 완전히 실행돼서 데이터가 완전히 넘어왔을 때만 실행된다.
  • 만약, 여기서 then을 쓰지 않으면, 아직 API 데이터가 넘어오지 않았는데 실행되어 에러가 날 수 있음!

const weather = document.querySelector(".js-weather");
const API_KEY = "38cb84355b7ad3bb3676b3b9e6b11d39";
const COORDS = "coords";

// 여기서 fetch 함수는 requests 함수와 같은 역할.
function getWeather(lat, lng){
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
        ).then(function(response){
            return response.json();
        }).then(function(json){
            const temperature = json.main.temp;
            const place = json.name;
            weather.innerText = `${temperature} @ ${place}`;
        })
}

function saveCoords(coordsObj){
    localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}

// 위치정보 획득에 성공하면 실행하는 함수
function handleGeoSuccess(position){
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const coordsObj = {
        latitude : latitude,
        longitude : longitude
    };
    saveCoords(coordsObj);
    getWeather(latitude, longitude);
}

// 위치정보 획득에 실패하면 실행하는 함수.
function handleGeoError(){
    console.log("Can't access geo location");
}

function askForCoords(){
    navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError); // 유저의 현재 위치 정보를 요청하고, 성공하면 첫 번째 함수를, 실패하면 두 번째 함수를 실행.
}

// 로컬 스토리지에 정보가 없으면 요청.
function loadCoords(){
    const loadedCoords = localStorage.getItem(COORDS); 
    if(loadedCoords === null){
        askForCoords();
    } else {
        const parsedCoords = JSON.parse(loadedCoords);
        getWeather(parsedCoords.latitude, parsedCoords.longitude);
    }
}


function init(){
    loadCoords();
}

init();