Vite |
Vite는 React앱을 개발하기 위한 빌드도구로서, ES모듈을 통한 빠른 bundling, 빠른 HMR, Rollup을 통한 최적화된 프로덕션 빌드를 제공합니다. |
옛 CRA는 deprecated되어 React공식에서도 추천하지 않는 방식이며, node_modules의 용량이 크고, Webpack을 사용하기에 bundling의 속도가 느린 단점이 있습니다. |
|
axios |
API서버와 통신하기 위한 선택지로는 fetch와 axios가 있습니다. |
JS 내장 Fetch보다 Axios를 사용한 이유는 다음과 같습니다. |
|
1. 자동 JSON변환 : Axios는 요청/응답 데이터를 JSON으로 자동변환해줍니다. |
|
2. interceptor : Axios Interceptor기능을 통해, 요청/응답의 공통처리가 가능합니다. |
|
3. 간결한 에러처리 : Fetch의 오류는 네트워크 장애만 처리해주기에, 3xx, 4xx오류를 별도처리하는 코드작성이 필요합니다. 하지만 Axios는 2xx범위 외의 http상태코드를 오류로 인식하기 때문에, 오류처리를 간결하게 작성할 수 있습니다. |
|
Tanstack Query |
Tanstack Query는 서버와의 비동기 데이터를 관리하기 위한 라이브러리입니다. |
1. 자동캐싱 : 서버에게 전달받은 데이터를 캐싱처리하기 때문에, 일정시간 동안 캐싱된 데이터를 사용하거나, 새로운 비동기데이터를 받아올 때까지 사용자에게 이전 데이터를 보여줌으로 UX를 향상시킬 수 있습니다. |
|
2. React Suspense와의 궁합 : Suspense는 하위 컴포넌트의 Promise를 Catch하여 LoadingFallbackUI를 보여줍니다. Suspense를 활성화하기 위해서는 Promise를 Throw해주어야 하는데, useSuspenseQuery는 이를 가능하게 합니다. 이로써, 선언형 코드작성이 가능합니다. |
|
3. 낙관적 업데이트 : setQueryData함수를 통해 서버의 변경사항을 UI에 미리 반영함으로써, 서버에서 새로운 데이터를 받아올 때까지의 기다림을 개선할 수 있습니다. |
|
Zustand |
Zustand는 클라이언트 상태관리를 위한 라이브러리로써, 아래와 같은 특징으로 선택하게 되었습니다. |
1. 가벼운 사이즈 : zustand는 Redux, Recoil에 비해 가벼운 파일사이즈를 가지고 있습니다. 이는 프로덕션의 빌드 사이즈를 줄일 수 있는 요소가 됩니다. |
|
2. npm trends : redux, recoil, zustand 등 다양한 라이브러리 중 zustand의 사용량이 가파르게 떠오르고 있고, 업데이트 주기 또한 1달내외입니다. 이처럼, 업데이트 주기, 트렌드는 라이브러리의 선택에 중요하게 작용합니다. |
|
3. 간결한 코드 : Provider설정이 필요없으며, use문법으로 함수형 프로그래밍에서 익숙한 코드작성이 가능합니다. 다만, 비즈니스 로직과 같이 복잡한 코드작성에는 어려움이 있어 Redux와 같이 많은 로직을 담을 수는 없지만, Tanstack Query로 서버데이터를 분리하기에 가벼운 클라이언트 상태관리 라이브러리를 선택했습니다. |
|
Styled-Components |
컴포넌트를 스타일링하기 위한 라이브러리로, Styled-components를 선택한 이유는 다음과 같습니다. |
1. props의 전달로 유동적인 CSS : styled는 CSS in JS형태로, props를 전달받아 분기적인 CSS처리가 가능합니다. |
|
2. element속성 사용 : tailwind로 스타일된 컴포넌트를 작성한다면, onClick과 같은 element의 속성을 사용하기 위해, props를 계속해서 추가해야 하는 번거로움이 있습니다. styled는 element의 속성을 유지하면서도 컴포넌트 스타일 작성이 가능합니다. |
|
3. S-DOT패턴 : Styled-Components를 도입하면서, S. 으로 표기하는 컴포넌트 방법이 개발의 생산성이 좋았기 때문입니다. 컴포넌트를 import하기 위해서는 컴포넌트의 이름을 기억하고 있어야 하는데, S 선언만 해준다면 . 으로 컴포넌트의 이름을 유추할 수 있었습니다. (S.div.Styled) |
|
react-hook-form |
form의 validation을 편리하게 조작하기 위해 react-hook-form을 도입했습니다. |
AWS(Amplify) |
API서버가 AWS의 EC2로 배포되기에, 프론트 서버 또한 AWS에서 배포하는 것이 자원관리의 Contact 포인트를 줄이고, 프로젝트 관리의 효율성을 높인다고 생각했습니다. |
그렇기에 Vercel같이 다른 서비스 대신 AWS를 선택하였고, 인프라 관리 대신 개발에 집중할 수 있도록 간편한 서버 설정, CI/CD기능, 자동 스케일링 기능을 제공해주는 Amplify를 선택했습니다. |
|
|
|
마크다운 편집기 |
react-mde : 경량 번들 사이즈, 이미지 업로드 지원, 3년 전 지원이 마지막 |
toast-ui/editor : 1MB가량의 번들사이즈, 이미지 업로드 지원, 1년 전 지원이 마지막 |
|