Creating React Project

1. Create React App

• CRA(Create React App): https://create-react-app.dev 참고 (facebook의 오픈소스)
  $ npx create-react-app tic-tac-toe node 기반 프로젝트 생성
  $ cd tic-tac-toe
$ npm start local에서 개발 서버 열기
  $ npm run build 개발 끝난 후 최적화된 production mode로 만들기
  $ npm test jest 통해 test code 실행
  $ npm run eject create-react-app에서 프로젝트 빼내기
  ⭐ eject는 더 이상 도움 받을 수 없고 돌이킬 수 없어 잘 사용 X
• webpack: 파일 확장자에 맞는 loader에게 파일을 위임
  ex) .js나 .jsx -> babel-lodaer에게

2. ESLint

• create-react-app 설치 시 자동으로 따라옴
• 코드 스타일을 일정하게 규정할 때 lint 사용
  $ mkdir eslint-test
$ cd eslint-test
$ npm init -y
$ npm i eslint -D ESlint 설치
  $ npx eslint –init (세부사항 선택 후) .eslintrc.js 생성
• .eslintrc.js 파일 수정해 문법 설정
  -> “rules” : { } 객체 내부에 추가로 설정하기
• 문법 오류 체크
  1)$ npx eslint index.js 문법 오류 출력
  2)$ npx eslint index.js --fix // 자동으로 오류 수정
  3) ESlint extension 설치하면 코드 상에서 바로바로 체크 가능

3. Prettier

• An opinionated code formatter; 주관적인 코드 조정자
  $ npm init -y
$ npm i prettier -D Prettier 설치
  $ code .
$ npx prettier index.js 바뀐 코드 command 창에 출력
  $ npx prettier index.js --write 코드 자체를 수정
• Prettier extension 설치 후 기본 formatter 설정(“editor.formatOnSave”: true)하면 저장과 동시에 코드 바로 자동 수정(formatting)
• root에 .prettierrc.json 파일 추가 후 객체 형태로 옵션 작성

-> ESlint vs. Prettier

• ESlint가 훨씬 세부적이고 미세한 조정 가능
  Prettier는 더 단순하고 정확한 역할
• ESlint와 Prettier 충돌 막기 위해 “eslintConfig”에 “prettier” 추가하면 eslint에서 충돌 가능성 있는 설정이 꺼짐 -> 같이 사용 가능

4. husky

• Git hooks를 쉽게 사용하도록
  $ npm init -y
$ git init
$ npm i husky -D husky 설치
  $ npx husky install
  // package.json의 scripts에 “prepare”: “husky install” 추가
  $ npx husky add .husky/pre-commit “npm test” 커밋 전 test 실행하도록
  $ git add -A 전체 stage
  $ git commit -m “husky test” 커밋 실행 -> test 자동 실행됨

5. lint-staged

• git의 staged files에 linter 실행
  $ npm i husky -D
$ npx husky install
$ code .
  // package.json에 scripts에 “prepare”: “husky install”
$ npx husky add .husky/pre-commit “npx lint-staged” 커밋 전 lint-staged 실행하도록
  $ npm i lint-staged -D lint-staged 설치
  // package.json에 “lint-stage” : { “**/*.js”: [“eslint --fix”, “prettier --write", “git add”] } 설정
  -> 커밋할 때 모든 동작 동시 실행됨
  

🌟 정리: Git를 사용하여 Commit -> husky의 pre-commit에 등록된 lint-staged가 실행 -> lint-staged에 등록된 ESLint와 Prettier 명령어가 실행

6. Create React App 시작 코드 이해하기

• 시작 코드는 ./src/index.js
  • root는 ./public/index.html에 존재
  • App은 ./src/App.js에 존재 -> 여기에 원하는 코드 작성
• .css파일 import 하면 현재 코드 전체에 해당 style 적용
• 이미지파일 import하면 이름 정해 중괄호 속에 넣어 변수로 사용 가능

+) React Component Debugging

• React Developer Tools 크롬에 설치한 후 $ npm start
  -> 개발자도구에서 components, React 탭 확인 가능 (component 별 props 등 test 해보자)