🕶️ Create React App 공부하기

 

---

시작

Create React App(cra)

두가지 방법이 있는데 npm이나 yarn을 이용하는 방법이다.

npm create react-app 프로젝트명 --template typescript
yarn create react-app 프로젝트명 --template typescript

두가지 방법중 yarn을 많이 사용한다.

 

디렉토리 구조

yarn이 병렬설치로 npm보다 설치가 빠르고,

버전을 어디에서나 같게 하여 버그를 줄임으로써 보안을 높였다.

 

---

구성

 

 

node_modules 폴더

node.js의 패키지 구성요소 중 하나로 외부 모듈을 저장하는 폴더이다. react도 외부 모듈이므로 여기에 저장된다.

node_modules 폴더는 설치된 외부 모듈들의 소스코드를 갖고있기 때문에 매우 큰 용량을 차지한다. 협업을 위해 github나 드라이브에 프로젝트를 공유할 때는 .gitignore 파일에 반드시 명시해 공유하는 파일의 용량을 줄여야 한다.

 

package.json 파일

package.json, package-lock.json 파일을 통해 패키지가 어떤 설정을 갖고있는지, 어떤 패키지를 사용하고 있는 지 확인할 수 있다.

패키지들을 연결하는 중요한 역할을 하고 있기 때문에 신중하게 수정해야 하고, 백업 없이 섣불리 삭제해서는 안된다.

package.json에서는 내 프로젝트의 이름, 주소, 버전 등을 설정할 수 있으며 react의 버전을 지정해줄 수도 있다.

 

{
  "name": "fsgp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0",
    "web3": "^4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

dependencies에는 리액트 패키지들의 정보를 담고 있다. 각 패키지의 버전을 확인할 수도 있으며, 버전을 업그레이드할 경우 여기에 수정이 필요하다.

 

 

public 폴더

public 폴더에는 index.html 파일이 들어있다. 페이지의 제목을 변경하는 등의 작업을 수행할 수 있다.

 

index.html

홈 화면에 표시되는 html로, 페이지 템플릿이다.

 

logo192.png / logo512.png / manifest.json
모바일 웹브라우저에서 사이트를 홈 화면에 추가 할 때 사용

 

robots.txt
검색 엔진이 웹사이트를 수집할 때 수집 할 것과 하지 말아야 할 것을 명시해주는 파일

 

 

public 폴더 안의 파일은 Webpack이 후처리하지 않고, 빌드 폴더에 그대로 복사된다.

public 폴더를 사용해야 할 때가 궁금하다면 아래의 공식문서를 참고할 수 있다.

Create React App - Using public Folder

Using the Public Folder | Create React App

 

src

src는 source code의 줄임말.

js, css 등의 코드를 저장하는 폴더이며 이 폴더 내부의 파일은 프로젝트 빌드 시 Webpack으로 처리된다.

App.test.js

App.js를 테스트 할 때 사용하는 파일

 

index.css / index.js
index.html과 연결된 js파일과 그의 stylesheet. 자바스크립트의 진입점이다.

 

setupTest.js
테스팅 라이브러리를 import하는 파일

 

logo.svg
앱에서 사용하고 있는 svg파일. 삭제가능

 

reportWebVitals.js
앱의 퍼포먼스시간들을 분석해주는 기능을 담은 파일