| pnpm |
pnpm은 각 dependency마다 병렬적으로 처리하기에 다른 패캐지 매니저에 비해 2배 이상 빠른 성능을 보여주고 있으며, npm, yarn과 같이 node modules를 직접 설치하지 않고 global저장소를 사용하여 효과적인 dependency 관리와 ghost dependency 문제를 해결할 수 있다는 장점이 있다. 이러한 특징을 통해 개발 속도 향상과 메모리 공간을 효율적으로 관리할 수 있기에 선정하였다. |
pnpm, yarn berry, yarn |
| vite |
개발 생산성 향상을 위해 빌드 툴로써 vite를 선정하게 되었으며, vite는 dependencies와 source code 두 카테고리로 나누어 개발 서버의 시작 시간을 개선하며, HMR 기능을 통해 앱 사이즈가 커지더라도 빠른 갱신 시간을 유지할 수 있다는 장점이 있습니다. 또한 로컬에서 구동 시 번들링을 하지 않고 ESM방식을 사용하여 더욱 빠른 개발이 가능하다는 특징이 있습니다 |
vite, CRA |
| React |
이번 기획에 유저와의 상호작용이 많은 SNS 형식인 만큼 안정적이고 활성화된 커뮤니케이션을 가진 React를 통해 효율적인 CSR을 사용 할 수 있으며, 짧은 기간의 프로젝트인만큼 정의할 요소가 많은 다른 프레임워크에 비해 컴포넌트 기반 구조를 통해 반복된 문제를 설계하고 처리하여 시간 단축하고 일관성을 유지할 수 있다는 장점이 있어 분업이 쉽기에 선정하였다. |
React, Next.js, Vue |
| emotion |
스타일 관리를 위해 라이브러리를 선택하던 중 CSS in JS 방식의 emotion과 styled-components를 비교했을 때 emotion의 번들 사이즈가 더 작다는 장점이 있으며, 유연한 CssProps를 통해 동적 렌더링을 쉽게 구현할 수 있고, 협업 시에 명확한 영역 분리를 통해클래스 이름이 겹치는 것에 대해 걱정하지 않아도 된다는 장점이 있어 선정하였다. |
SCSS, Styled-Components, emotion, tailwindCSS |
| Zustand |
전역상태관리 라이브러리 중 RTK와 동일한 Flux 패턴을 기반으로 하기에 에러 핸들링에 유리하며, RTK에 비해 간소화된 코드 구조를 이루고 있어 개발 효율을 증가시킬 수 있으며 작은 번들 사이즈, 한번에 설계가 가능한 점 및 provider가 필요하지 않다는 점이 있어 선정하였다. |
RTK, Zustand, recoil |
| React-Query |
서버 상태를 손쉽게 캐싱 및 동기화가 가능한 라이브러리로써 효율적으로 데이터를 관리하고 네트워크 요청을 최소화하여 UX를 개선할 수 있다고 생각되며, SWR에 비해 많은 기능과 커뮤니티를 구성하고 있기에 손 쉬운 문제 해결이 가능하다 판단하여 선정하였다. |
React-Query, SWR |
| AWS(CloudFront + S3) |
현재 취업시장에서 AWS의 배포 여부에 대한 요구사항이 많아졌으며, 손쉬운 배포가 가능한 Vercel보다 교육 목적상 더 많은 이점이 있을 것이라 생각되어 선정하였다. |
크램폴린, AWS, Vercel |
| Oauth |
소셜로그인에 사용될 라이브러리로 JWT를 통해 안정성있게 데이터를 받을 수 있으며 다양한 공급업체를 제공하기에 선정 |
|
| monaco-editor |
code-mirror에 비해 업데이트도 자주되며, 번들 사이즈 또한 작기에 많은 기능이 필요치 않고 쉬운 커스텀이 가능한 monaco-editor를 선정하였다. |
code-mirror, monaco-editor |
| axios |
데이터 패칭을 할 때 손쉽게 middleware 기능을 사용할 수 있으며, fetch에 비해 적은 코드량을 통해 보일러 플레이트를 줄일 수 있기에 선정하였다. |
axios, fetch |
| github action |
손쉽게 배포 관리를 하기 위한 ci/cd 적용을 위해 선정하였다. |
|