Front-End/React

리액트 초기 파일 및 폴더 정리

리리히히 2025. 2. 4. 21:00
반응형

 
 

 
 
정말이지 티스토리에 리액트 파일, 폴더 정리하는 것만 몇 번 썼을지 모르겠다.
물론 지금 다 비공개 상태지만 ㅎㅎ
이번 기회에 확실하게 공부하지 뭐,,,ㅎㅎ
 

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── (기타 등등...)
└── src
    ├── App.tsx
    ├── assets
    ├── components
    ├── index.tsx
    ├── pages
    └── styles

리액트 프로젝트를 생성하면 자동으로 위와 같은 폴더 및 파일 구조가 생성된다.
(임의로 생략한 파일 및 폴더도 있다.)
 

📍 폴더에 대한 간단 설명

☑️ 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. "sciprts"
- 리액트 프로젝트에서 사용되는 명령어
 
- npm start
개발 모드에서 React 애플리케이션을 실행
로컬 개발 서버를 시작하여 애플리케이션을 브라우저에서 확인
코드 변경시 자동으로 브라우저를 새로고침하여 변경사항을 즉시 반영
 
- npm build
최적화된 빌드 : 코드를 최소화 하고 최적화하여 성능을 향상
정적 파일 생성 : HTML, CSS, jacascript 파일을 생성하여 build 디렉토리에 저장
파일 해싱 : 생성된 파일 이름에 고유한 해시를 추가하여 캐싱을 최적화 함
 
- npm test
React 프로젝트에서 단위 테스트를 실행하는데 사용
 
 
☑️ gitignore

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

 

📍 나의 폴더 구조

프로젝트를 진행하다 보면 바뀔수도 있겠지만 일단 나는 아래와 같이 폴더와 파일을 정리해 주었다.
 
 
 

 
파일은 App.tsx와 index.tsx파일만 놔두고 모두 삭제해주었다.
 
 

├── package-lock.json
├── package.json
├── .gitignore
├── README.md
└── src
    ├── assets
    ├── components
    ├── pages
    ├── styles
    ├── App.tsx
    └── index.tsx

 
 
tree 구조로 확인하면 위와 같다.
 
 
☑️ 폴더별 설명

  • assets
    - 이미지, 폰트 등 정적인 파일 저장
  • components
    - 재사용이 가능한 UI컴포넌트를 저장, 기능별로 폴더를 구분할 수 있음
  • pages
    - 라우팅 되는 페이지를 저장
  • styles
    - 스타일 관련 설정을 저장

 
☑️ 주의

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