두번째 프로젝트: Weather up!

프로젝트 소개 : Weather up !
👉 https://github.com/SumiSeo/weather-up

📅 작업기간
2021/8/13 ~ 8/15

🕹 기술스텍
HTML/CSS
JavaScript(ES6+)
Git

🙆🏻‍♀️ 주요구현사항
모든 페이지의 레이아웃 구현
Openweathermap API를 가져오는 기능 구현
날씨에 따라 바뀌는 동영상 배경 구현

---

기본 메인화면
짜잔, Tokyo! 의 날씨를 알아봅시다 :)

화면에 도시를 입력하고, 도시의 날씨 상태(?)에 따라 화면의 배경 이미지가 달라집니다.

이젠, New york의 날씨도 알아봅시다.

---

날씨 API를 이용해서 도시, 온도, 바람, 습도 등 여러가지 데이터를를 불러와 당일 포함 약 5일간의 날씨를 알 수 있는 웹사이트를 구현하였습니다.
휴대폰상으로 보는 날씨 정보가 너무 안 맞을 때가 많고(참고로, 저는 Apple입니다... 힛) 날씨 정보를 "읽는 것"이 아닌 "보는 느낌"을 주는 홈페이지를 구현하길 원했습니다.

날씨를 입력하고, 맑음, 흐림, 비옴, 눈옴 등의 여러가지 상태를 유저에게 바로 보여줄 수 있도록 배경 이미지에 동영상을 불러왔습니다. 날씨뿐만 아니라, 날짜, 요일, 습도, 온도 등의 자세한 정보도 제공하고 있습니다.

---

🔍 부딪혔던 문제와 해결 과정(1)

• 비디오를 로딩 해주는 과정에서 Ajax를 이용하지 않고 (홈페이지 reloading도 제외) 불러오길 원했습니다.

데이터를 불러옴과 동시에, 비디오를 바꿔주어야 했는데, 실제적으로 배경 이미지에는 default 비디오값이 있기 때문에 단순히 비디오 소스를 바꿔주는 것으로는 제가 원하는 배경바꾸기를 구현할 수 없었습니다.

videoBG.setAttribute("src", "./src/Clouds above a road.mp4");
videoBG.setAttribute("src", "./src/sun.mp4");

데이터 이미지는 그대로이고 화면 이미지만 바꿔주어야 했기 때문에 AJAX를 이용할까도 생각했지만, 조금 더 적합한 solution을 찾았습니다.

videoBG.parentNode.load();
 

아주 간단하게 바뀐 비디오를 재로딩 해주는 function입니다 :)

---

🔍 부딪혔던 문제와 해결 과정(2)

• 불러온 데이터들을 가공해주는 과정에서 데이터가 0인 값들을 발견했습니다. 예를 들어, 구름 지수가 0인 날들이 있었습니다. 이 데이터 값을 처리해주는 function에 parameter로 넘겨줄 때 0이 falsy 값으로 처리되었기 때문에 기존의 알고리즘을 아예 수정할 생각을 하였습니다. 그러나 데이터를 넘겨줄 때 ternary operatior를 이용해 number가 아닌 string값으로 변환해주었습니다.

const windData = (responseList[i].wind.speed === 0) ? "0" : responseList[i].wind.speed ;
const humidityData =  (responseList[i].main.humidity ===0) ? "0" : responseList[i].main.humidity ;
const cloudsData = (responseList[i].clouds.all === 0) ? "0" : responseList[i].clouds.all ;
const pressureData =  (responseList[i].main.pressure ===0) ? "0" : responseList[i].main.pressure ;

---

🔍 부딪혔던 문제와 해결 과정(3)

• 제가 사용한 날씨 웹 API에서는 매일매일 날씨를 제공하기 않고, 3시간마다 날씨를 제공하고 있었습니다. 날씨를 불러오는 과정에서 약 40개의 데이터를 받아왔는데, 저는 단 하루의 날씨만 필요했기 때문에 for loop에서 increment를 조정하여 필요한 데이터를 골라냈습니다.

for(let i =0; i < responseList.length; i+=8){
if(i === 0){...

---

👁 프로젝트 후기
날씨 API는 꼭 다루고 싶었던 주제였기 때문에, 디자인과 레이아웃을 구현할 때 신경을 썼었습니다. 무엇보다, 날씨는 우리가 주기적으로 확인하는 것임에도 불구하고 너무 "별것 아닌"정보처럼 다루어졌기 때문에 날씨를 확인하고도 잊어먹는 경우가 대다수입니다. 그렇기 때문에, 동영상을 구현하여 유저에게 더 직설적이게 다가가고 싶었습니다.

데이터를 불러오는 과정에서 섭씨와 화씨를 재설정해주어야 했고, 데이터를 불러올때 increment를 재설정해주는 과정을 통해, API데이터를 조금 더 능숙하게 다루는 법을 배웠습니다.

사실, 비디오를 배경화면에 넣는 것을 제가 정말 좋아하는 기능인데 :) 단순히 소스를 바꿔면 된다는 것과는 다르게 AJAX, videoload등 여러가지 프로그래밍적 사고방식과 해결방법을 배울 수 있는 경험이 되었습니다.