Creating React Project

Seulyi Yoo·2022년 7월 6일

create react app

React

목록 보기

7/12

Create React App

CRA

https://create-react-app.dev

npx

npm 5.2.0 이상부터 함께 설치된 CLI

npm start

react-scripts start
Starting the development server…

npm run build

react-scripts build
Creating an optimized production build…

개발용 서버를 띄움. 소스코드가 수정되면 다시 컴파일 하고 웹페이지를 새로고침

Project 폴더 바로 아래 build 라는 폴더가 만들어지고, 그 안에 Production 배포를 위한 파일들이 생성됨

npm install serve -g
serve -s build

serve 라는 패키지를 전역으로 설치한다.
serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행한다.
- -s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 한다.

npm test

react-scripts test
Jest 를 통해 test code 를 실행

__tests__ 폴더 안의 .js 파일

.test.js 로 끝나는 파일

.spec.js 로 끝나는 파일

npm run eject

react-script eject

react-scripts 사라짐

드러내지 않고 cra 에 의해 사용되던 각종 패키지가 package.json 에 나타남

Jest, Babel, ESLint 설정 추가

각종 설정 파일이 config 폴더에 생성됨

eject 를 이용하면, cra 로 만든 프로젝트에서 cra 를 제거한다.

돌이킬 수 없기 때문에 신중하게 결정해야 한다.

cra 내에서 해결이 안되는 설정을 추가해야 할 때 사용한다.

ESLint

npm init -y

npm i eslint -D

npx eslint --init

Ok to proceed? (y) y

✔ How would you like to use ESLint? · problems

✔ What type of modules does your project use? · none

✔ Which framework does your project use? · none

✔ Does your project use TypeScript? · No / Yes

✔ Where does your code run? · browser

✔ What format do you want your config file to be in? · JavaScript

// eslint 

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        "semi": [
            "error",
            "always"
        ]
    }
}

// React
// package.json

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
> 		"rules": {
			"semi" : "error"
		}
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Prettier

npm init -y

npm i prettier -D

npx prettier index.js (찾아줌)

npx prettier index.js —write (찾고 수정)

.prettierrc.json 파일 생성 후, 설정

prettier 패키지 설치

eslint-config-prettier

prettier 에서 불필요하거나, prettier 와 충돌할 수 있는 모든 규칙을 끔

이 구성은 규칙을 끄기만 하면 되기 때문에 다른 설정과 함께 사용하기 좋음

{
	...
	"eslintConfig" : {
		"extends" : [
			"react-app",
			"prettier"
		]
	}
	...
}

husky

(git hooks made easy)

npm init -y

git init

npm i husky -D

npx husky install

{
  "name": "husky-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prepare": "husky install",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "husky": "^8.0.1"
  }
}

npx husky add .husky/pre-commit “npx-test”

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "prepare": "husky install",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "semi": "error"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3"
  }
}

npx husky add .husky/pre-commit “lint-staged”

npm i lint-staged -D

npm i prettier -D

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "prepare": "husky install",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "lint-staged" : {
      "**/*.js":[
        "eslint --fix",
        "prettier --write",
        "git add"
      ]
    },
    "rules": {
      "semi": "error"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3"
  }
}