프로젝트 디렉토리 구조

개요

1. 프런트앤드 프로젝트에 적용하기 위한 폴더 구조이다.
2. 컴포넌트 디렉토리는 아토믹 디자인 패턴 Atomic Design Pattern 을 따른다.
3. 각 디렉토리에는 index.ts 파일을 두어 컴포넌트에서 디렉토리명으로 참조할 수 있도록 한다.
   • index.ts 샘플

     index.ts

     export * from './atoms'
     export * from './molecules'

   • 컴포넌트 임포트

     import {Button, ChatbotInput, Modal} from '@/components'

4. 위에서처럼 사용하기 위해서는 컴포넌트 정의시 default export 구문을 사용하지 않고 각각의 컴포넌트 앞에 export 구문을 달아 주어야 한다.
   • 옳은 사용 예

     export const PageChatbot = () => {
        const navigate = useNavigate()
        const [statusDisplay, setStatusDisplay] = useState<boolean>(true)
        ...
     }

5. index.ts 파일에 타입이나 컴포넌트 및 비지니스 로직과 관련된 코드를 선언해서 사용할 수 없다.

디렉토리 구조

• Directorysrc

  • Directoryassets/

    • …
  • Directorycomponents/

    • Directoryatoms/

      • index.ts
    • Directorymolecules/

      • index.ts
    • Directoryorganisms/

      • index.ts
    • Directorytemplates/

      • index.ts
    • index.ts
  • Directoryhooks/

    • Directoryapi/

      • index.ts
    • Directorystore/

      • index.ts
    • index.ts
  • Directorypages/

    • Directory(menu)/

      • Directory(sub_menu)/

        • Directorycomponents/

          • index.ts
        • index.ts
      • index.ts
    • index.ts
  • Directoryroutes/

    • index.ts
  • Directorytypes/

    • Directoryapi/

      • index.ts
    • index.ts
  • Directoryutils/

    • index.ts

1. 어셋 디렉토리 (src/assets)

   1. 프로젝트에서 사용되는 이미지, 폰트, JSON 등과 같은 정적 파일들이 위치하는 공간

2. 컴포넌트 디렉토리 (src/components)

   1. components/atoms (원자)
      • 최소 단위 컴포넌트
   2. components/molecules (분자)
      • atoms 컴포넌트의 조합으로 구성된 컴포넌트
   3. components/organisms (유기체)
      • atoms 컴포넌트와 molecules 컴포넌트의 조합으로 구성된 컴포넌트
   4. components/templates (템플릿)
      • 레이아웃/메뉴 컴포넌트가 위치하는 공간
      • 데모 페이지가 위치하는 공간

3. 커스텀 훅 디렉토리 (src/hooks)

   1. hooks
      • 커스텀 훅 파일이 위치하는 공간
   2. hooks/api
      • 백앤드 연계를 위한 커스텀 훅 파일이 위치하는 공간
      • 하위 디렉토리는 프로젝트의 메뉴 구분과 동일하게 구성된다.
   3. hooks/store
      • 스토어 용도의 커스텀 훅 파일이 위치하는 공간

4. 페이지 디렉토리 (src/pages)

   1. pages
      • 페이지 컴포넌트가 위치하는 공간
      • 하위 디렉토리는 프로젝트의 메뉴 구분과 동일하게 구성된다.
   2. pages/(menu)
      • 메뉴ID 또는 메뉴명을 디렉토리명으로 가진다.
      • 메뉴 단위의 페이지 컴포넌트가 위치하는 공간
      • 서브 메뉴가 있는 경우 서브 메뉴에 대한 디렉토리를 가질 수 있다.
   3. pages/(menu)/(submenu)
      • 서브 메뉴ID 또는 서브 메뉴명을 디렉토리명으로 가진다.
      • 서브 메뉴 단위의 페이지 컴포넌트가 위치하는 공간
      • 서브 메뉴가 없는 경우 정의하지 않아도 된다.
   4. pages/(menu)/(submenu)/components
      • 페이지 컴포넌트가 여러개의 하위 컴포넌트로 구성된 경우 하위 컴포넌트가 위치하는 공간

5. 라우트 디렉토리 (src/routes)

   1. SPA Single Page Application에서 사용되는 URL 기반의 라우팅 설정이 위치하는 공간.

6. 타입 정의 디렉토리 (src/types)

   1. types
      • 공통 타입 설정이 위치하는 공간
   2. types/api
      • 백앤드 연계를 위한 타입 설정이 위치하는 공간
      • 하위 디렉토리는 프로젝트의 메뉴 구분과 동일하게 구성된다.

7. 함수 디렉토리 (src/utils)

   1. 공통으로 사용되는 함수가 위치하는 공간