#8 WEATHER | Notion

#8.0 ~ 8.1

Geolocation, Weather API

날씨를 추가하는 기능을 다음과 같이 완성한다.

const API_KEY = "3b9f9dab5de52a5498da660f5adfe008";

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.innerHTML = data.name;
      weather.innerHTML = `${data.weather[0].main} / ${data.main.temp}`;
    })
  );
}
function onGeoError() {
  alert(`Can't find you. No ewather for you.`);
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

우선 우리가 위치한 날씨를 알기위해서 다음과 같이 코드를 작성한다.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

navigator.geolocation.getCurrentPosition는 현재 컴퓨터가 사용하는 위치의 정보를 가지고오는 함수이며 사용자로 부터 위치정보 제공에 확인이 되면successCallback함수를 호출하고 제공 못받으면 errorCallback함수를 호출한다.

Untitled

successCallback함수를 onGeoOk로 정의하였고 errorCallback함수를 onGeoError로 정의하였다. getCurrentPosition함수도 addEventListener처럼 정보를 가지고 오는데 성공하면 successCallback 함수에 특정 데이터를 전달하며 콘솔창에 데이터 표시하여 다음과 같이 확인할 수 있다.

function onGeoOk(position) {
  console.log(position);
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

Untitled

우리는 getCurrentPosition에서 받아온 데이터를 가지고 아래와 같이 접근하여 해당 위치를 변수값으로 저장할 수 있다.

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
}

Untitled

이렇게 변수값으로 받아온 위치 정보를 가지고 API를 이용하여 실제 현재 위치에 대한 날씨정보 서비스를 받아올 것이다.

날씨정보 서비스를 받아올 곳은 https://openweathermap.org/라는 사이트에서 받아올 것이다. openweathermap 회원가입을 하고 API - Current Weather Data - API doc를 클릭하여 현재 날씨 데이터에 대한 API를 가지고오는 방법을 확인할 수 있다.

해당 페이지에선 다음과 같이 API Code를 제공한다.

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

브라우저 주소창에 해당 API Code를 입력하고 위치값과 API Key값을 입력하고 접속하면 다음과 같이 현재 날씨 데이터를 JSON형식으로 받아볼 수 있다.

Untitled

이제 URL로 불러온 JSON을 JS에서 fetch함수를 통하여 불러온다. 우선 브라우저에 입력한 정보를 다음과 같이 JS 변수값으로 저장한다.