[React] 모멘텀 앱 리마스터

저번에 JS 기반으로 만든 모멘텀 클론앱을 React로 리마스터했다.

외관만 비슷하지 새로운 프로젝트를 하는 것만 같았다.

TS는 아직 공부 중이라 써먹지 못했고, JSX기반이다.

---

사용한 라이브러리

• styled-components
• recoil + recoil-persist
• react-hook-form
• tanstack-query + axios
• usehooks
• react-icons
• gh-Pages

---

사용한 API

OpenWeatherMap API ( 사용자 지역, 날씨, 온도 데이터 받기 )

---

초안

앱 초안

Mac 기본앱인 Freeform으로 제작했다.

조잡하지만 대략적인 컴포넌트의 위치만 알 수 있도록 만들었다.

확실히 초안이 있는 거랑 없는 거랑은 달랐다. 

---

 

주요 기능

• 랜덤 백그라운드 - 페이지가 재랜더링 될 때마다 총 10개의 배경 이미지 중 하나가 랜덤 하게 표시. --- recoil
• 상단 사용자 이름 입력 - 첫 랜딩 페이지에는 사용자 이름 입력란이 뜨고, 이름을 입력 시, "Hello, Ryan"과 같이 인사문구 표시. --- recoil, react-hook-form
• 좌측 상단 사용자 지역 및 날씨, 온도 표시 - 현재 사용자의 위치값을 받아서 지역명과 날씨 상태 및 기온(섭씨 기준)을 차례로 표시. --- usehooks, react-query, axios
• 우측 상단 현재 시간 표시 - 현재 시간 표시(한국 기준) --- recoil
• 중앙 명언 표시 - 총 10개의 명언을 백그라운드와 마찬가지로 페이지가 재랜더링 될 때마다 랜덤으로 표시. --- recoil
• 하단 투두 리스트 - 사용자가 입력한 값을 좌측에 리스트화 + 카테고리 추가 / 제거 + 리스트 자체 추가 / 제거 + 리스트는 각 카테고리별로 필터링되어 표기됨. --- recoil, react-hook-form, react-icons

---

완성본

프로젝트 완성본

• 전체적으로 recoil + recoil-persist를 사용했기에 상태를 전역관리 하면서도 새로고침시 데이터 유지에 용이했다.
• 디자인도 각각의 박스에 글래스모피즘 효과를 주어 배경화면이 보일 수 있도록 해 깔끔함을 더해주었다고 생각한다.(전문가가 아니라 잘 모르겠음.)
• 색상은 aicolors에서 따왔다.
• 투두리스트를 만드는데 애먹었다. 그래도 use-hook-form에 대해 더 자세히 알 수 있게 된 계기였고 무엇보다 잘 작동하는 결과물을 보니 뿌듯했다.
• 의외로 날씨 정보를 가져오는 데에도 고생을 했다. 사용자의 위치값을 받은 후에 날씨정보를 받아야 했기 때문에 데이터를 다루는 순서나 동적 요청 등을 다루는데 도움이 되었다.
• 기본적인 디자인은 노마드코더스의 JS 무료강의 [ 바닐라 JS로 크롬 앱 만들기 ] 강의를 참고했다. (추가로 살을 붙인건 모두 내 머리속에서 나온 것.)
• 배포는 gh-pages를 이용했다.

---

참고

노마드 코더스 강의

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

usehooks-useGeolocation페이지

https://usehooks.com/usegeolocation

useGeolocation React Hook – useHooks

recoil-persist 사용법

https://www.npmjs.com/package/recoil-persist

recoil-persist

react-hook-form 공식

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

tanstack-query 공식

https://tanstack.com/query/latest

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query