[ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들

 

---

 

ESLint? Husky? Prettier?

ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다.

그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다.

코드 품질과 일관성을 유지하는 것이 왜 중요할까요?

1. 가독성 향상
   • 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다.
   • 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다.
2. 유지보수 용이성
   • 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다.
   • 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다.
3. 팀 협업 향상
   • 코드가 일관되고 품질이 높으면, 팀원들 간의 협업이 원활해집니다.
   • 서로의 코드를 쉽게 이해하고, 리뷰 및 피드백 과정이 더 효율적으로 진행될 수 있습니다.
4. 에러 및 버그 감소
   • 코드 품질을 높이는 것은 에러나 버그의 발생을 줄이는데 도움이 됩니다.
   • 이는 개발 과정에서 시간을 절약하고, 사용자에게 더 안정적인 소프트웨어를 제공할 수 있게 합니다.
5. 코드 리뷰 효율성
   • 코드 품질과 일관성이 높을수록 코드 리뷰 과정에서 스타일 관련 이슈에 집중할 필요가 줄어듭니다.
   • 이를 통해 개발자들은 코드의 로직과 아키텍처에 더 집중하며, 전반적인 코드 품질을 개선할 수 있습니다.
6. 프로젝트의 생산성 향상
   • 코드 품질과 일관성을 유지하면, 프로젝트 전체의 생산성이 향상됩니다.
   • 개발 속도가 빨라지고, 에러와 버그를 수정하는 데 들어가는 시간이 줄어들어 전체적인 개발 프로세스가 더 효율적으로 진행됩니다.

결론적으로, 코드 품질과 일관성을 유지하는 것은 소프트웨어 개발 프로젝트의 전반적인 성공에 큰 영향을 미치는 중요한 요소입니다.

 

이제, 각각의 도구들에 대해 알아보도록 할게요

 

ESLint

• JavaScript 코드 품질과 일관성을 위한 정적 분석 도구입니다.
• 프로젝트에 규칙을 설정함으로써 일관된 코딩 스타일을 강제할 수 있습니다. 
• 예를 들어, 세미콜론 사용, 변수 선언 방식 등의 규칙을 설정할 수 있습니다.
• 이를 통해 프로젝트 전체에서 일관된 코드 스타일을 유지할 수 있으며, 팀원들 간의 협업이 더 원활해집니다.

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

 

Husky

• Git hooks를 쉽게 설정할 수 있는 도구입니다. Git hooks는 Git에서 제공하는 기능으로, 특정 Git 이벤트(예: commit, push)가 발생할 때 실행되는 스크립트입니다. Husky를 사용하면 프로젝트에 Git hook을 쉽게 추가할 수 있어, 예를 들어 커밋 전에 ESLint와 Prettier를 실행하여 코드를 검사하고 정리할 수 있습니다.

Husky - Git hooks

 

Prettier

• 코드 포맷터로, 코드의 일관된 스타일을 유지하기 위해 사용됩니다. Prettier는 설정된 규칙에 따라 코드를 자동으로 수정하여 가독성을 높이고, 프로젝트 전체에서 통일된 코드 스타일을 보장합니다.

Prettier · Opinionated Code Formatter

 

이러한 도구들을 설정하였을 때의 이점은 다음과 같습니다

코드 일관성

• 프로젝트 전체에서 일관된 코딩 스타일을 유지할 수 있어 가독성이 향상되고 유지보수가 쉬워집니다.
  코드 품질 향상: 정적 분석 도구를 사용하여 버그나 잠재적 문제를 미리 찾아낼 수 있습니다.

팀 협업 향상

•  코드의 일관성이 유지되면, 팀원들이 서로의 코드를 이해하기 쉬워지며 협업이 원활해집니다.

 

세팅이 필요한 이유는 무엇인가요?

세팅이 필요한 이유는 여러가지가 있지만 그 중 중요한 몇 가지 이유를 적어두었습니다.

1. 프로젝트의 품질과 가독성을 높여 개발 효율성을 향상할 수 있습니다.
2. 팀원 간의 코드 스타일 차이로 인한 혼란을 줄일 수 있습니다.
3. 코드 리뷰 과정에서 스타일 관련 이슈를 줄여, 더 중요한 로직과 아키텍처에 집중할 수 있게 해 줍니다.
4. + Git hooks를 사용하여 자동화된 코드 검사와 포매팅을 적용함으로써, 실수를 줄이고 코드 품질을 일관되게 유지할 수 있습니다.

이러한 도구들을 설정하는 것은 프로젝트의 초기 단계에서 진행하는 것이 좋습니다. 

그러면 프로젝트 시작부터 일관된 코드 스타일과 높은 코드 품질을 유지할 수 있습니다. 

이후에도 꾸준히 도구들을 업데이트하고 규칙을 개선함으로써, 프로젝트의 건강한 성장을 지원할 수 있습니다.

 

 

---

 

ESLint, Husky, Prettier 세팅하기

ESLint 세팅 예시 - .eslintrc.js

.eslintrc.js라는 파일을 생성하고 아래와 같이 작성할 수 있습니다.

예시 코드이므로, 팀원과 함께 협의하여 규칙을 정하는 것이 좋습니다.

module.exports = {
  // 사용하려는 파서를 정의합니다. (예: babel-eslint)
  parser: 'babel-eslint',

  // 사용할 확장 및 플러그인을 정의합니다.
  extends: ['airbnb', 'prettier'],

  // 프로젝트에 사용되는 전역 변수를 정의합니다.
  globals: {
    window: true,
    document: true,
  },

  // 사용할 규칙을 정의합니다.
  rules: {
    // 예: 세미콜론 사용
    semi: ['error', 'always'],
    // 예: 콘솔 사용 허용
    'no-console': 'off',
  },
};

 

Husky 세팅 예시 - package.json

package.json 파일 내에 다음과 같이 추가합니다.

{
  // 기존 package.json 내용
  "husky": {
    "hooks": {
      // pre-commit 후크에 ESLint와 Prettier를 실행하는 스크립트를 정의합니다.
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    // Git에 stage된 JavaScript 파일에 대해 ESLint와 Prettier를 실행합니다.
    "*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

 

Prettier 세팅 예시 - .prettierrc

.prettierrc라는 파일을 생성하고 아래와 같이 작성할 수 있습니다.

이 또한 예시 코드이므로 팀원들과 함께 규칙을 협의하고 정하는 것이 좋습니다.

{
  // 줄바꿈에 사용할 문자를 정의합니다. (예: LF 또는 CRLF)
  "endOfLine": "lf",
  // 세미콜론 사용 여부를 정의합니다.
  "semi": true,
  // 문자열에 사용할 따옴표의 종류를 정의합니다. (예: single 또는 double)
  "singleQuote": true,
  // 들여쓰기에 사용할 스페이스의 개수를 정의합니다.
  "tabWidth": 2,
  // 파일 끝에 개행 문자를 추가할지 여부를 정의합니다.
  "trailingComma": "all"
}

 

---

End