프로젝트 디렉토리 구조

프로젝트 디렉토리 구조

프로젝트의 디렉토리 구조를 설계하는 가장 좋은 방법 혹은 정해진 틀은 없다.

어떻게 하면 생산성을 높일 수 있는지, 필요한 파일을 빨리 찾을 수 있는지에 고민하며 디렉토리를 구성하면 됨!

---

CRA 초기 폴더 구조

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
└── README.md

- node_modules

• 현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더
• 깃과 같은 저장소에 올리지 않음
• 해당 폴더가 없다면 npm install 혹은 yarn install을 해주면 됨

- public

• index.html과 같은 정적 파일이 포함되는 곳
• 컴파일이 필요 없는 파일들이 위치하는 폴더

- src

• 리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성
• 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됨

- .gitignore

• 깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더 등을 입력하는 파일

- package.json

• 프로젝트에 관련된 기본적인 내용 (프로젝트 이름, 버전 등)과 라이브러리들의 목록이 포함
• 프로젝트를 클론할 때 package.json에 적혀있는 라이브러리 목록을 기준으로 npm에서 설치

- README.md

• 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는 곳

src 내부 폴더 구조

각자 용도에 맞게 구조를 설계하면 됨

└─ src
 ├─ components
 ├─ assets
 │  └─ img
 │  └─ css
 │  └─ fonts
 ├─ hooks (= hoc)
 ├─ pages
 ├─ constants
 ├─ store
 ├─ contexts
 ├─ api (= services)
 ├─ utils
 ├─ App.js
 └─ index.js

- components

• 재사용 가능한 컴포넌트들이 위치하는 폴더
• 폴더 내부에서 하위폴더로 추가로 분류하는 경우가 많음

- assets

• 이미지 혹은 폰트와 같은 파일들이 저장되는 폴더
• 이미지와 같은 파일들을 public에 직접 넣는 경우도 있지만 컴파일시에 필요한 이미지들은 assets 폴더 내부에 위치시켜야 함
  • 컴포넌트 내부에서 사용하는 이미지의 경우 assets/img 폴더 내 위치
  • 파비콘과 같이 index.html 내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public 폴더에 위치
• css 파일들을 포함하는 폴더를 assets에 포함시켜도 되고, assets 폴더 외부에 위치시켜도 됨

- hooks

• 커스텀한 hook들을 모아둔 폴더

- pages (=routes)

• react router 등을 이용하여 라우팅을 적용할 때 페이지 컴포넌트들을 위치시킴
• 페이지의 컴포넌트의 경우 pages 폴더에서 관리
• 해당 페이지 내에서만 사용되는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음

- constants

• 공통적으로 사용되는 상수들을 정의한 파일들이 위치하는 폴더

- store

• redux과 같은 전역상태 관리 라이브러리 관련 파일들이 위치하는 폴더

- contexts

• contextAPI를 사용할 때 관련 파일들이 위치하는 폴더

- api (=services)

• api 관련 로직의 모듈 파일이 위치
• auth와 같이 인증과 관련된 파일이 포함되기도 함

- utils

• 정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일들이 위치하는 폴더

---

참고사이트

• [React] 리액트의 폴더 구조
• [react] 리액트 프로젝트의 폴더구조

• [React

  리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?](https://velog.io/@_seeul/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%A7%84%ED%96%89%ED%95%A0%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%9E%A1%EB%8A%94%EA%B2%83%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C#%EA%B0%81-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EA%B5%AC%EC%84%B1-)