Tech Stack - dnd-side-project/dnd-8th-1-frontend GitHub Wiki

🛠️ Tech Stack

코드의 문서화 관점
- 컴포넌트의 interface 에 대한 문서화가 될 수 있다.
백엔드랑 협업 시 API 명세를 type으로 정의해놓음으로써, 해당 API 명세에 연관되는 컴포넌트를 용이하게 사용할 수 있다.
- 해당 타입을 미리 정의해놓고, 타입스크립트의 유틸리티 타입을 이용하여 해당 타입의 재사용성을 높일 수 있다.
컴파일 타임에 코드 오류를 잡을 수 있고, 타입 체킹을 지원함으로써 코드를 작성할 때 실수할 수 있는 가능성을 줄여준다.

Framework 관점에서의 개발자 경험 향상
- 파일 시스템 기반 routing 등을 지원함으로써, 개발자 끼리 정해야할 boiler plate의 수가 줄어들게 되고 개발자 경험 향상과 함께 해당 부분에서 실수 가능성을 줄일 수 있다.
SEO의 필요성
- 우리 프로젝트의 경우 홍보가 중요하기 때문에 SEO의 대한 관리가 필요하다고 생각했으며, Next.js의 서버 사이드 렌더링을 유리하게 활용 가능하다고 판단했다.

간결하며 쉬운 상태 관리
- useState 처럼 useSetRecoilState, useRecoilValue, useRecoilState와 같이 hooks의 관점에서 사용할 수 있기 때문에 간결하며 보다 쉬운 상태 관리가 가능하다.
프로젝트의 성격 고려
- 모바일 앱과 비슷한 UI 에서 모달과 같은 전역적인 UI 상태가 많이 사용될 것이라고 예상되기 때문에 전역 상태 라이브러리를 고려하게 되었으며 그 중 Recoil을 생각하게 되었다.

서버 상태 & 클라이언트 상태의 분리
- 서버 관련 데이터에 대해 React Query 에서 모두 처리 될 수 있도록 설계 되었기 때문에 기존 클라이언트 상태와 서버 상태의 분리가 가능하다.
데이터 캐싱을 통한 서버 부담의 감소
- React Query는 기본적으로 데이터를 fetching 해온 후 캐싱 하게 되며, 해당 데이터가 stale 하다고 판단될 때 데이터를 refetching 해오게 된다.
에러 핸들링의 중앙화
- defaultOptions & queries 프로퍼티를 통해 공통적인 Success & Error handling이 가능하기 때문에 코드 중복을 최소화 할 수 다.
편리한 디버깅
- 확인하고자 하는 모든 쿼리 캐시의 데이터 상태(fresh, stale 등)를 확인이 가능하다.
- query details, Actions, Data explorer, query explorer 등의 옵션들을 제공한다.

Utility Class
- Utility Class를 사용하기 때문에, CSS 의 재 사용성을 극대화할 수 있으며 잘 만들어진 css를 사용함으로써 일관된 UI를 쉽게 구축 가능하다.
Optimizing for Production
- 프로덕션 용으로 빌드 할 때 사용하지 않는 모든 CSS를 자동으로 제거함으로써 성능적인 이점을 볼 수 있다.

ci/cd
- vercel에서 ci/cd를 위한 툴을 지원해줌으로써 production 환경에서 테스트가 가능 하다.
- 코드 리뷰 시 production과 환경의 ci/cd를 통해 코드 리뷰 시 컴포넌트에 대한 동작 테스트를 용이하게 할 수 있다.