Weather API

내 지역의 날씨를 알기위해서는 navigator와 geolocation을 사용하여야 한다.

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

이 라이브러리를 호출하면 브라우저에서 위치 좌표를 제공한다.
ex) WIFI, 위치, GPS 등등

getCurrentPosition은 argument가 2개 필요하다.

첫번째 argument는 모든것을 만족하였을 때 실행 될 함수!
두번째 에러가 발생하였을 때 실행될 함수!

const API_KEY = "ec76816a17f259be6d02336d4a98fcec";

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&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.");
}

function onGeoOk(position) 즉, Success함수는 GeolocationPostion object 하나를 입력 받는다. 그 말은 Javascript가 GeolocatioinPosition object를 준다는 뜻이다.

우선 실행을 시키면

그림과 같은 이미자가 뜬다. 그 후, position이라는 매개변수에서 얻은 값을 const에 저장

const lat = position.coords.latitude;
  const lng = position.coords.longitude;

그 다음, openweathermap 웹 사이트로 이동한다.

위의 그림이 우리가 사용할 API이다.
기본적으로 API는 다른 서버와 이야기할 수 있는 방법이다!

위의 그림에 lat,lng변수값을 삽입하여 주고 마지막에 API_KEY를 삽입하여 준다.

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;
  fetch(url)

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}`;
    });

-이 fetch 부분은 다음에 정리하도록 하겠다!