Today I Learned #11

시간과 사용자의 이름, To Do List를 갖고있는 현재의 momentum에, 사용자의 위치를 받아 해당 위치의 날씨를 출력하도록 했다.
사용자의 위치는 navigator.geolocation.getCurrentPosition()을 통해 받아오고, 날씨는 openweathermap을 통해 받아왔다.

---

navigator

navigator는 사용자 에이전트 (웹의 경우 브라우저를 뜻함) 의 상태나 신원 정보를 나타내며, 다양한 속성을 반환한다. 참고로 표준 속성은 전부 Read only로 반환된다.

geolocation

그 중 나에게 필요한 것은 사용자의 위치 이므로 geolocation을 통해 사용자의 위치를 받도록 했다.<script src="weather.js"></script>를 통해 weather.js를 불러오도록 하고 생성했다.

loadCoords()

init()에서는 loadCoords()를 실행하도록 하였고, 해당 함수에서는 const loadedCoords = localStorage.getItem("coords");를 통해 LS에서 지역에 대한 정보를 받아오도록 하였고, if(loadCoords === null)을 통해 만약 이미 정보가 있다면 askForCoords()함수를 실행하도록 하였고, 그렇지 않은 경우 해당 지역의 날씨를 불러오도록 하였는데, 정보가 없는 경우를 먼저 살펴보도록 하겠다.

askForCoords()

이 함수에서 navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError)을 통해 사용자의 현재 위치를 반환 하도록 하였다. getCurrentPosition는 매개 변수를 3개 받을 수 있고, success를 제외한 두 변수(error,option)은 필수가 아니다. success와 error는 콜백 함수인데, success의 경우는 GeolocationPosition을 유일한 매개 변수로 받고, error는 GeolocationPositionError를 유일한 매개 변수로 받는다.option에서는 정확도와 소모시간을 추가적으로 지정할 수 있다. 나의 경우 option은 사용하지 않았고, success는 handelGeoSuccess(position), error는 handleGeoError(err)로 콜백하도록 하였다. handleGeoError()에서는 오류 문구를 출력하도록 했다.

handleGeoSuccess()

handleGeoSuccess(position)에서는 position.coords를 통해 GeolocationCoordinates을 불러오고, position.coords.latitude, position.coords.longitude를 각각 latitutde,longitude로 선언해주었다. 이 latitude, longitude를 coordsObj로 선언해준 후, 해당 객체를 local storage에 저장하는 함수 saveCoords(coordsObj)를 호출해주었다. 다음은 coordsObj선언이다.

    const coordsObj = {
        latitude,
        longitude
    };

보통의 선언이라면, latitude: latitude, longitude: longitude;와 같이 선언했겠지만, javascript의 특징 중 하나로, 선언하고자 하는 key와 value의 값이 같은 경우, latitude, longitude;만 해주어도 같은 의미를 갖는다.

saveCoords()

coordObj를 인자로 갖는 saveCoords()는 이 javascript 객체를 stringify하여 local storage에 저장하는 기능을 한다. 다음과 같은 코드로 진행된다.

localStorage.setItem("coords", JSON.stringify(coordsObj));

삽질

지금까지의 과정을 거치면, local storage에 아래 사진과 같이 coords가 저장된다.

하지만, 나의 경우 처음부터 저장이 된 것은 아니었는데, 아래 사진처럼 위치 사용 여부를 질문하는 팝업은 떴지만, 심지어 허용하지 않으면 handleGeoError도 실행됐지만,

허용을 누르는 경우 진행되어야 할 coords의 저장은 이루어지지 않았다. 따라서 각 함수에 console.log("(함수이름) works")를 통해 어디까지 진행이 되는가 확인을 해보았고, askForCoords()까진 정상 진행되지만, "허용"을 누른 후 진행되지 않았다. 구글링을 하며 이것저것 시도했지만, 작동되지 않았고, 혹시나 싶어 확인한 설정이 답이었다.

... 이유는 알 수 없지만, 해당 설정은 활성화를 해주어도 계속 해제되고, 필요할 때마다 체크를 다시 해준 뒤 사용했다.

---

openweathermap

해당 문제를 해결한 후, 사용자의 위도와 경도를 저장했으니, 해당 위도와 경도의 날씨를 페이지에 출력하도록 하는 작업을 했다. 사용한 API는 openweathermap이고, 사용 조건에 따라 다르지만 나의 경우는 무료로 이용했다. Divide를 위해 loadCoords()에서 local storage에 "coords"가 있는 경우, 없는 경우 askForCoords()를 실행했던 것과 달리, 아래 코드를 통해 getWeather()이 실행되도록 했다.

const parsedCoords = JSON.parse(loadedCoords);
getWeather(parsedCoords.latitude,parsedCoords.longitude);

또한, index.html에 <span class="js-weather"></span>를 추가하여 innerText를 통해 원하는 값을 출력 가능토록 하였고, const weather = document.querySelector(".js-weather");,
const API_KEY = "//나의 API_KEY//";를 통해 weather와 API_KEY를 미리 선언했다.

fetch()

API를 연결하기 위해서 getWeather(lat,lng)에서 가장 먼저 한 것은 fetch()였다. 정확히는 WindowOrWorkerGlobalScope.fetch()로, 인자로서 전달된 request를 수행하는 역할을 한다. 내가 요구한 request는 다음 사진과 같다.

then()

fetch()를 통해 request를 전달했으니, 다음은 response를 읽어와 json()을 통해 JSON의 형태로 변환하여 return하여 innerText()로 출력해주면 된다.

하지만, 비동기 방식으로 작동하는 API의 response가 도달하기 전에 json()이 실행된다면, 읽어올 response가 없기 때문에 오류가 발생한다. 따라서 then()을 통해 진행하는데, 이 함수는 API와 비슷한 promise를 통해 성공으로 해당 promise가 완료된 경우 인자로 전달된 콜백 함수를 실행하도록 한다. 추후 YDKJS에서 자세히 다루도록 하겠다. 결국, getWeather()은 다음과 같이 작성된다.

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}°C @ ${place}`;
    });
}

fetch()가 완료되면, response를 인자로 하는 콜백 함수를 호출하여, 해당 response를 JSON 형태로 바꾸어주고, 해당 함수가 완료되면, 해당 json을 인자로 하여 temperature과 place를 선언해주고, innerText를 통해 <span>의 내용을 수정하도록 하였다.