JS-6) weather.js 만들기

  * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다.

이번에는 새로운 메서드를 이용해서 사용자의 위치를 특정하고, 위치를 기반으로 api를 적용해 해당 위치의 날씨 정보를 브라우저 상에 표시해줄 예정이다.

[weather.js handling]

- 우선 사용자의 위치를 특정하기 위한 메서드를 살펴보자.

navigator.geolocation.getCurrentPosition()

위 메서드는 geolocation.getCurrentPosition 에서 두 개의 argument를 받는다. 하나는 사용자가 위치 정보를 넘기는 걸 허용했을 경우이고, 다른 하나는 사용자가 거부했을 경우이다.

 그렇기에 우리는  geolocation.getCurrentPosition을 사용하기 위해서 successCallback 함수와 errorCallback 함수를 각각 만들어둬야 한다.

function geoSuccess(position) {

    console.log(position);

}

function geoError() {

    alert("We can't find your location.");

}

- 위의 코드를 실행하면 브라우저에서 위치 정보를 보내는 것에 대한 동의가 나오고, 동의를 할 경우 console 창에 GeoLocationPosition이 나타난다.

 내부의 요소를 보면 coords(좌표)가 있고, 그 안에 latitude(위도)와 longitude(경도)가 담겨있는 걸 확인할 수 있다. 각 좌표를 활용하기 위해 function 안에서 변수로 선언한다.

function geoSuccess(position) {

    const lat = position.coords.latitude;

    const lon = position.coords.longitude;

    console.log(lat, lon);

}

위의 코드를 실행하고 브라우저의 console 창을 보면 위도와 경도가 나오는 걸 확인할 수 있다. 이제 이 위치 정보를 기반으로 api에 대입해서 날씨 정보를 가져와야 한다. 그러기 위해서 openweathermap.org 에 가입하고, api_key를 받아야 한다. (api_key를 사용하려면 가입 때 입력한 이메일로 온 내용을 수락해야 하는데, 1시간 정도 소요된다.) * api 가 뭔지에 대해서는 다음에 따로 게재해 볼 예정이다.

openweathermap.org의 API category로 가서 위에 올린 사진 순서대로 찾아낸다. 밑에 사진의 링크를 복사하고 weather.js 로 돌아와서 활용한다.

const API_KEY = "";

-> geoSuccess 함수 내부 수정

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;

 우선 위처럼 코드를 수정하고 console.log(url) 을 한 후 링크를 들어가면, 내 위치 정보에 기반한 current weather map이 출력 된다. 이제 이런 정보를 사용해서 우리가 원하는 정보만을 추출해 우리의 브라우저에 표시해야 한다.

 그걸 위해 사용하는 게 fetch() 메서드다. 우리는 위의 url의 내용을 보고 싶으면 직접 클릭을 해야만 내용을 확인할 수 있다. 하지만 fetch() 메서드를 활용하면 javascript가 우리를 대신해서 url을 부르고, 내용을 가져와 준다.(가져온 내용은 검사 -> Network -> 해당하는 Name -> Preview에서 볼 수 있다.)

 fetch() 메서드는 url을 인자로 받고, 요청에 대한 응답을 나타내는 promise 타입의 객체를 반환하다. 여기서 promise는 당장 뭔가가 일어나지 않고, 시간이 좀 걸린 뒤에 일어나는 것을 말한다. 이런 fetch()는 GET 호출 방식과 POST 호출 방식의 HTTP 통신을 통해 API에 있는 데이터를 가져오거나 생성해서 사용할 수 있다. 

 fetch() promise는 404 등의 HTTP 오류가 발생해도 거부하지 않고, 네트워크 오류가 발생한 경우에만 거부된다. fetch() promise가 요청에 응답했을 때, then() 메서드를 이용해 이후 동작을 handling 할 수 있다.

fetch(url)

.then(response => response.json())

.then(data => {

    const city = document.querySelector("#weather span:first-child");

    const weather = document.querySelector("#weather span:last-child");

    city.innerText = data.name;

    weather.innerText = `${data.main.temp}, ${data.main.humidity}, ${data.weather[0].main}`;

});

 index.html에 div id="weather"를 만들고, 그 안에 span태그 두 개를 추가해 준 뒤 위의 코드를 weather.js에 추가해준다.

 첫 번째 .then()에서 fetch(url)에서 받은 promise를 json 타입의 data로 받아오고, 두 번째 .then()에서 data를 handling 해서 원하는 정보만 브라우저에 띄워주는 내용이다. data.weather[0].main 에서 인덱싱을 한 이유는 weather의 데이터가 array 형태로 들어있었기 때문이다.

 이것으로 '노마드코너'님의 무료 js 강의 하나가 끝이 났다. 완성된 결과물을 보면, 아직 css를 건들이지 않았기 때문에 많이 어수선한 상태이다. 이후 css 관련 강의를 수강한 후 fancy하게 만들어 봐야겠다. 최종 코드는 아래와 같다.

api_key는 개인적인 내용이라 가려뒀다! 

 솔직히 처음 이 강의를 들으면서 코드를 입력하고 결과물을 냈을 때, 강의를 다 이해했다고 생각했었다. 하지만 막상 블로그로 정리하려고 하니, 떠오르는 내용이 거의 없어서 내 기억력이 그다지 믿을만한 게 아니라는 걸 깨달았다.

 앞으로도 이번의 경험을 양식 삼아서 새로운 내용을 공부하면 그날 밤 혹은 그 다음날 아침 시간을 활용해서 블로그에 올려야겠다. 전공과 전혀 무관한 공부를 진행 중이라 그런 건지 아니면 코드 짜는 게 재밌어서 그런 건지는 모르겠지만, 지금 이 내용들이 내가 해 본 공부 중에서 가장 흥미롭고 즐겁다!!

"기록은 기억을 이길 수 없다." 계속 정진하자!