[Javascript] OpenWeather API를 사용하여 현재 날씨 가져오기

const API_KEY = "";

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

    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}`;
        console.log(data);
    });
}
function onGeoError(){
    alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);

 

우선 현재 위치를 가져오기위해 navigator.geolocation.getCurrentPosition 메서드를 사용합니다.

해당 메서드는 위치 가져오기를 성공했을때와, 실패했을 때에 대한 두개의 콜백함수를 가지는데

첫번째는 GeolocationPosition 객체를 유일한 매개변수로 받는 콜백 함수입니다.

두번째는 GeolocationPositionError (en-US) 객체를 유일한 매개변수로 받는 콜백 함수입니다.

 

위치 가져오기를 성공했을 때인 onGeoOk 콜백메서드에서 위도와 경도를 해당 메서드의 매개변수인 position에서 참조합니다.

그 후 fetch api를 사용하여 openweather api에 접근하고 리턴한 데이터를 파싱합니다.