협업을 위한 boilerplate 만들기

seongjin·2023년 5월 7일

개발자로 일할때 협업하는 능력은 중요하다. 하나의 프로젝트에서 작업자마다 각자 다른 코딩 스타일을 가지고 있고, 그것이 코드에 드러난다면 이 프로젝트를 제 3자가 읽기도 어려워지며, 팀원들끼리도 다른 팀원들이 작성한 코드를 읽고 이해하기가 힘들어진다. 때문에 다른 사람들과 협업을 할때 코딩하는 스타일이나 컨벤션을 지키는 것이 불필요한 시간을 줄일 수 있다.

이런 이유로 react + typescript 환경에서 개발을 할때 반복해서 셋팅하는 일을 줄이고 협업을 대비하여 Linter로 ESLint를, Code Formatter 로는 Prettier를 사용하여 보일러 플레이트를 만들어 보았다.

reate-react-app을 typescript 버전으로 설치

$npx create-react-app 폴더명 —template typescript

tsconfig.json이 기본으로 설정이 되어있다. 필요시 수정해서 사용

ESLint

일관되고 버그를 피할수 있는 코드를 짜기위해서 만들어진 코드 분석 툴
작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.
설정 커스터마이징을 허용해주기 때문에 필요한 규칙들을 커스텀해서 적용가능하다.

Prettier

코드 포맷팅 툴
포맷팅 룰을 커스터마이징할 수 있다
코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅스타일을 공유할 수 있게 된다.
그로인해서 개발자는 포맷팅등 다소 중요하지 않은 요소들에 에너지를 낭비하지 않고 핵심적인 개발에 집중할 수 있게 된다.

설치 방법

eslint
- npm install eslint --save-dev
- CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 됨
prettier
- npm install prettier --save-dev
eslint-config-prettier
- eslint는 linting 기능을, prettier는 formatting을 담당한다.
- eslint에는 일부 formatting 관련된 rule도 포함되어 있기 때문에 rule들이 prettier와 다른 설정을 가지고 있다면 설정 충돌이 발생함
- 따라서, eslint에서 formatting 관련 rule들을 모두 해제해야 한다.
- npm install eslint-config-prettier --save-dev

실제 프로젝트에서는 기본 설정을 그대로 사용하는 것이 아니라 eslint와 prettier는 프로젝트내에 설정파일을 이용해서 사용하면 된다.

Prettier 설정

Prettier는 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해서 설정을 할 수 있음
예시

{
  "jsxSingleQuote": true, "" => ''

  "printWidth": 80, // 줄 바꿈 할 폭 길이
}

ESLint 설정

eslint 설정은 커스터마이징 할 수 있는 부분이 많고, 언어별(js, ts 등), 환경별(web, node, react 등) 세팅을 해줘야 하는 부분이 많아서 다소 복잡하다.
eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있다.
예시

{
  "extends": ["react-app", "eslint:recommended", "prettier"],
  "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" // 사용하지 않는 변수 금지
  }
}

Husky

eslint + prettier이 끝이 아니다.
아무리 패키지를 설치하고, 룰을 설정해도 작업자가 사용을 안하면 무용지물.
commit된 코드는 무조건 formatting이 완료되어야 하고, push된 코드는 무조건 eslint가 pass된 상태에서 push가 되도록 강제해야한다.
git hook 설정을 도와주는 npm package
husky를 통해서 pre-commit, pre-push hook을 설정 가능함

설치 및 적용

npm install husky --save-dev
(처음 husky 세팅하는 사람만 실행 필요) npx husky install
1. npx husky install : husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트
2. add postinstall script in package.json
  - 이후에 clone 받아서 사용하는 사람들은 npm install후에 자동으로 husky install 이 될 수 있도록 하는 설정

// package.json

{
  "scripts": {
    "postinstall": "husky install", // npm i 후 자동으로 설치하게 하는 옵션
		"format": "prettier --cache --write .", 
		"lint": "eslint --cache .",
  },
}