기술 스택 선정

Yarn Berry

Yarn Berry를 선택한 이유는 빠른 패키지 설치 속도와 Zero-Install 기능을 통해 의존성 설치 없이 바로 작업을 시작할 수 있기 때문임. 또한, Plug'n'Play 방식으로 node_modules 없이 디스크 공간을 절약하고 의존성 충돌을 줄임.

Vite

Vite는 빠른 빌드 속도와 핫 모듈 교체(HMR) 성능을 제공하며, ES Modules(ESM)을 활용해 필요한 모듈만 동적으로 로딩하여 개발 서버 구동 시간을 획기적으로 단축시킴. 또한, 프로덕션에서는 효율적인 트리 셰이킹과 청크 분할을 통해 최적화된 성능을 제공함. 이로 인해 Vite를 사용하면 개발 속도와 효율성이 크게 향상됨.

React

프로젝트 완성 목표가 1월 29일부터 2월 말 또는 3월까지인 만큼, 속도를 고려하여 기존에 사용해본 경험이 있는 React를 선택했음. 추가적으로 현재로서는 Next.js를 사용해야 하는 명확한 이유를 찾지 못했기 때문에, React로 먼저 진행하는 것이 더 효율적이라고 판단함

SCSS

지금까지 프로젝트에서는 유틸리티 클래스 기반의 Tailwind를 사용하여 스타일을 적용했으나, 이번에는 좀 더 전통적인 스타일링 방식을 사용해보기로 했음. 특히 SASS는 CSS의 확장된 기능을 제공하는데, 변수, 믹스인, 함수 등을 활용하여 스타일의 일관성을 유지하고 중복을 줄이는 데 유리함

TypeScript

TypeScript는 코드의 안정성과 유지보수성을 높이는 데 중요한 역할을 함. 정적 타입 검사를 통해 개발 과정에서 발생할 수 있는 오류를 미리 잡아낼 수 있어, 프로젝트에서의 안정성을 확보할 수 있음.

TanStack-Query

서버 상태 관리에 매우 유용한 라이브러리임. RESTful API와 함께 사용할 때 비동기 데이터 fetching, 캐싱, 동기화 등을 간단하게 처리할 수 있으며, 특히 서버 상태가 복잡한 애플리케이션에서 효율적인 상태 관리와 최적화를 지원함. 이를 통해 불필요한 리렌더링을 최소화하고, 데이터 요청을 보다 효율적으로 관리할 수 있음.

Prettier, ESLint

Prettier는 코드 포매팅을 자동으로 해주어 일관된 코드 스타일을 유지하고, ESLint는 코드 품질 검사를 통해 오류나 문제를 사전에 방지할 수 있도록 도와줌. Prettier와 ESLint를 함께 사용하면, 코드 스타일의 일관성을 유지하면서 코드 품질을 높이고, 협업 시 발생할 수 있는 코드 스타일 차이를 줄일 수 있음. 또한, 개발 과정에서 발생할 수 있는 실수를 예방하는 데 유용함.

---

FSD (Feature-Sliced Design) 패턴

프로젝트 구조를 체계적으로 관리하고 유지보수성을 높이기 위함임. 도메인 중심 설계를 적용하여 컴포넌트 간 결합도를 낮추고 재사용성을 극대화하며, 모듈의 확장성을 강화할 수 있음. 이를 통해 프로젝트 규모가 커질수록 발생할 수 있는 코드 복잡도를 줄임

React Hook Form