React 초기 설정

1. yarn

npm install -g yarn

yarn 전역 설치

2. 스타터 킷 설치

https://create-react-app.dev/

npx create-react-app 폴더이름

git 초기 설정도 자동으로 해줌

단 git 설정이 되어 있는 폴더에서 실행시 깃 설정 안함

3. script 명령어

3.1 yarn start

3000번 포트로 개발 서버를 열고 리엑트 코드를 번들링(최적화) 하기 전에 바로 띄워서 확인 할 수 있게 해줌

3.2 yarn build

bundle 폴더에 최적화 된 파일 생김

3.3 yarn test

파일에 이상이 없는지 확인

3.4 yarn eject

상세 설정들 확인 & 고치기 위해 사용

4. serve

npm install serve -g

serve -s build

build 폴더에 있는 파일들로 실행 (최적화 된 파일들 실행하는 것)

5. ESLint & Prettier

5.1 패키지 설치

npm install -g eslint
yarn add prettier --dev --exact

ESLint를 전역으로, Prettier를 개발자 옵션 및 exact 옵션으로 설치한다. exact는 버전이 달라지면서 스타일 검사 기준이 달라지는 것을 막기 위한 인스톨 방식이다.

5.2 VSCode 확장 프로그램 설치

VSCode 확장 프로그램에서 ESLint와 Prettier를 설치한다.

5.3 eslint-config-airbnb 설치

yarn add eslint-config-airbnb

airbnb 설정을 추가하고 다음과 같이 packge.json의 eslint 설정을 수정한다.

"eslintConfig": {
    "extends": ["react-app","airbnb"],
    "rules": {
      "react/jsx-filename-extension": 0,
      "react/jsx-one-expression-per-line": 0
    }
  },

5.4 Prettier 설정과 자동 저장 설정

VSCode 설정을 바꾸기 위해 F1을 누르고 open setting을 입력한다. JSON형식을 선택하고 열린 설정 파일에 다음과 같이 추가한다.

//set the default
"editor.formatOnSave": false,
"[javascript]": {
	//default formatter
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true
},

5.5 .prettierrc 생성

.prettierrc 파일을 root폴더에 생성 후 다음과 같이 작성한다.

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

5.6 ESLint와 Prettier 중복 제거

eslint-config-prettier은 prettier 에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화 시켜준다.

yarn add eslint-config-prettier

설치 후 package.json에 다음과 같이 prettier를 추가한다.