라이브러리
React
- Vue는 실제 DOM에 직접 업데이트하지만, React는 가상 DOM을 사용하여 실제 DOM을 업데이트하는 비용을 줄인다.
- React는 전 세계적으로 가장 큰 커뮤니티를 가지고 있기에, React에 대한 자료 및 오픈소스가 풍부하여 쉽고 빠르게 학습하고, 활용할 수 있다.
언어
Typescript
- 코드를 실행하기 전에 타입 검사를 하여 오류를 발견할 수 있어 개발 시간을 단축시키고, 버그를 방지할 수 있다.
- 타입을 명시적으로 지정하여 코드의 가독성을 높여 개발 협업을 용이하게 만든다.
번들러
Vite
- 브라우저가 모듈을 동적으로 로드할 수 있는 ESM(EsmaScript Module)을 사용하여 빠른 빌드가 가능하다. (Webpack은 정적 빌드)
- 설정이 매우 간단하여 빌드 설정에 많은 시간을 투자할 필요가 없다.
CSS
Emotion Styled
- CSS-in-JS로서 CSS를 JS로 작성하고 하나의 코드베이스에서 관리할 수 있어 개발생산성과 유지보수성을 향상시킬 수 있다.
- 컴포넌트 기반 스타일링이 가능하여 코드의 재사용성을 높일 수 있다.
비동기 처리
Axios
- HTTP 통신 라이브러리로 XMLHttpRequest 객체에 GET, POST, PUT, DELETE 등의 HTTP 요청 및 쿠키, 헤더, 캐싱과 같은 다양한 추가적인 기능을 제공하여 HTTP 통신을 보다 쉽게 할 수 있다.
상태관리
Recoil
- useState와 비슷하게 동작하며 직관적이고 간단한 구조를 가지고 있다.
- 비동기 처리시 Redux와 다르게 미들웨어를 사용할 필요없이 내장되어 있는 Selector을 사용하여 쉽게 처리할 수 있다.
- 대규모 프로젝트에서 상태를 관리할 때는 디버깅이 안정적인 Redux를 이용하면 좋겠지만, 짧은 기간의 프로젝트인 만큼 러닝커브가 높은 Recoil이 낫다고 생각된다.
패키지 관리자
npm
- npm과 yarn 사이에 큰 차이가 없기에 평소에 익숙하게 사용하였던 npm을 선택.