날씨를 넣어보자.
외부 API를 사용해서 날씨 불러오기.
날씨를 넣기 위해서는 navigator.geolocation.getCurrentPosition을 사용하고 인자가 두 개 필요하다. (option도 있지만 없어도 된다.)
첫번째 자리는 모든게 완벽할 때 실행되는 함수, 다른 하나는 에러가 날 때 실행되는 함수.
onGeoOk함수의 position에는 많은 정보들이 들어있다. 그중 위도와 경도를 lat, lon 변수에 담는다.
사용법에 따라, url도 변수에 담아줬다.
난 openweathermap이라는 곳의 날씨정보를 사용했다. 회원가입 후 만들어지는 api키가 필요하다
fetch를 사용해서 url을 얻는데, fetch는 서버에 데이터를 요청하는 것이며, 비동기방식이다.
동기는 요청 - 결과가 동시에 일어나므로, 요청에 대한 결과가 있기 전까지 다음 요청을 실행하지 않는다.
비동기는 요청 - 결과가 동시에 일어나지 않으므로, 요정에 대한 결과가 없어도 다른 요청을 실행한다.
then 이란 서버에서 데이터를 가져오는 작업(응답)이 완료된 이후에 then의 인자에 들어가있는 함수가 실행된다.
fetch(url).then((response) => response.json()).then((data) {} // 이 부분이 url 정보의 요청과 응답이라고 보면 될 것 같다.
응답받은 걸 data에 넣고 innerText를 사용하여 data의 name 값을 city에 넣는다.
날씨도 innerText를 사용하고, data의 weather 배열의 첫번째 값의 main과, data의 main의 temp 값을 넣는다. (지역과 온도다.)
완성된 모습
내 맘대로 css를 적용해서 완성한 모습
css는 효율? 유지보수? 그런거 안 보고 후다닥 만들고,
이름 옆에 수정은 내가 따로 간단하게 만들었다. (가끔 이름을 수정하고 싶을 때가 있을 수도 있으니...)
paintGreeting 함수에 추가한 코드
새로 만든 함수
심플하게 로컬스토리지에 있는 user를 삭제하고 페이지를 새로고침 시켜버렸다.
