[프론트엔드] Weather

서피터·2022년 7월 7일
0
post-thumbnail

날씨 보여주기!

Geolocation

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);
  1. 위치를 성공적으로 받아오면 latitude,longitude 좌표를 호출할수있고
  2. 실패하면 좌표를 못찾았다는 alert 띄워주기!

받아온 좌표를 장소로 바꿔줄 서비스를 이용해야하는데 Open API를 사용하면된다.

> https://openweathermap.org/

Weather 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()

fetch()를 이용해서 url을 불러온다.

fetch()는 promise다.

promise는 당장 뭔가 일어나지 않고 시간이 좀 걸린뒤에 일어난다.
서버에 요청하고 응답을 기다린다.

그러므로 .then()을 사용하여 response를 받는다.

  1. url을 fetch하고
  2. response를 받아야함
  3. response의 json을 얻어오고
  4. 내용을 추출했으면 data를 얻는다.

브라우저에 보여질 공간 만들기

<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만 조금 손보고 마무리하면 간단한 페이지 완성!
만드는 동안 혼자 궁시렁 거리며 이해안되는 부분도 있었지만 끝나고 보니 정말 많은걸 배울수 있는 강의여서 내 자신에게도 뿌듯했다! 앞으로도 화이팅하자 서피터~

완선된 코드는 깃헙!

profile
코딩하는 루이형 aka 서피터

0개의 댓글