JS - [위치 정보 받아오기(getCurrentPosition) / Weather 기능]

1. 위치 정보 받아오기

날씨 기능을 추가해보자!

 

우선 사용자의 위치 정보를 얻어와야 한다. navigator.geolocation.getCurrentPosition( ) 함수를 사용하면 user의 위치(geolocation)을 얻을 수 있다. 브라우저가 알아서 WiFi, 위치, GPS 정보 등등을 제공해준다!!

 

getCurrentPosition( ) 함수는 2개의 argument가 필요하다. 하나는 모든 게 잘 됐을 때 실행 될 함수, 다른 하나는 에러가 발생했을 때 실행 될 함수이다.

 

다음과 같이 함수를 작성했다. 유저의 위치 정보를 받아오면 onGeoOk 함수를, 위치를 받아올 수 없으면 onGeoError 함수를 실행할 것이다. 

브라우저에서 실행하면 권한을 요청하는 창이 뜬다!!!!!

허용하고 console창을 보면 GeolocationPosition이 뜬다. 이건 JS가 getCurrentPosition에 object로 넘겨 준 것이다. 여기에 coords(좌표)가 있고, latitude(위도)와 longitude(경도)를 알 수 있다~~(✧ ˃̶͈̀ロ˂̶͈́)੭ु⁾⁾

 

 

---

2. Weather 기능

먼저 위도와 경도를 받아온다.

다음으로 이 숫자들을(위도, 경도) 장소로 바꿔주어야 한다.

그 전에!! API 계정을 열어야 한다. 우선 openweathermap.org 사이트로 이동해서 로그인 후 API로 이동한다.

API 클릭

그러면 여러 API 들이 있는데.. 우리가 필요한 건 우리가 있는 장소의 이름과 현재 날씨이므로 아래의 API를 사용할 것이다.

API doc 클릭!

아래와 같이 위치 좌표를 URL에 보내서 위치에 대한 현재 날씨를 얻을 수 있다. 

해당 URL에 우리가 얻어왔던 경도와 위도, API Key를 입력해보면 우리가 있는 위치와 날씨를 알 수 있다!! (참고로 크롬 웹스토어에서 JSONView를 다운로드 받으면 코드가 깔끔하게 뜸!) 날씨, 위치, 국가, 도시 등등.. 여러 정보가 뜬다.

 

 

다시 JS 파일로 돌아와서 제일 위에 const API_KEY 선언 후 나의 API Key를 넣어준다. 그리고 URL을 불러와 경도, 위도, API Key를 변수로 변경해준다. 그리고 console.log 해서 콘솔 창을 확인해보면 url이 잘 뜬다!

참고로!! 지금 온도는 화씨 온도로 뜬다. 주소 뒤에 &units=metric을 붙여주면 섭씨 온도로 잘 뜬다.

주소 뒤에 &units=metric 붙여줌

다음으로 fetch를 사용해서 URL을 얻어온다. 그러면 실제로 URL에 갈 필요 없이 JS가 대신 URL을 부를 것이다.

그리고 아래와 같이 코드를 입력한다. 여기서 response.json() 은 아래있는 모두를 나타낸다!! 그리고 data를 추출한 후 name과 weather 정보를 가져와보자.

++사진

 

그러면!! 부산 맑음 으로 정보가 잘 뜬다!!

 

 

그러면 이제 화면에 추가해보자.

html 파일에서 이름과 날씨를 받아오기 위해 다음과 같이 태그를 추가해준다.

첫 번째 span태그에 날씨 정보를, 마지막 span 태그에 도시 정보를 넣어줬다.

확인 결과 Clear Busan 잘 뜬다!! 

이러한 방법으로 물론 온도도 얻을 수 있다!

잘 뜸!!!!!!

---

끝! 이제 예쁘게 꾸미는건 CSS의 몫......

 

---