1.navigator
navigator.geolocation를 호출하면 브라우저에서 위치 좌표를 준다
(user의 위치정보를 얻는다, wifi나 gps 등등)
getCurrentPosition(onSuccess, onError)위 함수는 2개의 argument를 갖는데
하나는 모든게 잘 수행 됐을때 실행되는 함수
다른 하나는 에러가 발생 했을때 실행되는 함수이다.
위치 정보에서는 유저의 위도와 경도를 알 수 있는데
lat은 유저의 위도를 뜻하고
long은 유저의 경도를 뜻한다
2.API
유저의 정보를 바탕으로 날씨 API를 사용해볼려고한다.
API?
간단하게 다른서버와 이야기 할 수 있는 방법이라고 생각하면 된다.
다른서버와 소통 하기때문에 그서버에서 데이터를 받아오기위한 KEY가 필요하다
const url = https:api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${API_KEY}&units=metric;
위 코드는 날씨API를 사용하기 위한 코드인데
${lat}
```에는 navigator를 이용한 나의 위도를 작성하면되고
${long}
```에는 경도를 작성하면 된다.
${API_KEY}
```에는 아까말한 데이터를 받아오기위한 개인고유 APIKEY를 작성하면된다.이렇게 API를 호출하고 그에 맞는 값을 지정해주었다면
이제 데이터를 가져올 차례이다
3.fetch()
fetch함수는 javascript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 함수이다.
url을 선언해주었고 fetch로 해당 url에 접속하여 준다.
하지만 fetch를 사용하는 것은 쉽지 않다
fetch === promise
promise란 당장 뭔가 일어나지않고 시간이 좀 걸린뒤에 일어나는것을 뜻한다.
서버에 요청을보내면 5분뒤에 응답이 온다고 생각하면 된다
그렇기 때문에 즉시 응답을 받고싶을때 then을 사용하게 되는데
then을 사용하면 response를 받아야 하고 response의 json을 얻어야 한다
위와 같이 then을 사용하여 response을 받고 json으로 부터 얻은 데이터들을 각 태그 innerText에 적용하여주면서
화면에 출력하여 준다
모든 구조는 다 완성하였고 이제 CSS도 되돌아볼겸 이앱에다가 적용시켜 볼 생각이다.
하지만 지금 javascript challenge로 javascript를 아직 공부하고 있기 때문에 CSS진도는 느릴것으로 예상이 된다..
