노마드코더 투두리스트 날씨 클론코딩 4

3.8 Weather api 1

외부 날씨 api를 불러와서 필요한 데이터만을 뽑아서 사용하는 방식을 배우는 단계이다.

일단, 원하는 지역의 온도,지명을 알기 위해서는 위도와 경도가 필요하다.

따라서 위도와 경도를 먼저 알아내야 하는데 이 과정에서는 외부 api가 필요없이 javascript 내에서 가능하다.

const COORDS = "coords";

function saveCoords(coordsObj) {
    localStorage.setItem(COORDS,JSON.stringify(coordsObj));
}

function handleGeoSuccess(position) {
    console.log(position);
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const coordsObj = {
        latitude,
        longitude
    };
    saveCoords(coordsObj);
    getWeather(latitude,longitude);
}

function handleGeoError() {
    console.log("can't access geo location");
}


function AskforCoords() {
    navigator.geolocation.getCurrentPosition(handleGeoSuccess,handleGeoError);
}

function loadCoords() {
    const loadedCoords = localStorage.getItem(COORDS);
    if (loadedCoords === null) {
        AskforCoords();
    } else {
        const parseCoords = JSON.parse(loadedCoords);
        getWeather(parseCoords.latitude,parseCoords.longitude);
    }
}

function init() {
    loadCoords();
}

init();

1. 일단 유저 브라우저에 위치정보가 있는지 없는지 알기 위해 프로그램 시작하면 loadCoords 호출해서 정보가 있으면 사용하고 없으면 위도와 경도를 알아내는 AskforCoords함수를 호출한다.

2. AskforCoords함수에서 getCurrentPosition이 성공했을 경우 handleGeoSuccess 호출, 실패했을 경우 handleGeoError 호출

3. handleGeoSuccess로 가면 위도는 position.coords.latitude , 경도는 longitude.coords.longitude로 구함.

4. 위도와 경도를 갖는 coordsObj 객체 생성

5. 브라우저 내에 저장하는 함수인 saveCoords에 coordsObj 인자 넣어서 호출

6. 날씨정보 출력하는 함수인 getWeather에 위도, 경도 인자 넣어서 호출

7. 처음 날씨 정보를 출력할 때 이런 사이클로 된다.

 

3.9 Weather api 2

api 사용법에 관해 배우는 단계이다.json 타입으로 받은 데이터 중 필요한 데이터만을 골라서 사용하는 방법을 배웠다.

const API_KEY = '241051bf13976dd3ddf8b8d9f247255e';

function getWeather(lat,lng) {
     fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`).then(function(response) {
         console.log(response)
         return response.json
     }).then(function(json) {
         console.log(json);
         const temperature = json.main.temp;
         const location = json.name;
         weather.innerText = `${temperature}, ${location}`;
     })
}

1. api를 사용하기 위해 api-key를 발급받고 fetch에 ?으로 구분되는 이후부터

lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`삽입하고 units=metric 부분은 온도단위를 변경하기 위해 넣음

2. response.json으로 json데이터를 가져오고 json을 보면 json.main.temp에 온도가 저장되어 있고 json.name에 위치가 저장되어 있다.