앱 설명
- 앱이 처음 실행되면 현재 위치 기반의 날씨가 보인다.
- 다른 도시의 버튼을 누르면 해당하는 도시의 날씨를 볼 수 있다.
- 데이터 로딩 시 로딩 스피너가 있다.
현재 위치 가져오기
Geolocation API는 HTML에서 자체 제공하는 API로, getCurrentPosition()매서드를 통해 사용자의 위치 (위도, 경도)를 가져올 수 있다. OpenWeather api를 사용하기 위해서는 위도와 경도가 필요하기 때문에 변수 lat, lon을 만들어 위도와 경도를 할당해준다.
(웹에서 사용 시, 정확도가 다소 떨어질 수는 있다고 함..!)
https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API
useEffect로 getCurrentLocation 함수를 실행하여 콘솔을 찍어보니 현재 위치가 잘 나오는걸 확인할 수 있다.
OpenWeather api로 현재 위치 날씨 불러오기
OpenWeather api는 회원가입 후 고유의 key값을 사용하여 이용할 수 있는 api로 유료로 이용할 수 있는 api도 있지만, 해당 프로젝트에서는 무료 api로도 충분했다.
https://openweathermap.org/
getWeatherByCurrentLocation()로 현재 위치의 lat과 lon을 받아
마찬가지로 콘솔에 찍어 확인해보니 현재위치의 날씨 api를 잘 받아왔음을 알 수 있다.
서울인데 광명으로 나오는건 아마 Geolocation API가 웹 이용 시 정확도가 떨어질 수 있다고 해서 그런 것 같다.
앞으로 할 것
- 다른 버튼을 눌렀을 시에 다른 도시의 날씨 정보를 불러오기
- 데이터 로딩 시 로딩 스피너 사용
