프론트 박사님의 개발일지
- Tailwind - CSS
- Axios - Api호출
- Tanstack Query - Api캐싱
- Zustand - 상태관리
각 부분마다 다양한 라이브러리들이 사용해, 어떠한 기준으로 라이브러리를 선정하였는지 정리했습니다.
와치덕스의 디렉토리구조는 기본적으로 아토믹패턴에 의거해서 설계되었습니다.
팀에서 제가 잡은 기준은 다음과 같습니다.
atom -> molecule -> organism -> template -> page 단계로 나눈다.
- 각 단계는 하위 이하 단계들을 이용해 구현한다.
- atom의 경우 기본적인 html코드들로 구현한다.
이정도의 규칙을 세우고 구현을 했습니다.
와치덕스는 TanstackQuery를 적극 이용해 api 데이터들을 관리했습니다.
그 중 useQuery, useMutation의 사용처가 모호하다 생각해 개념정리를하고 사용을 했습니다.
와치덕스에 페이지에 80%를 차지하는 차트의 경우 ApexChart,Nivo라이브러리를 사용했습니다.
다양한 차트라이브러리 중 ApexChart를 도입하게 된 경위를 정리했습니다.
이외에도 Nivo라이브러리를 사용했습니다.
ApexChart에도 HeatMap이란 차트가 있지만, 저희가 원한건 깃허브 스트릭형태였습니다.
ApexChart의 HeatMap차트를 사용할 경우, 반드시 정사각형 형태로 이루어지기에 의도한 느낌이 나지않았습니다.
그래서 Nivo의 TimeRange차트를 이용해 스트릭형태의 차트를 구현했습니다.
ApexChart의 HeatMap차트
Nivo의 TimeRange차트
