- Create React App
- ESLint
- Prettier
- husky
- lint-staged
- 리액트 컴포넌트 디버깅
1. Create React App(CRA)
https:// create-react-avv.dev
npx create-react-app tic-tac-toe
npx : npm 5.2.0 이상부터 함께 설치된 커맨트라인 명령어
현재 최신버젼의 라이브러리를 설치해줌
paclage.json
"dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", // = CRA "web-vitals": "^2.1.4" ==> 구글에서 정보를 얻어가는 라이브러리 },// react-scripts 에서 시용하는 명령어들 "scripts": { "prepare": "husky install", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
npm start
npm run build : 컴파일 실행(작업을 끝내고 배포할 준비) -> 프로덕션모드로
npm install -g serve : 해당 자리의 폴더를 react 앱의 파일 서버로 사용
npx serve -s build : npx를 쓸 때마다 임시로 서버패키지를 받아 사용, 파일을 이용한 임시 웹서버 사용(개발모드로)
npm test : jest를 기반한 테스트 코드 실행
npm run eject : create react app의 관리를 벗어남, 다시 돌아가기 어려움
개발용 서버 띄운 경우
프로덕션 용 빌드로 서버를 띄운 경우
최초의 CRA 샘플
npm run eject
eject 후 결과
webpack : 확장자에 따라 처리할 loader를 할당해줌( ex) jsx확장자-> babel로 처리)
2. ESLint
- CRA 설치시 기본 설치됨
- ESLint 일명 Lint는 코딩스타일이나 규칙을 내부적으로 규정
= 타일을 맞처줌( ex) 들여쓰기는 몇칸? 등)
모든 js로 이루어진 프로젝트는 lint를 사용 가능
프로젝트만들기
- mkdir eslint-test
- cd eslint-test
- npm init -y
- npm i eslint -D
- npx eslint --init // eslint 초기화
- To check syntax and find problem
- None of these
- None of these
- No
- Node
- JavaScropt
-> 파일생성(.eslintrc.js)
-> code . -r
생성된 eslintrc.js 실행
eslintrc.js 파일 내부
"rules" : { "semi" : [ "error", "always" ] }index.js 파일 생성 -> 내부
console.log('hello') // 세미콜론 안찍어도 자동으로 찍어줌창-code-preference-format검색
format on save 체크해제 --> 저장 후 확인 -> 이제 세미콜론 안찍어줌
cml에서
npx eslint index.js// eslint 테스트
npx eslint index.js --fix// 문제가 있는 것을 보지않고 바로 수정
매번 하기 귀찮으니까
elsint 플러그인 설치
cra를 사용하면 별도로 eslint 설치할 필요x
node-module => eslint-foncifg-react-app 와
pacage.json 내부에서 eslintConfig 는 같다eslintConfig : { "extends" : [ // 추천되는 react app의 eslint 설정을 상속받겠다. "~~eslint-config-~~react-app" "react-app/jest" ], "rules": { //원하는 설정을 추가 "semi" : } }
3. Prettier
= 이쁘게 한다(An opinionated code formatter = 포맷터가 주관을 가지고 의도적으로 고침)
홈페이지 : prettier.io
프로젝트 시작
- mkdir prettier-test
- cd prettier-test
- npm init -y
- npm i prettier -D
- code . -r
index.js 생성 후 내부
console.log('Hello')
index.js를 prettier로 강제로 포멧팅하기
npx prettier index.js >>console.log("Hello");어떻게 고쳐질지 보여줌
npx prettier index.js --write // 바로 바꾸기
매번 명령어 치기 힘들때
plugin설치
preference 설정에서 default formatter를 prettier로
format on save 체크
->> 저장할 때마다 prettier 적용해서 저장
설정을 바꾸고싶을때
.prettierrc.json 생성{ "singleQuote": true // 홑따옴표 쓰겠다 // 설정값들은 홈페이지에서 확인가능 }
pritter와 eslint는 충돌할 수 있음
그래서
cra의 pacage.json 내부의
안에 eslint-config-prettier 를 사용해 방지할 수 있음
4. husky
- git hook을 쉽게 사용하게 도와줌
- git을 통해 액션을 발생할 때 하고 싶은것을 처리하도록 도와줌
- ex) commit 하고 push하기 전에 무언가를 해주겠다.
Husky 설치
- mkdir husky-test
- cd husky-test
- npm init -y
- git init (husky는 git이 설치되어있어야 훅을 세팅할수 있으므로 먼저 설치해줌)
- npm i husky -D
- code . -r
husky 폴더 내에서
- npx husky install // husky에서 git hook을 사용하도록 활성화
pakage.json 내부에서
scripts안에
"prepare" : "husky install" 추가"scripts" : { "prepare" : "husky install:, "test" : echo \"Error: no test specified\" && exit 1" }ex)
commit 직전에 npm test 스크립트를 실행하고 싶다
-> npx husky add .husky/pre-commit "npm test"
git add -A
git commit -m "husky test"
5. lint-staged
Run linters on git staged files
eslint - prettier - husky 의 연결을 통해 git stage에 올린 파일들을 점검하고 싶으면 쓰는 패키지
tic tac toe 프로젝트에서 husky와 eslint 연결하기
- npm i husky -D
- npx husky i // git hook 설치
- code . -r
package.json에서
scripts안에
"prepare" : "husky install" 추가 // 패키지를 다시 설치할 때 npx husky i를 스킵하기 위해
- npx husky add .husky/pre-commit "npx lint-staged"
- npm i lint-staged -D
"**/*/js" 확장자가 js인 파일들이 stage에 올라오면 액션을 취하겠다.
"lint-staged" : {
"**.*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
}- npm i prettier -D // eslint는 cra에서 따로 설치안해도 되지만 prettier는 설치해야함
테스트를 위해 체크해제
테스트를 위해 고쳐놓기
commit 후 제대로 바뀌었는지 확인
6. 리액트 컴포넌트 디버깅
React Developer Tools
브라우저 extention으로 설치해서 디버깅을 위해 사용
