1. 기술스택
사용한 기술스택: Next.js, Tailwind, TypeScript, Zustand, pnpm, TanStack
기타: Github, Jira, Figma,Prettier,ESLint,Husky,Code Rabbit
기술스택
- Next.js를 사용하여 라우링을 편리하게 관리하고 서버 렌더링 속도를 줄이고자 하였습니다.
- tailwind를 사용하여 별도의 css 파일을 생성하지 않고 빠르게 css를 작성하고자 하였습니다.
- TypeScript를 사용하여 협업시 발생할 수 있는 버그를 줄이고 엄격한 타입 정의를 통해 서버와 데이터 형식을 통일하도록 하였습니다.
- 직접 useEffect로 API를 호출하게 되면 컴포넌트가 재마운트될 때마다 매번 똑같은 API를 다시 호출하게 되어 네트워크 낭비가 심하므로, 캐싱 및 자동적으로 재요청을 보내는 Tanstack을 사용하였습니다.
기타
- 깃허브와 지라를 연결하여 관리하였고, 각 이슈별로 feat, fix, refactor, text, config 등의 정해진 이름의 브랜치를 생성하여 PR을 만들며 관리하였습니다.
- 커밋 형식을 지키도록 관리하기 위해 Husky를 사용하였습니다.
- UI는 Figma에 작업하여 동시 작업이 용이하도록 하였습니다.
2. 사용한 라이브러리
사용한 라이브러리:idb, rechart,react-simple-maps
각각 라이브러리는 다음과 같은 이유로 사용하게 되었습니다.
- idb: 클라이언트 로그를 IndexDB에 적재하기 위해 이를 사용하기 위한 라이브러리인 idb를 사용하였습니다. 순수 IndexDB API를 사용하는 것보다 가독성이 좋고 가벼우며 해당 라이브러리를 사용한 예제 자료글이 많아 이를 사용하였습니다.
- rechart: 메인 페이지 내의 도넛 차트 사용을 위해 사용된 차트 라이브러리입니다. 다른 라이브러리보다 공식문서가 상세하고 예제 코드들이 공식문서에 나와있어 사용하였습니다. 또한, 다양한 차트를 지원한다는 장점과 커스텀이 용이하여 사용하였습니다.
3. 폴더구조
