Husky와 함께 코드 품질을 높이세요

Source: Dev.to

Introduction

현대 소프트웨어 개발에서 코드 품질을 유지하는 것은 단순히 있으면 좋은 것이 아니라 필수입니다. 팀이 성장하고 코드베이스가 확대될수록 일관된 기준을 유지하고, 버그를 방지하며, 깔끔한 커밋 히스토리를 관리하는 것이 점점 더 어려워집니다. Husky는 Git 훅을 활용해 프로젝트의 품질 게이트키퍼 역할을 합니다.

Installing Husky

npm install --save-dev husky
npx husky init

이 명령은 프로젝트 루트에 .husky 디렉터리를 생성하고 샘플 훅을 넣어줍니다. 기존의 .git/hooks 디렉터리와 달리 이 폴더는 버전 관리가 되며 팀과 공유됩니다.

Project Structure

your-project/
├── .husky/
│   ├── pre-commit
│   ├── pre-push
│   └── commit-msg
├── package.json
└── …

.husky 안의 각 파일은 Git 훅에 대응합니다.

Prettier

Installation

npm install --save-dev prettier

Configuration (.prettierrc)

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

Husky Integration

.husky/pre-commit 파일을 만들거나 업데이트합니다:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx prettier --write --ignore-unknown "**/*"

이제 모든 커밋 시 자동으로 포맷이 적용됩니다.

ESLint

Installation

npm install --save-dev eslint
npx eslint --init

Sample Configuration (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "prefer-const": "error"
  }
}

Husky Integration

.husky/pre-commit 파일을 업데이트합니다:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run ESLint on staged files
npx eslint . --ext .js,.jsx,.ts,.tsx --fix

# Run Prettier
npx prettier --write --ignore-unknown "**/*"

# Stage any fixes
git add -A

lint‑staged

전체 코드베이스에 대해 매 커밋마다 린터를 실행하면 느리고 불필요합니다. lint-staged는 스테이징된 파일에만 린터를 적용해 성능을 크게 향상시킵니다.

Installation

npm install --save-dev lint-staged

Configuration (in package.json)

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

Husky Integration

.husky/pre-commit 파일을 업데이트합니다:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

이 설정은 빠르고 효율적이며 관련 파일에만 영향을 줍니다.

TypeScript Projects

프리 커밋 훅에 타입 검사를 추가합니다:

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "tsc --noEmit",
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Conclusion

Husky와 자동화된 품질 검사는 까다롭게 만들기 위한 것이 아니라, 팀의 효율성을 높이고 코드의 신뢰성을 강화하며 릴리즈에 대한 자신감을 높이기 위한 것입니다. 문제를 일찍 잡아내면 개발 과정에서 품질을 좌측으로 이동시켜 버그를 줄이고 협업을 개선하며 궁극적으로 더 나은 소프트웨어를 배포할 수 있습니다.

초기 설정은 약간의 추가 작업처럼 느껴질 수 있지만, 투자 대비 효과는 즉시 나타납니다: 포맷 논쟁과 예방 가능한 버그에 소요되는 시간이 줄어들고, 실제로 중요한 기능 구현에 더 많은 시간을 할애하게 됩니다. 작은 것부터 시작해 도구를 점진적으로 도입하면 코드 품질과 팀 생산성이 크게 상승하는 것을 체감할 수 있을 것입니다.