Here is How to Structure Your Project the RIGHT Way
- 기존 프로젝트 구조의 문제점: 모든 컴포넌트와 액션이 하나의 폴더에 섞여 있어 확장성이 떨어짐 🗂️
- 기능 기반 아키텍처(Feature-based Architecture)의 도입: 각 기능별로 데이터, 컴포넌트, 유틸리티, 라우트를 그룹화하여 코드의 응집력을 높임 🧩
- 라우트 그룹(Route Groups) 활용: 폴더를 괄호로 묶어 라우트 URL에 포함되지 않도록 조직화하여 마케팅 페이지와 같은 특정 목적의 라우트를 관리 📁
- 전역 컴포넌트(Global Components) 폴더: 여러 곳에서 재사용되는 컴포넌트를 저장하여 코드 중복을 줄이고 유지보수성을 향상 🌐
- 데이터 접근 계층(Data Access Layer) 분리: 쿼리 로직을 별도의 파일에 저장하여 UI 레이어와 비즈니스 로직을 분리하고 권한 검사를 용이하게 함 🛡️
- 기능(Feature)의 정의: 결제, 사용자, 주문 등과 같이 독립적인 역할을 수행하는 코드 묶음 🏷️
- 높은 응집도와 낮은 결합도: 기능 내에서는 높은 응집도를 유지하고 기능 간에는 낮은 결합도를 유지하여 코드의 독립성을 확보 🔗
- 언더스코어(_)를 이용한 private 폴더 생성: 라우팅 시스템에서 제외해야 하는 폴더를 명시적으로 구분하여 관리 🙈
- 서버 컴포넌트에서의 데이터 패칭: 서버 컴포넌트에서 데이터를 패칭하되, 쿼리 로직은 별도의 파일에 정의하여 관리 🖥️
- Next.js 팀의 권장 사항: 데이터 접근 계층을 분리하여 데이터 패칭 방식과 시기를 제어하고 권한 검사를 수행할 것을 권장 💡