[Vanilla JS] Nomad Coders 바닐라 JS로 크롬 앱 만들기 #8

Weather info

weather.js

const API_KEY = "myOwnApiKey";

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}&units=metric`;
  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}`;
    });
}

function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

navigator.geolocation 을 이용하면 웹에서 장치의 위치를 알아낼 수 있다.
👉참고

getCurrentPosition()의 괄호 안에 성공했을 때 실행할 함수를 먼저 써주고 실패했을 때 실행할 함수를 뒤에 써준다.
성공했을 때 js가 전달해주는 위치를 console.log로 확인해보면 아래와 같은 값들을 콘솔에서 확인할 수 있다.

여기서 우리가 주목해야할 값은 latitude(위도)와 longitude(경도)이다.
이후에 사용할 openweathermap API에서 필요하니 각 위도와 경도를 lat과 lon으로 저장해뒀다.

OpenWeather API

👉OpenWeather API 에서 위치별 날씨에 대한 정보를 무료로 사용할 수 있다.

여기에서 날짜 정보에 접근할 수 있는 각자 개인 API Key를 얻을 수 있으니 회원가입을 먼저 해주자
그리고 API 탭에 들어가서 Current Weather Data의 API Doc을 누르면 API를 사용할 수 있는 url이 나온다.

API call 부분의 주소를 복사해서 주소창에 입력 해보자
lat과 lon은 아까 getCurrentPosition에서 얻은 위도와 경도 값,
그리고 API key는 사이트에 로그인한 뒤 My API keys에서 가져올 수 있다.

그리고 나면 위 사진처럼 알 수 없는 것을 볼 수 있는데
자세히 보면 현재 위치와 온도, 날씨 등을 알려주고 있다.
다만 온도 수치가 조금 이상한데 그것은 화씨로 표시해주고 있기 때문이다.
우리에게 익숙한 섭씨로 온도를 받으려면 해당 url 뒷 부분에 &units=metric을 붙여주면 섭씨로 변한다.

그리고 나서 API를 사용하기 위해 fetch()함수를 이용해 아까 url을 주소창에 입력했을 때 확인했던 json객체를 받아온다.
받아온 json에서 위치와 날씨 정보를 찾아 각 html태그 요소에 넣어준다.

여기까지 수행한 결과물

여기에서 강의는 끝이났다.
이제 직접 꾸며서 레파지토리에 업로드해야겠다.