[React] 디렉토리 구조

📂 public
 ┗ index.html
📂 src
 ┣ 📂 apis
 ┣ 📂 assets
 ┣ 📂 components
 ┣ 📂 dto
 ┣ 📂 states
 ┣ 📂 styles
 ┣ 📂 hooks
 ┣ 📂 pages
 ┣ 📂 utils
 ┣ App.js
 ┗ index.js

🎈 이름을 수정하면 안되는 파일

1. public/index.html : 페이지 템플릿
2. src/index.js : 자바스크립트 시작점

🎈 전체 디렉토리

🔰 public 폴더

public 폴더에 있는 파일만 index.html 에서 사용할 수 있다.
컴파일이 필요없는 정적 파일을 포함

🔰 src 폴더

Webpack은 src 폴더 내부의 파일들만 처리(압축)한다
JS 파일과 CSS 파일을 src 넣으면 됨

🔰 package.json 파일

프로젝트에 대한 정보를 포함

• 프로젝트 이름, 버전, 필요한 라이브러리
• 앱 시작/빌드/테스트 시 사용할 스크립트를 명시
  • 자주 실행해야 하는 명령어를 scripts에 작성해두면 npm 명령어로 실행 가능

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}

-> npm run start 입력 시 react-scripts start 가 실행

🔰 그외

• /node_modules : 라이브러리가 설치된 폴더 (git에 업로드 X)
• README.md
• gitignore

🎈 src 폴더 내부

• 📂 apis (services)
  API 호출 관련 모듈

• 📂 assets
  이미지, 로고, 폰트 등 정적 자원
  컴파일 단계에서 필요한 파일, 컴포넌트 내부에서 사용하는 파일은
  public 폴더가 아니라 assets 로 와야함

• 📂 components
  여러 페이지에서 동시에 사용하는 컴포넌트들을 관리
  ex) Header, Footer, Navigation bar 등

• 📂 states (redux, stores)
  상태 관리 정보들
  리덕스 사용 시 store에 모든 상태를 저장하고 관리한다.

• 📂 styles
  css 스타일 관련 파일들

• 📂 hooks
  커스텀 훅 모듈들

• 📂 pages
  특정 페이지에서 사용되는 컴포넌트 관리
  여러 페이지에서 사용되는 컴포넌트는 components 에서 관리

• 📂 utils
  상수, 범용적인 함수
  숫자/날짜 변환, 문자열 처리, 정규표현식 등 공통적으로 쓰이는 함수