---
# System prepended metadata

title: 프리커밋 훅을 이용한 Lint 강제하기

---

# 프리커밋 훅을 이용한 Lint 강제하기

Lint를 Commit에서 수행하여 검사가 완료된 상태의 코드를 유지하는 방법입니다. 여러명의 개발자가 린팅을 하지 않고 push를 하게되면 코드가 엉망이되기 쉽습니다. 


이 내용은 git에 훅을 걸고 lint-staged로 git stage에 올라와있는 코드만 lint를 자동으로 수행하여 통과하지 못하면 commit을 만들 수 없게하는 내용입니다. 개발자는 강제적으로 린팅한 코드만 push할 수 있습니다. 이러면 코드가 엉망이 되는것을 막을 수 있습니다. 

### 프로젝트 생성
```
npx create-next-app amplify-forum --typescript
```


### TailwindCSS로 스타일링하기
TailwindCSS를 사용하여 응용 프로그램의 스타일을 지정합니다.
devDependencies에 TailwindCSS 관련 패키지를 설치해 보겠습니다.

```bash=
yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms
```
Tailwind 구성 파일을 만들려면(tailwind.config.js postcss.config.js), 다음을 실행해 보자.

```bash=
npx tailwindcss init -p
```
이제 업데이트를 해보자 tailwind.config.js다음과 같이.

이것은 프로덕션 빌드에서 사용하지 않는 트리 쉐이크 스타일링을 하기 위한 것입니다.
```javascript=
// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
 plugins: [require('@tailwindcss/forms'),],
}
```
Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 사용하려면 ./styles/globals.css
```javascript=
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
TailwindCSS 설치에 대해 더 알고 싶다면 여기를 확인하세요


## EsLint ( Typescript 코딩 스타일 도구)
Next는 린트를 기본으로 구성하고 있음
```
yarn lint
```


AirBnB Lint 추가
```
yarn add eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^5.13.0 \
            @typescript-eslint/parser@^5.0.0 \
            --save-dev
```

.eslintrc.json을 변경합니다. 
```
{
  "extends": [
    "next/core-web-vitals",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}
```
다시 린트체크를 해봅니다.
```
yarn lint
```
아래와 같은 결과가 나옵니다. 

![](https://i.imgur.com/NR06wmX.png)


## Prettier(코드 스타일 정리) 
ESLint에는 기존 Prettier 설정과 충돌할 수 있는 코드 형식 지정 규칙도 포함되어 있습니다. ESLint와 Prettier가 함께 작동하도록 ESLint 구성에 eslint-config-prettier를 포함하는 것이 좋습니다.
```bash=
yarn add --dev eslint-config-prettier
```

그런 다음 기존 ESLint 구성에 prettier를 추가합니다.
eslintrc.json의 extends에 prettier/prettier를 추가합니다.

```json=
{
  "extends": [
    "next/core-web-vitals",
    "airbnb-typescript",
    "prettier/prettier"
  ]
}
```

## lint-staged
코드를 커밋하기 전에 실행하면 Linting이 더 합리적입니다. 이렇게 하면 오류가 저장소로 이동하지 않고 코드 스타일을 적용할 수 있습니다. 그러나 전체 프로젝트에서 린트 프로세스를 실행하는 것은 느리고 린트 결과는 관련이 없을 수 있습니다. 궁극적으로 커밋될 파일만 린트하기를 원할 것입니다.

`.lintstagedrc.js`파일을 생성하고 아래 코드를 입력합니다. 
```javascript=
const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}
```

## husky

커밋 또는 푸시할 때 커밋 메시지를 린트하고, 테스트를 실행하고, 코드를 린트하는 데 사용할 수 있습니다. Husky는 모든 Git 후크를 지원합니다.

```bash=
yarn add --save-dev husky@next
```

package.json 수정을 위해 아래 스크립트 실행:
```
npm set-script prepare "husky install"
npm run prepare
```

훅 추가
```
npx husky add .husky/pre-commit "yarn lint"
git add .husky/pre-commit
```

커밋
```
git commit -m "Keep calm and commit"
```

아래와 같이 커밋이 실패하면서 lint결과를 보실 수 있습니다. 
![](https://i.imgur.com/ClXKY5i.png)

아래 코드를 수행한 후 다시 커밋을 생성하세요.
```
yarn lint --fix
```

![](https://i.imgur.com/aYYwdj4.png)

린팅을 통과했으니 Commit을 만들고 Push할 수 있습니다. 