날씨 보여주기!
navigator.geolocation.getCurrentPosition()
geCurrentPosition()은 2개의 argument가 필요하다
1. 성공했을때 함수
2. 실패했을때 함수
함수를 만들어주자!
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
console.log("you live in", lat, lon);
}
function onGeoError() {
alert("Can't find you. No weather for you!");
}
navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);
받아온 좌표를 장소로 바꿔줄 서비스를 이용해야하는데 Open API를 사용하면된다.
Open API 로써 무료로 사용할수 있다.
아이디를 만들거나 로그인하고 Current Weather Data를 사용하면 된다.
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
{} 안에 있는 lat 와 lon에 우리의 좌표를 넣고, API key는 자신 프로파일에 들어가 확인할수있다!
API key 는 const로 저장해주고 사용!
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`
console.log(url)
}
url을 타고 들어가면 좌표, 온도, 습도, 나라, 도시 등등 정보들이 나오는데 이중에 우리가 사용할 온도는 화씨로 표기되어있어서 섭씨로 바꿔준다.
url 에 &unit=matric 추가!
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
fetch()를 이용해서 url을 불러온다.
fetch()는 promise다.
promise는 당장 뭔가 일어나지 않고 시간이 좀 걸린뒤에 일어난다.
서버에 요청하고 응답을 기다린다.
그러므로 .then()을 사용하여 response를 받는다.
브라우저에 보여질 공간 만들기
<div id="weather">
<span></span>
<span></span>
</div>
필요한 데이터를 가져와서 브라우저에 보여주면 끝!
fetch(url).then(response => response.json()).then(data => {
const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
city.innerText = data.name;
weather.innerText = `${data.weather[0].main} / ${data.main.temp}`
})
소감
날씨까지 포함하여 노마드 니코쌤의 크롬앱 강의가 끝났다! CSS만 조금 손보고 마무리하면 간단한 페이지 완성!
만드는 동안 혼자 궁시렁 거리며 이해안되는 부분도 있었지만 끝나고 보니 정말 많은걸 배울수 있는 강의여서 내 자신에게도 뿌듯했다! 앞으로도 화이팅하자 서피터~