JavaScript_momentum 만들기_(5) weather

이번 시간에는 날씨 데이터를 가져오는것을 해보도록 하겠습니다. 기본적인 로직은 다음과 같습니다.

Step 1. geolocation 메서드를 이용하여 localStorage에 날씨 데이터를 불러오는데 필요한 위도, 경도 데이터를 저장한다.

Step 2. openWeaterMap API를 사용하여 날씨 데이터를 불러온다

 

 

 

loadCoords 함수

weather.js 파일을 새로 생성하여 아래와 같이 코드를 입력해주었습니다.

const COORDS = 'coords'

function loadCoords() {
    const loadedCoords = localStorage.getItem(COORDS);
    if (loadedCoords === null) {
        askForCoords();
    }else {
        // getWeather();
    }
}

function init () {
    loadCoords();
}

init()

loadCoords 함수에서 가장 처음 실행 할 작업은  localStorage에 저장된 값을 불러오는 것입니다. localStorage에는 날씨데이터를 불러오는데 필요한 위도, 경도 데이터를 저장할 예정입니다. 만약 localStorage에 아무런 값도 저장되어 있지 않다면(=== null) 위도, 경도를 저장하는 askForCoords 함수를 실행시킵니다. localStorage에 위도, 경도 값이 저장되어있다면 날씨를 불러오는 함수를 실행시킬 것입니다. 

 

geolocation 메서드

weather.js 파일에 아래와같이 코드를 추가했습니다.

const COORDS = 'coords'

function handleGeoSuccess (position) {
    console.log(position);
}

function handleGeoError () {
    console.log('Can`t not find location');
}

function askForCoords() {
    navigator.geolocation.getCurrentPosition(handleGeoSuccess,handleGeoError);
}

function loadCoords() {
    const loadedCoords = localStorage.getItem(COORDS);
    if (loadedCoords === null) {
        askForCoords();
    }else {
        // getWeather();
    }
}

function init () {
    loadCoords();
}

init()

geolocation 메서드를 사용하였습니다. 현재 위치를 얻기 위해서는 2가지 인자를 받아야하는데 위치를 얻는데 성공한 경우 실행할 함수와 실패할 경우의 함수가 그것입니다. 브라우저를 열서 새로고침을 하게 되면 위치에대한 권한 요청 알람이 뜨고 확인을 누르면 콘솔창에 아래와 결과가 나타내어집니다. 

coords 안에 latitude와 logitude에 관한 정보가 담겨져 있습니다. 이를 객체로 바꿔준 후 localStorage에 저장하기 위하여 아래와 같이 코드를 변형하고 추가하였습니다.

const COORDS = 'coords'

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,
        longitude
    };
    saveCoords(coordsObj);
}

function handleGeoError () {
    console.log('Can`t not find location');
}

function askForCoords() {
    navigator.geolocation.getCurrentPosition(handleGeoSuccess,handleGeoError);
}

function loadCoords() {
    const loadedCoords = localStorage.getItem(COORDS);
    if (loadedCoords === null) {
        askForCoords();
    }else {
        // getWeather();
    }
}

function init () {
    loadCoords();
}

init()

 

실행 결과 아래와같이 localStorage에 위도 ,경도 데이터가 저장된것을 확인 할 수 있습니다.

 

 

 

OpenWeatherMap API

openWeatherMapAPI 바로가기

openWeatherMapAPI는 무료로 날씨에관한 API를 제공해주는 사이트 입니다. 회원가입 후 사용할 수 있으며, API를 이용하기 위해서는 개인키를 발급받아야 합니다. 로그인 후 API key 텝에 들어가면 개인키를 확인 할 수 있습니다.

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={appid} 형식으로 API를 요청하게 됩니다. 

이를 활용하여 아래와 같이 코드를 추가했습니다.

const weather = document.querySelector('.js_weather');
const COORDS = 'coords'
const API_KEY = '//자신의 개인키를 입력해주세요';

function getWeather(lat,lon) {
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&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,
        longitude
    };
    saveCoords(coordsObj);
}

function handleGeoError () {
    console.log('Can`t not find 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()

 

index.html 에 .js_weather class의 span 태그를 만들어주도록 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>momentum</title>
    <link rel='stylesheet' href ='./index.css'>
</head>
<body>
    <div class="js_clock">
        <h1 class="clock_text">00:00</h1>
    </div>
    <h4 class="js_displayName displayName"></h4>
    <form class="js_form form">
        <input type="text" placeholder="What is your name?"/>
    </form>
    <form class="js_form_toDo form_toDo">
        
        <input type="text" placeholder="What are you doing?"/>
    </form>
    <span class="js_weather"></span>
    <ul class="js_list_toDo">
    </ul>
    <script src="JS/clock.js"></script>
    <script src="JS/showYourName.js"></script> 
    <script src="JS/toDo.js"></script>
    <script src="js/bgImage.js"></script>
    <script src="js/weather.js"></script>
</body>
</html>

 

결과

아래 사진과 같이 날씨 데이터와 현재 위치에 관한 데이터가 웹브라우저에 출력되는것을 확인 할 수 있습니다.