[React] 폴더 구조 Folder Structure

https://create-react-app.dev/docs/folder-structure

Folder Structure | Create React App

초기 폴더 및 파일 

yarn, npx, npm등을 통해 Create react-app을 설치하면, 아래와 같이 폴더 및 파일이 생성된다. 

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

 

이 상태에서 프로젝트를 빌드하면 아래와 같은 파일 이름을 가진 파일들이 존재할 것이다. 

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

 

기본 디렉토리들

node_modules 

• 유용한 기능들인 노드 모듈을 모아놓은 곳 
• 별도로 설치하지 않아도 create-react-app이 기본적으로 설치한 모듈들이 있다. 

src :

• js 와 css파일을 여기에 위치시켜 webpack에 의한 빌드를 실행할 수 있게한다. 
• webpack이 스캔하고 처리하는 파일들을 모아놓은 곳이다. 
• 서브디렉토리를 만들거나 파일을 추가할 수 있다.

public : 

• public/index.html(페이지 템플릿)이 사용할 수 있는 파일들을 위치시킨다. 
• 이미지, 웹크롤링을 위한 robot.txt등이 위치해있다.

 

기본 파일들 

.gitignore : 깃에 커밋을 하지 않도록 지정(build나 보안적인 프로퍼티는 꼭 여기 추가 )

README.md: 프로젝트 설명하는 markdown페이지

package.json: 의존성 설정 (명령어를 통해 자동으로 추가, 수정가능)