웹 프론트엔드 디렉토리 구조 어떻게 가져가나요?

Question

3년차 서버 개발자입니다
반 년 전 부터 리액트 넥스트 시작 해서 공부 중 입니다

몇 개의 프로젝트를 해도 이거 컴포넌트 분할이 되게 힘들고 정리가 안되네요

서버는 뭐 DDD 헥사고날  MSA 등등 있지만 저는 경험에서
모든 것을 의존성 기준으로 도메인을 분리하고 이에 대한 트레이드 오프나 규칙같은 것도
리드할 수 있을 정도인데,,,,

프론트는 재사용성을 강조하는데 뭘 재사용하는 지도 모르겠고
UI랑 기능이랑 분리하기 힘든 것도 있고
많은 설계방식도 있는데 저한테는 과도하다 생각하고

프론트도 도메인 기준으로 나누는 FSD도 있지만
프론트 특성상 UI랑 기능이랑 분할이 되게 힘들어보이고
아무리봐도 프론트는 사용자 중심으로 가야할 거 같은데 어떻게 해야될지 모르겠네요..

포크코딩 · Answer

App router 기준으로 답변 드립니다. 확장 하기에도 좋은 형태입니다. theo의 t3를 많이 참고했습니다. https://create.t3.gg/

# 디렉토리 구성
/src
  - app : 앱 라우터 루트입니다.
    ~ (public)
    ~ (protected)
  - components
    ~ global: 전역으로 쓰이는 컴포넌트 모음(헤더, 푸터, 팝업 등)
    ~ providers: contextAPI Wrapper
    ~ forms: 폼 관련 UI, 복잡한 경우가 간혹 있어 form은 따로 구분
    ~ ui: 일반 재사용 UI, 외부 UI 라이브러리(shadcn, magic 등)
  - server: 서버에서 실행해야 하는 모든 것
    ~ db.ts
    ~ queries.ts
    ~ actions.ts
  - lib: 유틸리티 함수 모음
  - hooks: 커스텀 훅 모음
  - constants: 별도 상수 모음

# 컴포넌트 나누기

기본적인 원칙은 리액트 공식 홈페이지에 있는 Thinking in React(https://react.dev/learn/thinking-in-react)에 기반합니다.

쉽게 정리하자면
- jsx 마크업을 재사용 해야 하는가? > 컴포넌트 만들기
- react hook을 사용하지 않는 로직이 필요한가? > 유틸리티 함수 작성
- react hook을 사용하는 로직이 필여한가? > 커스텀훅 작성