Javascript-14.weather API 호출하기

weather API에서 (https://openweathermap.org/api) 좌표에 따라 api를 호출하는 주소를 찾는다.
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
api key는 로그인 계정에서 찾는데, d181c1b6689d8d7edd175cbff840f908였다.

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_key}`

fetch를 이용해서 도시와 날씨 정보를 가져온다.

일반적으로 fetch의 사용법은 다음과 같다.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

이 경우에는 api 를 호출해서, data를 json으로 받은 후 데이터에서 도시 이름과 날씨를 받아야 한다.

fetch(url).then(response => response.json()).then(data => {
const city = document.querySelector(#weather span:first-child);
const weather = document.querySelector(#weather span:last-child);
city.innerText = data.name
weather.innerText = `${data.weather[0].main} / {data.main.temp}`

html에는 해당 영역을 만들어두어야 한다.