[노마드코더-바닐라 JS로 크롬 앱 만들기] Getting Weather (2)

API(Application Programming Interface): 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단

-  오직 데이터만 가져오는 것이다.

- 이런 API를 제공하는 웹사이트를 이용하면 해당 웹사이트를 통해 데이터를 얻을 수가 있는데 우리가 가져올 것은 데이터 뿐이다. 디자인이나 다른 것은 필요하지 않다.

- 그러니까 이런 API는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것

-  여기 저장된 데이터는 우리가 local storage에 저장한 데이터랑 똑같이 생겼다. 데이터가 string으로 되어있

https://openweathermap.org/current

여기보면 지리좌표를 이용하는 “By geographic coordinates” API가 있다. 이게 우리가 찾던 것이다.

API call 을 보면,

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

이렇게 되어있는데 lat에 latitude, lon에 longitude, 그리고 지난 시간에 알아뒀던 API Key를 적으면 된다.

 

우리는 아마도, 어떻게 JavaScript를 이용해서 특정 URL을 호출하는지 궁금할 것이다. 사실 이 부분이 자바스크립트가 강력해진 이유라고 볼 수 있는데, 왜냐하면 자바스크립트는 웹사이트로 Request를 보내고 응답을 통해서 데이터를 얻을 수 있는데 가져온 데이터를 Refresh(새로고침) 없이도 나의 웹사이트에 적용시킬 수 있기 때문이다. 자바스크립트가 보이지 않는 곳에서 계속 데이터를 가져온다. 그게 우리가 지금부터 해볼 것이고, 새로고침 없이 데이터를 가져올 것이다.

 

function getWeather(lat, lng){

 

}

 

getWeather(latitude,longitude);

getWeather 함수를 만든다. 이 함수에는 latitude(lat)랑 longitude(lng) 가 필요하다. 그리고 그것을 handleGeoSuccess에서 불러줄 것이다. (handleGeoSuccess 함수 가장 아래에서 getWeather 함수를 호출한다.)

 

function getWeather(lat, lng){

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

}

데이터를 얻는 방법은 간단하다. fetch라는 것을 사용하면 된다. Fetch() 안에는 가져올 데이터가 들어가면 된다. 앞에 https:// 넣어주고, 주의할 점은 따옴표가 아니라 backtick(`)을 사용할 것. 변수에 해당하는 곳엔 $도 붙여주고 정해놓은 변수이름에 맞게 수정은 해주기. APP ID에 API Key를 넣어주고, 이렇게 하면 API를 제공하는 쪽에서 요청자의 API Key를 통해서, 내가 빡세게 요청하지는 않는지 알 수 있는 것이다. (왜냐하면 이거 다 공짜이니까 자기들 서버에 무리가 갈 만큼 마냥 사용하게 해줄 수는 없는 것)

이제 브라우저로 넘어와서, network 탭으로 이동한 다음에 새로고침 , API로 fetch 한게 없다고 뜬다. 왜냐하면 우리가 API를 호출한 곳은 handleGeoSuccess라서 이다. handleGeoSuccess 함수는 local storage에 좌표값이 없을 때에만 실행된다. 우리가 loadCoords에서 else 부분에는 아무 것도 안해줬었다. 그래서 else 부분을 작성해야 한다.

 

 

function loadCoords(){

    const loadedCoords = localStorage.getItem(COORDS);

 

    if(loadedCoords === null){

        askForCoords();

    }else{

        //get weather

        const parsedCoords = JSON.parse(loadedCoords);

        console.log(parsedCoords);

    }

}

* 정리해보면, 만약 local storage에 아무것도 없으면  결국 getWeather 함수가 실행된다. 왜냐하면 local storage에 아무 것도 없으면 askForCoords 함수가 실행되고, 이 함수 안에서 정상적으로 위치정보를 가져오게 되면 handleGeoSuccess가 실행되는데, 이 안에서 최종적으로 호출되기 때문이다.

근데 우리는 이미 좌표값을 가지고 있는 경우에 대해서는 아직 아무것도 해 놓은게 없다. 그래서 이제 거기를 더 작성해줄 것임

일단 여기까지 하고 새로고침하면 console에 parse가 잘 된 채로 latitude와 longitude가 잘 뜬다.

이렇게 하면 이제 getWeather 함수를 호출할 수 있다.

 

function loadCoords(){

    const loadedCoords = localStorage.getItem(COORDS);

    if(loadedCoords === null){

        askForCoords();

    } else{

        //getWeather

        const parsedCoords = JSON.parse(loadedCoords);

        getWeather(parsedCoords.latitude, parsedCoords.longitude);

    }

}

else부분을 다음과 같이 수정하면

브라우저에서 Network부분에서 이 request로 어떤 데이터가 얻어지는지 보자. Network 패널에 request가 등록되었고 저기에 필요한 데이터가 있다. 그것을 클릭하고 headers를 보면 URL이 있는데 그것을 보면 latitude도 있고 longitude도 있고 api key도 있다. 잘 동작 중인 것이다.

Network 패널은 우리가 request 한 내용을 보여주는 것이다. 그리고 headers 말고 response 부분을 보면 bravo,,

그럼 이제 여기 URL을 복사해서

(https://api.openweathermap.org/data/2.5/weather?lat=35.907757&lon=127.76692200000001&appid=8789a4252c50636a7c1aa3842c1d8328) 이거를 인터넷 창에 붙여넣고 엔터하면 잘 나온다. 날씨는 흐리다고 나온다(이거 할 때 기준) , latitude(위도) longitude(경도)도 있고 ,,

 

잠깐 API문서를 보고 units format이라는 걸 찾아보도록 한다.

(https://openweathermap.org/current#data) 지금 여기 나오는건 켈빈(kelvin)단위 아니면 화씨(fahrenheit)단위 같다. 난 metric(미터법) 을 사용하고 싶다. Metric, imperial 등 단위가 있다.

“For temperature in Celsius use units=metric” 이부분을 참조한다.(섭씨 단위를 쓰려면 units=metric을 사용해라.” 이 부분 복사) 그리고 코드로 넘어와서 URL에 방금 복사한 것을 추가한다.

 

function getWeather(lat, lng){

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

}

그리고 나서 인터넷 창에서 보면

 https://api.openweathermap.org/data/2.5/weather?lat=35.907757&lon=127.76692200000001&appid=8789a4252c50636a7c1aa3842c1d8328&units=metric  여기 접속해서 보면

temp이 7로 바뀐 것을 알 수가 있다.(temp=온도)

 

이제 우리가 가져온 데이터를 활용해본다.

Then은 함수를 하나 호출할 건데, 언제 호출하냐면 데이터가 우리한테 넘어왔을 때 이다. 왜냐하면 데이터가 들어오는데 시간이 좀 걸리는 경우도 있어서.

그러니까 then이 하는 역할은 기본적으로 함수를 호출하는 것이지만 데이터가 완전히 들어온 다음 호출하는 것이다. 그러니까 여기서 호출할 함수는 변수 이름은 json이라 짓고, 왜냐하면 JSON 데이터를 받을 거니까. 그리고 console.log를 찍어본다.

 

function getWeather(lat, lng){

    fetch(

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

        ).then(function(json){

            console.log(json);

        });

}

우리는 then을 사용했다. 왜냐하면 그 위에 fetch가 완료되길 기다려야 하기 때문이다.

이렇게하고 console을 확인해보면 response가 뜬다. 이게 서버에서 온 JSON 데이터다.

지금부터 우리가 할 것은, JSON 데이터를 가져올 것이다. 그 URL 입력해서 봤던 javascript object 그것이 JSON이다. 그걸 response에서 가져오고 싶다. 왜냐하면 여기 response에는 network 정보만 보이니까.

 

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.json());

        });

}

이렇게 수정하고 새로고침해서 보면, 콘솔에 뜨는게 대기상태라는 뜻이다. 가져온 데이터를 처리중이라는 뜻이다. 그러니까 이것도 기다리게 할 것이다 javascript에서 뭔가가 끝나길 기다리는 방법은 then을 사용하는 것이다. 한번 더 써준다.

 

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){

           return response.json()

        }).then(function(json){

            console.log(json);

        })

}

JSON 데이터가 준비되면 console에 찍도록 나타내는 코드.

이제 콘솔을 확인해보면 Object를 잘 가져온 것을 볼 수 있다.

 

이제 HTML을 작성한다.

<span class="js-weather"></span>

html에서 다음과 같이 작성한다.

 

const weather = document.querySelector(".js-weather");

js 코드에서 weather를 가져온다.

 

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){

           return response.json()

        }).then(function(json){

            const temperature = json.main.temp; // 현재 온도

            const place = json.name;

            weather.innerText = `${temperature}˚ @ ${place}`;

        })

}