언어

TypeScript

프레임워크

React

주의 사항

• 프로젝트 개발 당시 최신 버전인 React 17을 사용하므로 주의 필요

스타일링 라이브러리

styled-components

고려한 후보

• Module CSS (CSS-IN-CSS)
• Styled Components (CSS-IN-JS)

선택한 이유

• 동적 스타일링 측면에서 Css-in-js 방식이 낫다고 판단, styled-components 선정

문서화 도구

Storybook

선택한 이유

• 컴포넌트 문서화
• 다른 분야 팀원과 원활한 협업에 도움이 됨

테스트 도구(자동화)

Jest

선택한 이유

• 비즈니스 로직 구현에 사용되는 유틸 함수(주로 Date 관련)에 대한 테스트를 작성하여 효용성 및 안정성을 높임

서버 API Mocking 도구

Mockooon

고려한 후보

• MSW
• Mockoon

선택한 이유

• 별도의 라이브러리 설치 불필요
• Open API 기반 Mocking이 간편하여 명세 (.yaml) 만 존재하면 손쉽게 적용 가능

번들링 도구

Webpack

고려한 후보

• ESBuild
• Vite

선택한 이유

• 원하는대로 커스터마이징이 가능하다는 장점
• 트러블슈팅 과정을 겪으며 번들링 이해도를 높임
• Webpack 은 공식문서/커뮤니티가 잘 되어 있다는 장점

HTTP 클라이언트

Axios

고려한 후보

• Axios
• Ky
• fetch API

선택한 이유

• 구버전 브라우저와의 호환성을 위해 선택
• interceptor를 활용하여 소셜 로그인 + Access Token 관련 로직 처리가 간편하다는 장점

서버 상태 관리 라이브러리

React Query (V3)

고려한 후보

• SWR

React Query VS SWR

• 비교적 간단한 애플리케이션 : SWR
• 복잡도가 좀 더 높은 애플리케이션 : React Query입한다면 React Query 를 선택
• 주의할 점 : 프로젝트 개발 당시 최신 버전인 V3을 사용하고 있으므로 주의 필요.

기타

• dayjs
  • Date와 관련된 로직을 간편하게 작성하기 위해 유틸리티 함수를 제공하는 라이브러리 중에서 선정
  • 용량이 작다는 장점, 관련 라이브러리 중에서 유지보수가 가장 활발함