[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Weather & 마무리

시작에 앞서서 사담을 좀 하자면...... 31일 이후에 이제서야 마지막 포스팅을 하게 된 이유. 그동안 취업을 위해 면접을 보러 다니고 이런저런 준비가 필요해서 포스팅을 쉬었었다. 그러다 보니 어느덧 벌써 6월 중순...! 5월 내로 끝내는 게 목표였는데, 미루고 미루다 이렇게 되어버렸다. ㅜㅜ 그래도 늦었다고 생각할 때가 가장 빠른 법! 다시 달려 보자!

 

---

 

Weather

Momentum에 내장되어 있는 날씨 기능을 구현해 보는 파트이다. GPS를 이용하여 유저가 현재 시스템을 사용하고 있는 지역의 날씨를 알아내고 보여 줄 것이다.

#1. Geolocation

이 파트에서 우리가 사용할 것은 geolocation이다. 위치라는 의미를 담고 있는데, getCurrentPosition() 메서드를 사용하여 위도와 경도를 가져올 수 있다. 여기서 집중해야 할 것은? 바로 우리가 사용할 메서드인 getCurrentPosition().

getCurrentPosition()는 aargument가 두 개가 필요하다. 하나는 성공했을 때 실행될 함수, 하나는 에러가 발생했을 때 실행될 함수. 성공했을 때 실행되는 함수를 성공 함수, 에러가 발생했을 때 실행될 함수를 에러 함수라고 칭해 보자. 성공 함수는 실행됐을 때 geolocation의 객체를 받게 된다. 즉, 유저의 위치를 얻게 되는 것이다. 아래의 코드대로 작성하고 브라우저의 개발자 도구 콘솔을 확인해 보자. 콘솔에 찍힌 로그를 확인했을 때, 내가 위치한 위도와 경도를 알 수 있다.

function onGeoOk(position) {
    console.log(position);
};

function onGeoError() {
    alert("Can't find you, No weather for you.")
};

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

geolocation이 위도와 경도를 얻는 것을 확인했으니, 이제 얻은 것을 써먹어야 한다. 성공 함수의 내부를 아래 코드와 같이 변경하여 테스트해 보자. 콘솔에서 위도와 경도가 잘 나타나는 것을 확인할 수 있다.

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

위도와 경도를 얻어오는 것까지 마쳤다면, 본격적으로 geolocation API를 사용하기 전에, API 계정을 열어야 한다.

https://openweathermap.org/ 웹 사이트로 이동하여, 가입 또는 로그인을 해 준다. 로그인한 후에 API라는 메뉴에 들어가면 여러가지 API를 확인할 수 있다.

#2. Weather API

먼저 API라는 것이 무엇인지 짚고 넘어가자면, 간단히 말해서 다른 서버와 소통하는 방법이라고 볼 수 있다. 많은 API 중에서 우리가 사용할 것은 Current Weather Data이다.

API doc을 살펴 보면 API 호출을 할 수 있는 주소가 하나 있다. 각각 알맞는 파라미터를 넣어 주면 날씨와 위치 등을 알려 주는 json이 등장한다.

API Key는 프로필에서 My API Key 메뉴에 들어가면 확인할 수 있다.

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

// 사용 시에는 {} 제거해 주기

그렇다면, 이제 이 url을 코드에 접목해 보자. 이미 위도와 경도는 얻고 있으니 API Key만 설정해 준 후에 url을 설정해 주면 끝. console.log가 아닌 fetch를 사용해서 확인한다면 개발자 도구의 네트워크 탭에서 URL 요청을 한다는 것을 확인할 수 있다.

const API_KEY = "자신의 API KEY";

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

우리가 실질적으로 얻고 싶었던 것을 다시 생각해 보자. 유저가 있는 지역과, 그 지역의 날씨다. 지금 우리가 API를 통해 가져온 json에서 둘 모두 확인할 수 있었다. 이 json에서는 지역과 날씨 뿐만 아니라 습도, 기온, 일출, 일몰 등의 정보도 얻을 수가 있었다. 그런데, 우리가 보통 사용하는 섭씨 온도가 아닌 화씨 온도가 나타나는 것을 확인할 수 있는데 이것도 수정이 가능하다.

API 문서로 돌아가 보면, units이라는 파라미터가 있는데 이것이 화씨와 섭씨를 컨트롤하는 파라미터이다. 우리가 사용한 url 뒤에 &units=metric 을 추가해 주면, 섭씨 온도로 변경되는 것을 확인할 수 있다.

다시 우리가 사용한 fetch로 돌아와서. fetch는 promise이기도 한데, promise는 당장 실행되지 않고 시간이 조금 지난 뒤에 실행된다. 서버에 요청하면 서버가 응답하는 시간이 걸린다면? 그 시간을 기다려야 한다.

anyway. fetch가 promise라면? 요청을 받아야 한다. then으로 response를 받아 주면 된다. 여기서 response는 json을 받아 주게 되고, 이 json이 우리가 여태까지 url로 확인했던 json이다. 

json을 받아왔다면? 이제 우리가 원하는 데이터들을 가져와 보자. data.name은 지역을 의미하고 있고, data.weather의 첫 번째 배열의 main은 날씨를 의미하고 있다. 우리가 원하는 데이터들인 것이다. 이 둘을 콘솔로 출력해 보면, 잘 나오는 것을 볼 수 있다.

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).then(response => response.json().then(data => {console.log(`지역: ${data.name} / 날씨: ${data.weather[0].main}`)}));
};

그럼 이제 개발자 도구 콘솔이 아닌 화면에서 직접 확인해 보자. html 부분에서 지역과 날씨가 들어갈 div와 span을 설정해준 후, js 부분에서는 console.log을 지우고 아래의 코드와 같이 작성한다. 그리고 새로고침을 하면, 명언 밑에 날씨가 나타나는 것을 볼 수 있다. 온도나 풍량 등도 추가할 수 있다. 나는 노마드코더에서 한대로 날씨와 함께 온도가 나타나도록 설정했다.

<div id="weather">
    <span></span>
    <span></span>
</div>

fetch(url).then(response => response.json().then(data => {
    const weatherContainer = document.querySelector("#weather span:first-child");
    const city = document.querySelector("#weather span:last-child");

    const weather = data.weather[0].main;
    const name = data.name;

    weatherContainer.innerText = `${weather} / ${data.main.temp}`;
    city.innerText = name;
}));

---

마무리 (Conclusions)

이제 원하는 기능은 모두 마무리가 됐다! 이제 남은 건 CSS로 모멘텀처럼 꾸며내는 것뿐! 강의에서는 CSS를 굳이 설명하지 않는다. CSS 정도야, 그리 복잡한 페이지가 아니기 때문에 무난하게 혼자 할 수 있을 거라고 생각하신 듯? 물론 나도 그렇게 생각하고 있고. 알고 있던 기술들을 복습하고, 다른 기술들을 배울 수 있는 좋은 강의였다. 가볍게 듣기 딱 좋았던? 무료 강의지만 알찼다. 사실, 내가 원했던 건 실제로 모멘텀처럼 사용할 수 있는 크롬 앱이었지만...... 뭐 어때! 그건 또 하면 되는 거고. ㅎㅎ
어쨌거나, 아래에 CSS까지 넣어 호스팅한 내 모멘텀 클론 페이지의 링크를 달아 두고 포스팅을 마무리하겠다.

https://bunchsh.github.io/Momentum_clone/