[노마드코더-바닐라 JS로 크롬 앱 만들기] Getting Weather (1)

이제 우리가 할 것은 Location 정보를 가져오는 것이다.

유저의 Location 좌표 정보를 읽어서 그 정보를 local storage에 저장하는.. (위도와 경도를 읽어노는 것)

일단 init() 함수를 만들고 맨 마지막에 호출하는 코드를 넣는다.

 

const COORDS = 'coords';

 

function loadCoords(){

    const loadedCoords = localStorage.getItem(COORDS);

    if(loadedCoords === null){

        askForCoords();

    } else{

        //getWeather

    }

}

function init(){

    loadCoords();

}

init();

loadCoords() 함수를 다음과 같이 일단 작성한다.

만약 loadCoords가 null이면 coords를 요청하는 함수인 askForCoords를 호출한다.

 

function handleGeoSuccess(position){

    console.log(position);

}

function handleGeoError(){

    console.log("Can't access geo location!");

}

function askForCoords(){

    //navigator API 사용

    navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);

}

우리는 navigator API를 사용할 것이다.

Geolocation은 객체(object)이고

getCurrentPosition()은 두개의 requirements가 있는데 첫번째 requirements는 좌표를 가져오는데 성공했을 때를 처리하는 함수다. 이 함수는 position 인자를 갖는다. 두번째 requirements는 좌표를 가져오는데 실패했을 때를 처리하는 함수를 작성하여 넣는다.

이것을 실행시키면(위치를 console.log로 나오게끔 해놨음) 위치 정보를 수락할 것이냐는 창이 뜨고 허용하면 Console.log에서 GeolocationPosition {coords: GeolocationCoordinates, timestamp: 1611637939477} 라고 뜨는 것을 알 수 있다. 이렇게 간단하게 위치를 가져올 수 있다.

아무튼 console.log로 찍어낸 것은 테스트를 위해 해본 것이고, 본격적으로는 local storage에 위치 정보가 undefined 니까, 아직 저장된 값이 없으니까 위도와 경도를 저장하는 것을 하겠다.

 

function handleGeoSuccess(position){

    const latitude = position.coords.latitude; //latitude는 위도, longitude는 경도

    const longitude = position.coords.longitude;

 

}

GeoLocationPosition 객체 안에는 coords가 있다. 그리고 coords 안에는 latitude(위도) longitude(경도) 도 있다. 이것을 각각 변수로 만들어 준다. (이건 아까 위에서 console.log(position)을 해보았을 때 그 객체 안에 어떤 변수들이 있었는지 볼 수 있었다.)

 

function handleGeoSuccess(position){

    const latitude = position.coords.latitude;

    const longitude = position.coords.longitude;

    const coordsObj = {

        latitude : latitude,

        longitude : longitude

    };

 

}

그리고 위도와 경도를 각각 한번에 가지는 객체(coordsObj)를 만들어준다.

 

const coordsObj = {

        latitude,

        longitude

    };

자바스크립트의 팁이라고 한다면, 객체에 변수의 이름과 key의 이름을 같게 저장할 때 그냥 하나만 써줄 수 있다. 그래서 이렇게 바꾼다.

 

이제 우리가 할 것은 저장을 하는데 좌표를 저장하는 것이다. handleGeoSuccess 안에서 바로 다음 줄에 local storage에 저장하는 코드를 작성해도 되겠지만 니콜라스는 쪼개서 하는 것을 좋아한다고 한다.

 

saveCoords(coordsObj);

이것을 handleGeoSuccess 함수 안에서 saveCoords를 호출하고

 

function saveCoords(coordsObj){

    localStorage.setItem(COORDS, JSON.stringify(coordsObj));

}

saveCoords 함수를 작성해준다.

지난 번에 했던 것 처럼 local storage에는 String으로 저장을 해야 하기 때문에 이번에도 JSON을 사용했다.

여기까지 하고 새로고침을 해서 local storage를 보면 coords라고 하는 변수가 저장되어 있고 그것의 value로 latitude와 longitude가 저장된 것을 볼 수가 있다. 이제 새로고침을 하면 이미 저장되어 있으므로 새로 묻지 않는다.

 

여기까지 한 것이 위도와 경도를 읽어오는 것이였다. 다음엔 이 api를 다뤄볼 것이다. Openweathermap 사이트에 접속하여 회원가입을 한 다음, API keys에 들어가서 key 값을 복사하여 weater.js 맨 위에 변수로 선언해준다.

const API_KEY = "8789a4252c50636a7c1aa3842c1d8328";

 

이 다음 부터는 다음 시간에!