우리가 사용할 API는 Current Weather Data.
기본적으로 API는 다른 서버와 이야기할 수 있는 방법이다.
⬆️ 위치 좌표를 사용해서 날씨를 얻을 수 있다.
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
⬆️ latitude, longitude, API Key와 함께 API를 부르면, 우리가 있는 위치를 알려주고 날씨도 준다.
⬆️ 변수 url. 백틱으로 감싸고 ${}로 lat, lon, API_KEY 감싼다. console에 url이 뜨고, url을 클릭하면 잘 작동한다.
이제 url 에서 얻어야 한다. fetch를 사용해서 url을 얻을 것이다. ⬇️
console에는 아무 것도 뜨지 않는다. 구글 크롬의 network에 가면 WiFi에서 어떤 일이 일어나는지 보여 준다.
⬆️ fetch를 사용했기 때문에 JS가 URL로 요청을 했다. 실제로 url에 갈 필요 없이 JS가 대신 url을 부를 것이다.
⬆️ 응답의 결과다. 이걸 통해서 내가 있는 장소의 이름을 얻고 싶고 weater를 얻고 싶다 . 날씨에는 많은 정보가 array 안에 있다.
⬆️ 온도, 습도, 기압 등등도 얻을 수 있다. 화씨가 나오기 때문에 API weather map에 가서 어떻게 바꿀 수 있는지 확인해야 한다.
⬆️ &units=metric 을 추가해준다. 섭씨로 나온다. weather.js에도 url을 수정해주자.
fetch가 작동하는 법은 간단하지 않다. fetch는 promise다. promise는 당장 뭔가 일어나지 않고 시간이 좀 걸린 뒤에 일어나는 것이다. then을 사용해야한다.
url을 fetch하고, 그리고(then) response를 받아야 한다. 그리고 response의 json을 얻어야 한다. coords 안에 있는 것들이 json이다. 그리고 내용을 추출했으면 data를 얻을 것이다. 그리고 console.log로 data의 name을 해보자. 그리고 data.weather을 해보자. weather은 array다. 그래서 array의 첫번째 요소의 main을 얻어야 한다. ⬇️
나의 위치와 날씨가 나왔다. ⬇️
console.log로 잘 작동하니, 변수를 만들어주자.
그리고 index.html에서 태그를 만들고, weather.js에서 weather과 city를 가져오자.
온도를 얻고 싶으면, data.main.temp ⬇️
