DAY 14

 

#8.0 Geolocation

 

 

우선 날씨를 얻기 위해 미리 index.html에 준비를 해준다.

 

<div id="weather">
    <span></span>
    <span></span>
</div>
<script src="js/weather.js"></script>

 

function onGeoOk(position){console.log(position);}
function onGeoError(){alert("Can't find you. no Weather for you.");}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

위의 코드로 브라우저에서는 내 위치를 받아온다.

  다만 getCurrentPosition()에게는 2개의 argument가 필요한데, 하나는 모든 게 잘 성공했을 때 실행된 함수(onGeoOk), 다른 하나는 에러가 발생했을 때 실행될 함수(onGeoError)이다. 성공했을 시에는 해당 위치 값을 받아와야 하므로 onGeoOk에 인자를 하나 넣어준다. 

 

  위 이미지를 보면 알겠듯이, 여러 정보 중에서도 내 위치의 위도와 경도를 전해주고 있다. 이 값들을 우선 변수에 저장해두고, 이를 이용해 내 위치의 날씨를 얻어올 것이다.

 

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("You live in", lat, lng);
}

 

 

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

 

위 사이트의 날씨 API로 내 사이트에 출력할 것이다. 

우선 이용하기 위해서는 저 사이트의 계정을 만들어둬야 한다..

 

 

 

#8.1 Weather API 

 

카테고리 API -  Current & Forecast weather data collection - Current Weather Data

https://openweathermap.org/current

 

 

회원가입을 하면, My API keys에서 내 key 정보를 확인할 수 있다. 

 

 

const API_KEY = "appkey~~~~";

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

 

fetch(url);로 직접 url을 호출하지 않더라도 fetch로 javascript에서 대신 url을 부르도록 해준다. 확인은 개발자 도구 - Network - fetch/xhr 에서 확인할 수 있다.

 

해당 url에 들어가면..

그러나 자세히 보면 온도를 화씨 온도(standard)로 표현하고 있다. 우리는 섭씨 온도를 알고 싶으므로 metric으로 해야 한다. 

아무튼 우리가 얻고 싶은 것은 현재 위치와 현재 날씨이므로, url 뒤에 &units=metric을 붙인다.

 

fetch를 사용하면 시간이 좀 걸리기 때문에, response를 받으면 해당 값을 json 형식으로 받아오고, 이 중 뽑아내고 싶은 data를 추출한다.

 

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)
// 응답을 받으면 json 형식으로 받아오고
    .then((response) => response.json())
// 받아오면 data를 가져온다
    .then((data) => {
      const city = document.querySelector("#weather span:first-child");
      const weather = document.querySelector("#weather span:last-child");
      city.innerText = data.name;
      weather.innerText = data.weather[0].main;
    });
}

 

만약 날씨 뿐만이 아니라 온도도 가져오고 싶으면 weather.innerText를 다음과 같이 수정하면 된다.

 

weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;