이번 프로젝트는 OpenAPI를 이용한 프로젝트이다.
가장 무난한 API인 기상청 날씨 API를 이용해서 날씨 + 기온별 옷차림을 추천해주는 대시보드를 만들고자 했다.
🏖️ 웨더웨어
개요
평소에 추위를 많이 타는 탓인지, 기온에 따른 옷차림에 꽤나 신경을 쓰고 다녔다.
더우면 벗으면 되지만, 추우면 더 껴입을 수 없으니까.
그래서 기왕 날씨 정보를 볼거면 그에 맞는 옷차림을 추천해주면 좋지 않을까하는 생각에서 시작되었다.
OpenAPI
원래는 날씨 정보만 알려주려고 했는데, 요즘 날씨앱에서 미세먼지는 빼놓을 수 없는 요소이기 때문에 대기오염정보API도 가져왔다.
🌤️ 날씨 예보
현재 날씨
실시간으로 해당 지역의 초단기 예보를 받아와서 보여준다.
보여주는 정보는 아래와 같다.
- 현재 기온 및 날씨
- 최고, 최저기온
- 미세, 초미세먼지 농도
- 체감온도
- 습도
- 풍속
시간별 날씨
지금으로부터 약 36시간 이후의 시간대별 예보를 보여준다.
주간 날씨
7일 뒤 최고, 최저 기온, 습도, 날씨를 알려준다.
옷 추천
체감온도에 따라 맞는 옷차림을 추천해준다.
이미지는 무신사에서 빌려왔다.
🗓️ 캘린더
날씨 예보 대시보드를 만들었는데, 아무리봐도 뭔가 부족하다.
사이드바까지 만들었는데 페이지 이동을 할 일이 없어서 억지로나마 캘린더를 만들어보았다.
주간 날씨
해당 날짜를 기준으로 아이콘으로 다음주까지의 날씨를 나타낸다.
일정
| 일정 추가 | 일정 확인 |
|---|---|
 |  |
캘린더가 있으니 일정도 추가할 수 있다.
따로 DB를 연결하진 않았으니 localStorage를 이용하여 일정을 추가, 수정할 수 있도록 해놓았다.
express
그리고 프론트엔드에서 OpenAPI를 사용하면서 일어나는 고질점이 있는데, 바로 네트워크 통신하면서 API Key가 노출된다는 것이다.
아무리 환경변수처리를 해주더라도 까보면 다 나온다.
그래서 한가지 방안을 생각해냈는데, 바로 백엔드에서 OpenAPI를 받아와서 프론트엔드로 전달하는 것이다.
적어도 백엔드에서 일어나는 통신은 클라이언트단에서 확인할 수 없지 않은가.
그래서 어차피 Typescript를 사용하고 있으며, 이 당시에 Node.js 스터디를 하고 있었기 때문에 백엔드로 Node.js의 express를 채택했다.
😰 어려웠던 점
처음에는 옷차림 데이터를 받아올 때, 실시간으로 무신사를 크롤링해서 이미지 및 해당 상품 페이지로 링크 연결하려고 했었다.
다만 크롤링에 성공했지만, 무신사가 SPA로 만들어진 탓인지 Selenium 같은걸로 동적 크롤링으로 진행해야했기에 결과가 나오기까지 시간이 걸렸다.
그래서 미리 Json에 기온별로 옷차림 카테고리 및 이미지 링크를 저장해두고 꺼내다 쓰는 방식을 사용했다.
🙌 결과
github : https://github.com/HYK-Nov/weather-wear
배포 : https://weather-wear-alpha.vercel.app
