FE 디렉터리 구조 설정

[chasj0326]

FE 회의 중, 디렉터리 관리 전략에 대한 기록입니다.
확정 시 Docs 로 이사할 예정입니다!
이사가기 전까지 의견을 자유롭게 커멘트에 추가해도 좋아요 !

디렉터리 관리 방법

• 유사한 도메인을 가진 코드끼리 응집도를 높이고, 모듈 import 경로가 길어지는 것을 방지하기 위한 방법입니다.

• src 폴더 내에 최상위 폴더로 위치해야 하는 폴더의 조건은 다음과 같습니다.

  • 페이지 : search, user, room, mybird ...

  • 로직과 하위 컴포넌트가 존재하는 공통 컴포넌트

• 모든 도메인 및 페이지에서 필수적으로 공유되어야 하는 파일은 src/core 에 저장합니다. (api, routes, styles, store)

• 공통 컴포넌트들은 src/shared 에 저장합니다.

• core 폴더를 제외한 src 하위 폴더들 (페이지 폴더들, shared .. ) 은 다음과 같은 하위 폴더를 가질 수 있습니다.

  • hooks, components, types, utils, constants, styles

디렉터리 구조 예시

• core
  • api
  • store
  • routes
  • styles
  • hooks
  • types
• pages
  • Room.tsx
  • MyBird.tsx
• shared
  • modal
    • index.tsx
    • modal.stories.tsx
    • components
    • hooks
• [domain]
  • components
  • utils
  • hooks
  • …