17. Weather 만들기 (Weather API)

- HTML -

날씨를 나타내 줄 공간을 추가함.

- JS -

const weather = document.querySelector("#weather span:first-child"); 를 하여
weather라는 변수에 html의 weather span:first-child를 찾아와 저장함.
const city = document.querySelector("#weather span:last-child"); 를 하여
city라는 변수에 html의 weather span:last-child를 찾아와 저장함.

const API_KEY = "9e3ffc367decd6a5b19153f46b4aa8c6"; 를 하여
https://openweathermap.org/ 이 사이트에 회원가입 후 메일인증하여 API를 받아와 복붙함.


const lon = position.coords.longitude; 를 하여
기존 lng의 변수명을 변경해줌.
const url = `https://api.openweathermap.org/data/2.5/weatherlat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`; 를 하여 API의 위도와 경도 위치를 찾고 날씨를 찾도록 함.

fetch(url)
.then((response) => response.json())
.then((data) => {
city.innerText = data.name;
weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
}); 를 하여
city의 innerText에 data.name인 위치를
weather의 innerText에 날씨와 기온을 나타내줌.
}

fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받음.
응답은 Response (en-US) 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없음.
Response (en-US) 객체 역시 JSON 응답 본문을 그대로 포함하지는 않음.
Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json() (en-US) 메서드를 호출해야 함.
json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환합니다.
promise는 당장 뭔가 일어나지 않고 시간이 좀 걸린 뒤 일어남.

- 화면 -

현재 위치와 기온, 날씨가 잘 나타나고 있음.