SUZ!E

Same Sky

'안녕! 출근 잘 했어? :)'
'여기는 밤이야'
'아.. 오늘 날씨 좋지?'
'지금 천둥치고 있어..'
한번쯤 이런 대화를 해본적이 있나요?
외국에 사는 친구와의 대화를 조금 더 즐겁게 만들어 줄 날씨앱입니다.

Go to demo & Github repo

Design

Color

앱 이름 처럼 같은 하늘이지만 그 아래에는 다양한 날씨가 존재합니다. 검색 버튼을 클릭할 때 마다 바뀌는 컬러로 날씨의 다양함을 표현해보려고 했습니다. 푸른 계열의 색은 추운 날을, 초록 계열의 색은 푸릇 푸릇한 더운 날을, 붉은 계열의 색은 더운 여름날을 떠올리며 선택했습니다.


Development

Development stack

color palette 변경

검색 버튼을 클릭할 때 마다 색이 바뀌게 하기 위해서 우선 색 팔레트를 c1, c2, c3로 css에 지정해두었습니다. 그리고 클릭 하면 색이 바뀌어야 하는 태그의 클래스가 순서대로 돌아가며 추가 되는 함수입니다.

                public/js/app.js 
                
const changeBackground = () => {
    const list = [section, city, nation, worldTime, summary, temperature]
    for(let i=0; i<list.length; i++) {
        if(list[i].classList.contains('c3')){
            list[i].classList.remove('c3')
            list[i].classList.add('c2')
        } else if(list[i].classList.contains('c2')){
            list[i].classList.remove('c2')
            list[i].classList.add('c1')
        } else{
            list[i].classList.remove('c1')
            list[i].classList.add('c3')
        }
    }
}
            

geocode

검색어 기반으로 위도와 경도, 그리고 검색한 도시의 국가명 정보를 얻을 수 있습니다.

                src/utils/geocode.js
                
const geocode = (address, callback) => {
    const url = 'https://api.mapbox.com/geocoding/v5/mapbox.places/' + encodeURIComponent(address) + '.json?access_token'

    request({ url, json: true }, (error, { body }) => {
        if (error) {
            callback('Unable to connect to location services!', undefined)
        } else if (body.features.length === 0) {
            callback('Unable to find location. Try another search.', undefined)
        } else {
            let str = body.features[0].place_name
            let res = str.split(", ")
            callback(undefined, {
                latitude: body.features[0].center[1],
                longitude: body.features[0].center[0],
                location: str,
                city: res[0],
                nation: res[res.length - 1]
            })
        }
    })
}
            

forecast

geocode에서 받아온 위도와 경도 값으로 해당 도시의 기상 정보와 timezone 정보를 받아옵니다.

                src/utils/forecast.js
                
const forecast = (latitude, longitude, callback) => {
    const url = 'https://api.darksky.net/forecast/61222b76bb24524b3fc05d0c2c0c9a5d/' + latitude + ',' + longitude

    request({ url, json: true }, (error, { body }) => {
        if (error) {
            callback('Unable to connect to weather service!', undefined)
        } else if (body.error) {
            callback('Unable to find location', undefined)
        } else {
            callback(undefined, {
                summary: body.currently.summary,
                temperature: body.currently.temperature,
                timezone: body.timezone
            })
        }
    })
}
            

world time

forecast에서 받아온 timezone 값으로 해당 도시의 시간 정보를 받아옵니다.

                src/utils/geocode.js
                
const worldtime = (timezone, callback) => {
    const url = 'http://worldtimeapi.org/api/timezone/' + timezone

    request({ url, json: true }, (error, { body }) => {
        if (error) {
            callback('Unable to connect to time zone services!', undefined)
        } else if (body.error) {
            callback('Unable to find time zone', undefined)
        } else {
            let timeStr = body.datetime.split(".")[0].split("T")[1]
            let timeRes = timeStr.split(':')
            callback(undefined, {
                time: timeRes[0] + ':' + timeRes[1]
            })
        }
    })
}
            

Review

기획 이유

프라하에서 살 때, 정말 다양한 나라에서 온 친구들과 같은 집에서 살았었다. 그 때 만난 친구들도 그렇고 나도 그렇고 지금은 각자의 나라에 돌아갔지만 여전히 연락을 주고받는다. 외국에 사는 친구들과 연락을 할 때 가장 자주 확인하게 되는 것은 그 나라의 시간과 날씨이다. 지금이 몇시인지 알아야 친구가 지금쯤 일을 하고 있을지, 자고 있을지 파악할 수 있기 때문이다. 날씨 또한 중요한 대화 주제이기도 하다.

도시를 검색하고 해당 도시의 시간과 날씨 정보를 받아오기 위해서는 세가지 API가 필요했다.

느낀점

로컬스토리지를 사용하면서 노드 JS에 대해서 궁금해졌다. npm, json에 대해서 알고 싶었던게 사건의 발단이였다. 그 덕분에 새로운 도전도 해보고 모르는것도 알게 되었다. 예를 들면 아래와 같은 항목들을 새롭게 알게 되었다.

handlebars 템플릿 엔진

이번 앱은 hbs라는 자바스크립트 템플릿 엔진을 사용해 만들었다. 사실 템플릿 엔진에 대해서도 처음 알게 되었는데 서버에서 받아온 json 데이터를 가공해 바로 사용할 수 있다는 점이 흥미로웠다.

Heroku로 배포

지금까지 프론트엔드 코드를 호스팅 할때에는 Netlify를 이용했다. 이번 노드앱을 만들면서 Heroku를 처음 사용해보았는데, SSH(Secure Shell) key를 설정하고 깃헙에 push 하는 경험을 통해 서버에 접속 할 때 비밀번호 대신 key를 제출하는 방식이 있다는것을 알게 된 것도 흥미로웠다.

express, require 패키지 사용

node JS에 대해 지식이 없을 때 부터 터미널 창에 ‘npm install’로 시작하는 명령어를 치는것에 익숙해 져 있었다. npm 이 node package manager 의 약자임은 알고 있었지만 정확히 무슨일을 하는지는 이번 노드 앱을 만들면서 배우게 되었다.

express 프레임워크를 사용해 서버를 개발하고, request로 http call을 만들어 json 정보를 불러오고 에러 처리와 body(정보) 가공을 해보았다. JS file을 모듈화 할 수 있다는 점도 신기했다.

마무리

처음으로 서버 사이드 앱을 만들면서 배운점이 많지만 아쉬운점도 있다. 사용자가 직접 도시 이름을 검색해야한다는 말은 이미 알고 있는 도시의 날씨 정보만 얻을 수 있다는 이야기이다. 다음에는 google map api를 연동해 알고 싶은 도시를 지도에서 검색할 수 있는 기능을 추가하고 싶다.

또 이번에는 서버를 만들고 간단하게 api를 연동하는 정도만 작업했지만 다음에는 좀 더 복잡한 구조로 만들어 보고 싶은 욕심도 있다. 예를 들면 hbs에서 제공하는 helper 기능도 써보고 싶다.

node js앱을 만들었다고 ‘나는 node js를 안다’고 말 할수도 없고, 아직 알아야 할것들이 무궁무진하지만 새로운 도전의 결과는 꽤나 마음에 든다! 외국에 사는 친구에게 이 앱의 링크를 보내주며 앞으로는 이걸로 내가 사는 곳의 날씨와 시간을 확인하라고 했더니 반응이 미적지근했지만 그런 반응을 보는것도 재밌었다. 컴퓨터와 인터넷 연결만 있다면 끊임없이 배우고 만들 수 있다는 점이 프로그래밍의 매력인 것 같다! 프로그래밍의 매력을 다 알때 까지 개발자로써 계속해서 발전하고 싶다.

Live Demo Github Repo