코딩스타일은 팀마다 다르지만 이를 개인에게 지키도록 하는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일과 관련한 논쟁이 이어지다 보면 정작 신경 써야 할 프로젝트에 에너지를 쏟지 못하는 상황이 발생합니다. 이러한 불필요한 에너지 소모를 줄이기 위해 코딩 스타일 자동화 툴이 필요합니다. 처음 설정은 복잡하지만 한번 적용해 두면 추후에 적용하기 쉽고, 처음에 적용해 둔 것이 지속적인 개발 생산성 향상에 도움이 됩니다.
협업 시 많이 사용되고 있는 ESLint Airbnb rule 세팅을 해보도록 하겠습니다.
1. CRA
먼저 터미널을 키고 create-react-app을 통해 Typescript 리액트 프로젝트를 만들어 줍니다.
npx create-react-app [프로젝트 이름] --template typescript2-1. ESLint
프로젝트가 생성되었다면 ESLint를 개발 환경에서만 필요하므로 devDependency에 설치하도록 합니다.
npm install eslint --save-dev
설치가 완료되었다면 직접 루트 디렉토리에 .eslintrc 파일을 만들어도 되지만, 이번에는 터미널을 통해 자동생성을 도와주는 명령어를 실행해 보겠습니다.
npx eslint --init
터미널에 npx eslint --init 명령어를 작성하게 되면 설정과 관련된 질문이 나오는데, 저는 위 사진처럼 체크해 주었습니다. 완료가 된다면 루트 디렉토리에 .eslintrc.json 파일이 설정에 맞게 기본세팅이 되어있는 것을 확인할 수 있습니다.
init과정 중 "Would you like to install them now?" 질문에 Yes를 해주었으니, package.json에 eslint-plugin과 parser가 함께 설치가 되어있는 것을 확인합니다. No라고 한다면 수동적으로 설치해야 합니다.
// .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
ESLint의 실행시켜 기본세팅들이 잘 적용이 되어있는지 확인하기 위해서 package.json에 lint 명령어를 하나 추가해줍니다.
"scripts": {
...
"lint": "eslint --cache ./src/**/*.{ts,tsx,js,jsx}",
},
** Error
저 같은 경우는 npm run lint 명령어를 실행시켰을 때,
"Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration ." 오류가 발생하였는데 구글링을 해서 찾아보니 간단한 해결 방법이 있었습니다.
eslintrc.json파일 내에 아래 "settings"를 추가해주었습니다.
// .eslintrc.json
"settings": {
"react": {
"version": "detect"
}
}
2-2. Airbnb rule 적용하기
Airbnb룰을 적용해 주기 위해서 의존하고 있는 라이브러리를 모두 설치해야 한다. 아래 명령어를 통해서 라이브러리들을 모두 설치해 줍니다.
npx install-peerdeps --save-dev eslint-config-airbnb
명령어를 작성하면 package.json에 아래 패키지들이 모두 설치된 것을 확인할 수 있습니다. (버전은 다를 수 있다.)
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
설치 후에는. eslintrc.json파일의 extends에 airbnb와 airbnb/hooks을 추가해 줍니다.
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"airbnb",
"airbnb/hooks"
],
여기까지는 자바스크립트용 세팅이고, 타입스크립트 호환을 위해서 몇 가지 더 설치가 필요합니다. 아래 명령어를 통해서 설치해 줍니다.
npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
설치가 완료되었다면, 아래 코드처럼. eslintrc.json를 수정해 줍니다.
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"airbnb",
"airbnb-typescript",
"airbnb/hooks"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx":true
},
"project":"./tsconfig.json"
},
"plugins":
모든 설정이 끝나고 터미널에 npm run lint를 작성하면 airbnb rule에 위반되는 곳에 오류가 발생할 것입니다.
3. Prettier
Prettier의 설정을 해주겠습니다. 아래 명령어를 터미널에 작성하고 prettier와 eslint-config-prettier를 설치합니다. eslint-config-prettier는 eslint에서 formatting관련 rule들을 모두 해제해 줍니다. 이로 인해 prettier와 설정 충돌을 막을 수 있습니다.
npm install --save-dev prettier eslint-config-prettier
설치가 완료되었다면. eslintrc.json의 extends에 prettier를 추가해 주고, package.json에 format script를 작성해서 넣어주도록 하겠습니다.
// .eslintrc.json
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"airbnb",
"airbnb-typescript",
"airbnb/hooks",
"prettier"
],
// package.json
"scripts": {
...
"lint": "eslint --cache ./src/**/*.{ts,tsx,js,jsx}",
"format" : "prettier --cache --write ./src/**/*.{ts,tsx,js,jsx}"
},
Prettier의 규칙을 작성하기 위해 루트 디렉터리에. prettierrc.json 파일을 만들어 규칙을 작성해 줍니다.
저는 아래를 참고해서 필요한 규칙을 뽑아서 만들었습니다.
prettier에서 설정 가능한 전체 옵션들
{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 줄 바꿈 할 폭 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}
모든 작업이 완료된 후 터미널에 npm run format 명령어를 작성하면 prettier가 잘 작동하는 것을 확인할 수 있습니다.
4. Husky
ESLint와 Prettier를 설정을 마쳤지만, 강제성이 부여되지 않으면 의미가 없습니다. 그래서 커밋 시에 오류가 발생하면 코드를 푸시할 수 없도록 Husky를 사용하여 설정해 주겠습니다.
Husky를 통한 Git Hook적용
먼저 Husky를 package manager를 통해 프로젝트에 설치해 주겠습니다.
npm install husky --save-dev
맨 처음 프로젝트에 husky를 세팅하는 사람이라면 npx husky install 스크립트를 실행하여 husky에 등록된 hook을 실제. git에 적용시킵니다.
그 후 package.json에서 clone 받아서 사용하는 사람들은 npm install 후에 자동으로 husky install이 될 수 있도록 스크립트를 추가해 줍니다.
// package.json
{
"scripts": {
...
"postinstall": "husky install",
},
}
마지막으로 commit전에 format을 한번 실행하도록, push 전에 lint를 한번 실행하는 훅을 터미널을 통해 Husky에 추가해 줍니다.
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-push "npm run lint"
이렇게 설정이 완료된 후에, 일부러 오류를 발생시키고 푸시를 시도해 보았을 때의 결과입니다.
커밋 시에는 format 명령어가 먼저 실행되어 formatting 작업을 해주고, 푸시를 시도할 때는 lint 명령어가 실행되어 오류가 있다면 푸시를 막고 있습니다.
** 터미널로 lint --cache를 작동시키면. eslintcache 파일이 생성되므로. gitignore에 추가해 줍시다.
** create-react-app vulnerabilities
패키지들을 설치하다 보면, 6 high severity vulnerabilities와 같이 빨간색으로 취약점 관련 이슈를 뿜어냅니다. 스택오버플로우나 블로그를 검색해 봐도 프로젝트를 하는데에 이상이 없으니 무시해도 괜찮다고 하지만 눈에 밟히는 건 어쩔 수 없는 사실... 그래서 간단한 해결방법을 찾아보았습니다.
Vulnerabilities with create-react-app React Js
Every time I create a react app with npx create-react-app <AppName>, I get: 96 vulnerabilities found - Packages audited: 1682 Severity: 65 Moderate | 30 High | 1 Critical Node Version: v14.18...
stackoverflow.com
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
},
"devDependencies": {
"react-scripts": "4.0.3"
},
}
dependencies에 있는 "react-scripts"를 devDependencies로 이동시키고, 터미널에 npm audit --production을 작성하면 말끔하게 없어지는 것을 확인할 수 있습니다.
'Javascript > React' 카테고리의 다른 글
| [React] Props Drilling의 문제점과 해결방법 (0) | 2023.04.13 |
|---|---|
| [React] useRef Hook의 이해와 활용 (0) | 2023.03.30 |
| [React] React 렌더링 최적화와 Hooks (0) | 2023.03.11 |
| [React] ESLint와 Prettier, Git Hook을 이용한 협업 (0) | 2023.02.27 |
| [React] React Router 사용하기 (0) | 2023.02.23 |