📖 프로젝트 소개
외부 api를 활용하여 현재 내가 있는 위치 기반의 날씨를 보여주는 간단한 날씨 애플리케이션이다.
활용 api 📌
api는 위치 기반 날씨 api openWeather의 api를 활용한다.
https://openweathermap.org/api
구현할 기능 📌
-
앱이 실행되어질 때 현재 위치에 기반한 날씨가 보여진다.
-
날씨정보에는 도시,섭씨,화씨,날씨 정보가 보여진다.
-
5개의 버튼이 있으며 1개는 현재위치 4개는 다른 도시이다.
-
도시버튼을 클릭시 해당 도시의 날씨가 보인다.
-
현재위치 버튼을 누르게 되면 다시 현재 위치의 정보가 보여진다.
-
데이터를 들고 오는 동안 로딩 이펙트가 보여진다.
💻 step 1 . 현재 위치
HTML Geolocation API 을 이용하여 기본적으로 제공하는 메서드를 이용하여
내가 있는 현 위치 정보를 가져온다.
내 코드 내에선 이렇게 구현하였다.
위도와 경도 관련 변수인 lat,lon을 만들어서 출력하게 하였다.
💻 step 2 . 현재 내 위치의 날씨 정보
요청 url에 현재 내 위치의 위도와 경도 그리고 발급받은 weather api 개인 키를
넣게되면 내 위치의 날씨 정보를 받게끔 구현이 되어있다.
위치기반 날씨 정보를 받기 위한 함수를 새로 만들어준다.
여기서 주의할 점은 api로부터 요청한 데이터를 비동기처리로 가져오는 것이기 때문에
파라미터와 요청에 대한 응답 관련 변수, 데이터를 받을 변수에 await, async를 붙여줘야 한다.
또 api를 활용한 데이터는 보통 json을 추출하는 방식을 사용한다.
데이터를 비동기처리로 가져올 메서드 fetch(), 받은 json 형태의 응답 데이터를
JavaScript 객체로 바꿔줄
json()메서드를 이용하고 데이터를 data 함수에 저장시켜 준다.
