Skip to content

디렉토리 구조 [FE]

Juyoung edited this page Nov 27, 2021 · 2 revisions

Front-end 디렉토리 구조

📦client
 ┣ 📂public             # 정적 파일
 ┣ 📂src
 ┃ ┣ 📂assets           # 이미지, 아이콘
 ┃ ┣ 📂atoms            # 전역 상태 관리(Recoil) 파일
 ┃ ┣ 📂components       # 리액트 컴포넌트
 ┃ ┣ 📂constants        # 상수 파일
 ┃ ┣ 📂pages            # 페이지
 ┃ ┣ 📂styles           # 프로젝트 스타일 관련
 ┃ ┣ 📂utils            # 유틸 함수
 ┃ ┣ 📜App.tsx          # 기본 페이지 (라우팅)
 ┃ ┣ 📜index.tsx        # 리액트 렌더링 파일
 ┣ 📜.eslintrc.ts       # eslint 설정 파일
 ┣ 📜.prettierrc        # prettier 설정 파일
 ┣ 📜tsconfig.json      # 타입스크립트 설정 파일
  • 공통 컴포넌트는 components 디렉토리 하위의 common 폴더 내에 있습니다.
  • 각 페이지에서만 사용되는 컴포넌트는 components 디렉토리 하위의 각 페이지명에 해당하는 폴더 내에 있습니다.
  • ex) src/components/Main, src/components/MentorList
  • 아이콘 컴포넌트는 'components디렉토리 하위의icon` 폴더 내에 있습니다.