오늘은 앞으로 사용하게 될 리액트 개발 환경 세팅 및 코드 실습을 진행해봤다.
먼저, 보다 원활한 협업 환경을 세팅하기 위해
ESlint 와 prettier를 설치 해줬다.
ESlint + prettier
ESlint
* lint란 "보푸라기" 라는 뜻이다.
옷을 입고 생활하다 보면 처음에는 괜찮지만 이 옷을 계속 입으면 먼지나 보푸라기가 일어난다.
그런 것 처럼
코드 또한 초기에는 괜찮아도 계속 사용하면서 양이 방대해지면, 보푸라기가 일어난다.
이것은 코드를 읽기 어렵게 만들고 유지보수에 장애가 되기도 한다.
따라서 코드의 스타일과 잠재적인 버그를 잡아주는 프로그램이 있다.
그것이 바로 "lint"!
linkt는 세종류
1. JS lint
2. JS hint
3. ES lint
이중 ES lint가 많이 쓰이고, 이것을 설치하도록 하겠다 !
ES lint가 검사하는 항목은 크게 두종류
1. 포맷팅 - 일관된 코드 컨벤션을 유지해줌
(ex 들여쓰기는 두칸으로 하라)
2. 코드 품질 - 잠재적인 오류나 버그를 미리 찾아줌
- 설치하기
eslint는 npm으로 설치 가능
npm install eslint
- 규칙 추가
eslint는 규칙을 정해주면 그 규칙에 따라서 검사를 진행한다.
ESlint 문서를 보면 rules부분이 있는데 여기를 보고 원하는 옵션을 추가해서 검사를 하면 된다.
https://eslint.org/docs/rules/
List of available rules
✓no-unreachabledisallow unreachable code after `return`, `throw`, `continue`, and `break` statements
eslint.org
rules 부분 추가
// 설정파일에 추가
// .eslintrc.js
module.exports = {
rules:{
"no-unexpected-mulitline" : "error" // 끝라인에 세미콜론 찍어줘야 에러처리 안나도록해주는 옵션
}
}module.exports = {
rules:{
"no-unexpected-mulitline" : "error",
"no-extra-semi": "error" // 세미콜론 여러개 찍혀 있으면 에러처리 해라
}
}
- 환경설정하기
package.json 추가
scripts :{
"lint" : "eslint src"
}기본 세팅이다.
여기까지만 하고 실행 명령어를 입력하면,
검사 결과를 터미널에 출력해준다.
여기에 추가로
lint를 실행시킬 때 명령어에--fix 옵션을 주면 코드를 고쳐준다.
따라서 json 파일 환경설정에 옵션 추가
"script":{
"lint" : "eslint src --fix"
}
이후 실행 하면 파일이 자동으로 수정된다.
- 실행하기
npm run lint
이 메세지를 실행했을 때 아무 메세지도 안뜨면 검사에 통과한것임!
prettier
코드를 더 예쁘게 해준다. (포매팅)
예를 들어
console.log();;;;;이런 코드가 있다고 하면 실행은 되겠지만,
의미없는 세미콜론이 여러개들어간다. 이건걸 프리티어를 이용하면 자동으로 지워준다.
- 설치
node package module 이므로 npm 명령어로 설치해준다.
npm install prettier
- 실행
설정값에 따라 다르겠지만 기본상태에서는
npx prettier [파일경로]
-> 이때 검사할 파일의 경로를 써준다. ./src 로부터 상대경로로 쓰면 된다.
예를 들어 내가 src폴더 안에 있는 App.js 파일을 검사하고 싶으면
npx prettier ./src/App.js
ESlint + prettier
포매팅은 프리티어에게 맡기고 코드 품질은 eslint가 하도록 통합.
프리티어 포매팅 규칙을 eslint로 추가하고 이때 서로 충돌하는 옵션이 있으면 프리티어의 규칙을 따르도록
패키지 설치
npm install eslint-config-prettier
npm install eslint-plugin-prettier
설정파일 추가
extends :[
"plugin":"prettier/recommended"
]
실행하기
npm run lint
-
lint 자동화
1. 깃훅 이용
git을 이용해 소스코드를 트래킹하는 경우
깃 훅을 애용해서 변경된 코드만 검사할 수 있음.
husky를 이용
- 깃 명령어 실행 전후에 뭔가 추가적인 실행을 하도록 함.
이것을 이용해서
lint를 통과해야만 깃에 commit이 가능하도록 설정해줄 수도 있다.
-설치
npm install husky
- 이후 환경 설정 및 테스트 실행
글이 길어져서 react hook 실습은 다른 글로 쓴다
https://muna76.tistory.com/200