React + TS + Vite emotion(styled) + axios + npm + (react-query) + (recoil) + vercel + eslint + prettier (Vite 기본 세팅 최대한 써먹자!) + slack + notion + discord + figma 컴포넌트 분리
기술스택
- 언어 - TypScript
- 팀 프로젝트에서 타입스크립트는 코드 안정성과 가독성을 높이며, 협업에서 일관성을 유지할 수 있다. IDE 지원과 자동 완성으로 개발 생산성을 향상시키며, 버그를 사전에 방지하여 유지 보수성을 향상시킬 수 있다.
- 라이브러리 - React
- 뷰와 리액트 중에 리액트를 선택한 이유는 일차적으로 뷰는 프레임워크이고 리액트는 라이브러리이다. 따라서 리액트는 js 문법을 응용해서 개발자가 자유롭게 개발 할 수 있지만 뷰는 뷰의 문법으로만 개발이 가능하다는 점에서 js문법에 익숙한 리액트를 선택했다.
- 또한 TS와 결합이 좋고, 컴포넌트 분리와 재사용 측면에서 리액트가 효율성이 더 좋다.
- 상태관리 - Recoil
- React 전용 상태관리 라이브러리로 코드의 복잡성을 낮추고 유지 보수를 간편하게 만들어준다.
- 프로젝트에 비동기 데이터를 처리가 많아서 유용하다고 생각했고, 상태 업데이트를 처리하는 데 필요한 보일러플레이트 코드가 없어(recoil 디렉토리만 필요) 코드 작성 시간을 절약할 수 있다.
- 사용하는 방법도 hooks 기반으로 매우 간단하며 React스럽기 때문에 러닝커브가 낮다는 장점이 있다.
- HTTP 클라이언트 라이브러리 - Axios
- 간단하고 직관적인 API로 HTTP 요청 관리가 용이하고 브라우저와 서버에서 호환되며 JSON을 자동으로 파싱해준다.
- Promise 기반 비동기 처리와 강력한 에러 처리로 안정성과 개발 생산성 향상시킬 수 있다.
- React Query
- 프로젝트에 쓰이는 데이터들을 가져오거나 업데이트, 삭제 및 캐싱 관련된 작업을 효과적으로 처리할 수 있다.
- hook 기반의 로직들로 되어있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다.
- 스타일링 - Emotion
- css-in-cs 보다 css-in-js를 선택한 이유 js를 사용하여 동적으로 스타일링이 가능하고, 컴포넌트 스코프 내에서 캡슐화되어 다른 컴포넌트에 영향을 미치지 않는다. 또한 ts와 함께 사용했을 때 타입 안정성도 제공된다.
- styled-component vs Emotion 중 Emotion을 선택한 이유는 css prop 기능으로 inline style과 유사하게 작성되지만, class로 변환되어 스타일링이 적용된다.
- 번들러 - Vite
- 빠른 개발환경 구성과 빠른 개발 서버를 제공해준다.
- 패키지 매니저 - Npm
- npm과 yarn 사이의 성능이나 보안 차이가 이제는 그리 크지 않다고 하기 때문에, 생태계가 큰 npm을 선택했다.
- 포맷팅 - Eslint, Prettier
- 디자인 - Figma
- 배포 - Vercel(?)
- 협업툴 - Slack, Notion Github, Discord