왜 초기 환경설정을 해야 하는가?
- 혼자하는 프로젝트라면 몰라도, 팀 프로젝트에서는 제각각의 개발환경이 발목을 잡는 경우가 있다.
- 예를 들어 쌍따옴표를 사용하는 팀원이 있고 홑따옴표를 사용하는 팀원이 있을 텐데, 그대로 프로젝트를 진행한다면 코드 병합 과정에서 따옴표가 서로 달라서 conflict가 발생할 것이다.
- 이는 프로젝트 전체적으로 봤을 때 중요한 부분도 아니며, 이런 개발 외적인 사소한 conflict가 지속된다면 프로젝트를 효율적으로 진행한다고 보기 어려울 것이다. - 즉 개발 환경설정은 개개인의 개발환경을 팀 단위로 통일해, 프로젝트의 개발 자체에 집중하는 데 그 의의가 있다고 할 수 있다.
- 자바스크립트 언어 기준으로, 개발환경을 세팅하는 데에는 크게 두 가지 라이브러리가 대표적이다. 코드의 문법을 담당하는 ESLint, 코드의 형태를 담당하는 Prettier 가 그것이다. 해당 라이브러리들은 모두 --save-dev 키워드를 사용해 devDependencies 항목으로 저장할 것이다.
npm install eslint prettier eslint-config-prettier --save-dev
🤔왜 devDependencies 로 저장하나요?
- 개발 이후에도 적용될 프로덕션 부분은 dependencies로, 개발 과정에서만 적용될 부분은 devDependencies로 저장하는 게 바람직하기 때문입니다.
- 즉 상기한 개발 환경설정은 개발 과정에서만 적용될 부분이기 때문에, devDependencies로 저장하는 것이 보다 적절한 설정이라고 볼 수 있습니다.
ESLint
- 코드의 문법적인 부분을 체크한다. 사용하지 않는 변수를 에러처리하거나, 콘솔 로그를 허용하지 않는 등 다양한 기능을 수행한다.
- 포맷팅의 기능도 있긴 하지만 포맷팅 기능을 prettier에 위임하기 위해 해당 기능은 배제할 것이다.
.eslintrc
{
"extends": ["react-app", "eslint:recommended", "prettier"],
"env": {
"es6": true
},
"rules": {
"no-var": "error", // var 선언 금지
"no-multiple-empty-lines": "error", // 여러 줄 공백 금지
"no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
"eqeqeq": "error", // == 불가, === 허용
"dot-notation": "error", // dot notation 허용
"no-unused-vars": "error" // 사용하지 않는 변수 금지
}
}
extends
- 해당 플러그인들에 "포함해" 다음의 추가적인 설정들을 하겠다는 의미이다.
- "prettier"는 eslint-config-prettier 의 준말로, 이 경우에는 eslint의 포맷팅 기능을 배제하기 위해 작성한다.
env
- 예를 들어 const의 경우는 es6 문법이다. 해당 프로젝트에 어떤 JavaScript의 버전을 적용시킬 지 등을 적용할 때 사용한다.
rules
- 프로젝트에 적용될 실질적인 문법들을 작성하는 부분이다.
npx eslint --cache .
- node_modules의 eslint를 실행하되(npx eslint) 캐시 메모리를 사용해 중복 작업을 피한다(--cache) 현재 프로젝트 내 전체 파일을(.)
- 해당 작업을 수행하면 .eslintcache 파일이 생성되는데, .gitignore 파일에 포함해서 코드 병합 과정에서의 conflict를 방지한다.
package.json
"scripts": {
"lint": "eslint --cache ."
},- 상기한 명령어를 보다 간편하게 적용시키기 위해 package.json에 "lint"라는 키워드를 지정해 해당 작업을 수행한다.
- npm run lint === npx eslint --cache .
Prettier
- 코드의 포맷 형식을 도와주는 라이브러리이다. 문법적인 부분을 수정해주진 않는다.
.prettierrc.js
module.exports = {
printWidth: 100, // 한 줄의 코드가 100자를 초과하면 다음 줄로 넘어감
singleQuote: true, // "" => ''
arrowParens: 'avoid', // 화살표 함수의 인자가 하나일 경우 괄호 생략
};
npx prettier --write --cache .
- node_modules의 prettier를 실행해서(npx prettier) 해당 코드를 저장하고(--write) 이전에 저장된 부분이 있다면 캐싱된 메모리를 사용해 중복 저장 작업을 피한다(--cache) 현재 프로젝트 내 전체 파일을(.)
package.json
"scripts": {
"format": "prettier --write --cache ."
},- eslint의 경우와 마찬가지로 package.json에 "format"이라는 키워드를 지정해 해당 작업을 수행한다.
- npm run format === npx prettier --write --cache .
