[React clone coding] #5. 리액트 프로젝트 기본 폴더 및 구조는 어떻게 짜는 것이 좋을까?

 

 

 

✅ 폴더는 크게 node_modules / public / src로 나뉜다.

리액트 프로젝트를 처음 생성했을 때의 폴더구조는 대략 이렇다.

 

 

 

📍 node_modules

• 패키지 코드가 존재하는 폴더 

 

📍 public

• 가상 DOM을 구성하는 index.html 파일이 들어있다.
• 이 폴더의 index.html은 마치 알맹이가 없는 껍데기와 같은 파일이랄까...?
• 실제 서버에 배포가 되는 폴더

 

 

📍 src

• index.js(typescript의 경우에는 index.tsx) 파일이 들어있는 폴더 
• index.js 파일은 React 애플리케이션의 중심이며, 애플리케이션을 실제 DOM에 렌더링하는 역할을 함.

 

✅ 폴더 이외의 파일

 

📍 package-lock.json

• 작업자가 따로 관리할 필요가 없다. (npm 또는 yarn이 자동으로 관리)
• 해당 프로젝트에서 설치판 패키지 정보(버전 등)들이 기록되어있다.

📍 package.json

• CRA 초기 패키지 이외에 추가로 설치된 패키지(또는 라이브러리)의 정보와 버전이 기록되는 파일

 

1. "dependencies"
   - 해당 리액트 프로젝트에서 사용 되는 모든 패키지 리스트 목록 및 버전
   - 해당 파일들은 node_modules 폴더에 존재
   
   
2. "scripts"
   - 리액트 프로젝트에서 사용되는 명령어
   
   - npm start
   개발 모드에서 React 애플리케이션을 실행
   로컬 개발 서버를 시작하여 애플리케이션을 브라우저에서 확인
   코드 변경 시 자동으로 브라우저를 새로고침하여 변경 사항을 즉시 반영
   
   - npm build
   최적화된 빌드: 코드를 최소화하고 최적화하여 성능을 향상시킵니다
   정적 파일 생성: HTML, CSS, JavaScript 파일을 생성하여 build 디렉토리에 저장
   파일 해싱: 생성된 파일 이름에 고유한 해시를 추가하여 캐싱을 최적화합니다
   
   - npm test
   React 프로젝트에서 단위 테스트를 실행하는 데 사용

 

📍 gitignore

• git에 커밋할때 제외시키고 싶은 파일을 작성할 수 있다.
• push 할 때, 해당 파일에 적어 놓은 파일 목록은 git 레파지토리에 커밋되지 않는다.

 

 

✅ 프로젝트를 할때의 기본적인 폴더 구조

src/
  ├── assets/
  ├── components/
  ├── hooks/
  ├── pages/
  ├── services/
  ├── styles/
  ├── utils/
  ├── App.js
  └── index.js

 

• assets
  - 이미지, 폰트 등 정적인 파일을 저장
• components
  - 재사용이 가능한 UI컴포넌트를 저장, 기능별로 폴더를 구분할 수 있음
• hooks
  - 커스텀 훅 저장, 
• pages
  - 라우팅 되는 페이지를 저장
• services
  - API 호출 등 외부 서비스와의 통신을 담당하는 코드를 저장
• styles
  - 스타일 관련 설정을 저장
• utils
  - 유틸리티 함수들을 저장

 

✅ 주의

• 폴더 구조를 깊게 만들지 않는다. (평평한 구조 유지)
• 컴포넌트, 함수, 변수 등의 이름들은 공통된 네이밍 규칙을 따른다 (ex. 컴포넌트는 PascalCase, 함수와 변수는 camelCase)

 

파일 구조 – React