React 프로젝트 폴더 설명

React typescripts 프로젝트 생성

$ npx create-react-app reactbasic --template typescripts

React directory structure

└── ReactBasic/
    ├── node_modules/
    ├── public/
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo.512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src/
    │   ├── App.css
    │   ├── App.text.tsx
    │   ├── App.tsx
    │   ├── index.css
    │   ├── index.tsx
    │   ├── logo.svg
    │   ├── react-app-env.d.ts
    │   ├── reportWebVitals.ts
    │   └── setupTests.ts
    ├── .gitignore
    ├── package-lock.js
    ├── package.json/
    ├── README.md/
    └── tsconfig.json

node_modules

• CRA구성하는 모든 패키지 소스코드가 존재하는 폴더

public

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

src

• 리액트 내부에서 작성하는 거의 모든 파일들이 포함되는 위치
• 컴파일이 필요없는 파일들이 위치하는 폴더

.gitignore

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

package.json

• CRA 기본패키지의 외 추가설치 된 라이브러리 패키지 정보(종류, 버전)가 기록되는 파일
• 모든 프로젝트마다 package.json이 하나씩 존재함
• 라이브러리가 설치된 node_modules대신 package.json에 적혀있는 라이브러리 목록을 기준으로 npm에서 설치하게 된다

README.md

• 보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는 곳, 저장소에 진입하면 가장 먼저 띄워진다