ESLint 예시를 통해 활용하기

ESLint는 소스 코드의 문법적 오류를 검출하고, 일관된 코딩 스타일을 유지하기 위한 정적 코드 분석 도구이다. ESLint는 코드를 작성하는 과정에서 설정된 규칙을 기반으로 코드를 분석하고, 위반 사항을 식별하여 개발자에게 알린다. 이러한 프로세스는 개발자가 코딩 규약을 준수하고, 오류 가능성을 줄이며, 유지 보수성을 향상시킬 수 있도록 돕는다.

 

코드 일관성

프로젝트에 일관된 코딩 스타일을 적용함으로써 가독성과 유지보수성을 향상시킨다.

1. 들여쓰기 규칙(indent):
   코드 블록 내의 들여쓰기 수준을 지정하기 위해 ESLint의 indent 규칙은 사용된다. 예를 들어, indent 규칙이 "error", 2로 설정된 경우, 들여쓰기는 2개의 공백으로 일관되게 적용되어야 한다. 이는 소스 코드 내의 블록 구조가 동일한 시각적 구분을 갖도록 유도한다.
2. // ESLint `indent` 규칙 설정 예시 { "rules": { "indent": ["error", 2] } }
3. 따옴표 규칙(quotes):
   문자열 표현에 사용되는 따옴표의 종류를 강제하기 위해, quotes 규칙은 설정될 수 있다. "quotes": ["error", "single"]로 설정된 경우, 모든 문자열은 단일 따옴표로 감싸져야 한다. 이는 코드베이스에 걸쳐 문자열 리터럴의 표현을 통일한다.
4. // ESLint `quotes` 규칙 설정 예시 { "rules": { "quotes": ["error", "single"] } }
5. 세미콜론 규칙(semi):
   자바스크립트 문장의 끝에 세미콜론의 사용을 요구하는 semi 규칙은 코드의 끝맺음을 명확히 한다. "semi": ["error", "always"] 설정은 각 문장 후 세미콜론의 사용을 강제한다.
6. // ESLint `semi` 규칙 설정 예시 { "rules": { "semi": ["error", "always"] } }
7. 변수 선언 규칙(no-var):
   ES6 이후, let과 const의 도입으로 변수의 스코프를 더욱 명확하게 지정할 수 있게 되었다. no-var 규칙은 var 키워드 사용을 금지하고 let 또는 const의 사용을 권장한다.
8. // ESLint `no-var` 규칙 설정 예시 { "rules": { "no-var": "error" } }

 

스타일 가이드 준수

스타일 가이드 준수는 특정 스타일 가이드에 정의된 규칙들을 ESLint 설정에 적용하여 코드 일관성을 강화하는 것을 목표로 한다. 이 과정에서 ESLint는 각 스타일 가이드의 규칙을 ESLint 규칙으로 변환하여 사용한다. 각 스타일 가이드는 특정 코딩 컨벤션을 제시하고, 이를 ESLint 설정으로 반영하게 되면, 해당 컨벤션에 맞지 않는 코드에 대해 경고 혹은 에러를 발생시킨다.

 

예를 들어, Airbnb의 JavaScript 스타일 가이드를 ESLint와 함께 사용하는 경우를 살펴보겠다.

1. Airbnb 스타일 가이드 적용
   Airbnb의 스타일 가이드는 가장 널리 채택된 JavaScript 스타일 가이드 중 하나이며, 다음과 같이 ESLint에 적용될 수 있다.설치 후, ESLint 설정 파일(.eslintrc)에 Airbnb 스타일 가이드를 확장하여 적용한다.
2. { "extends": "airbnb", "rules": { // 추가적으로 커스텀 규칙을 여기에 정의할 수 있다. } }
3. npm install eslint-config-airbnb --save-dev
4. 스타일 가이드 규칙 예시
   Airbnb 스타일 가이드는 객체 리터럴에서의 괄호 간격, 화살표 함수의 괄호 사용 등 다양한 스타일 규칙을 포함한다. 예를 들어, 객체 리터럴의 괄호 내부에는 공백이 필요하다는 규칙이 있다.
5. // 올바른 객체 리터럴 괄호 사용 const obj = { foo: 'bar' }; // 잘못된 객체 리터럴 괄호 사용 const obj = {foo: 'bar'};
6. 규칙 오버라이드
   팀의 상황에 따라 Airbnb 스타일 가이드의 일부 규칙을 오버라이드 할 수도 있다. 예를 들어, 프로젝트에서 함수 선언시 항상 명시적으로 return을 사용하도록 강제하고 싶다면, ESLint 설정 파일에서 해당 규칙을 오버라이드할 수 있다.
7. { "extends": "airbnb", "rules": { "arrow-body-style": ["error", "always"] } }

 

팀 내 합의

 

ESLint를 통한 팀 내 합의 과정은 코딩 컨벤션을 공동으로 정의하고 관리하는 과정을 포함한다. 이는 코드의 일관성을 달성하고, 팀원 간의 명확한 기대치를 설정하는 데 중요하다. 팀 내 합의는 프로젝트 초기에 코드 스타일과 품질 기준에 대한 합의를 도출하고, 이를 ESLint 규칙으로 정립하여 코드 리뷰 과정에서의 주관적인 판단을 감소시킨다.

 

다음은 합의에 이르는 일련의 과정들이다.

1. 규칙 선정 회의:
   팀원 모두가 참여하는 회의를 개최하여, 각자의 코딩 스타일과 선호도를 공유한다. 이를 바탕으로, 어떤 스타일 가이드를 참고할 것인지, 어떤 규칙을 채택할 것인지 논의한다.
2. 초안 작성:
   논의를 바탕으로 한 규칙의 초안을 작성한다. 초안에는 변수 명명 규칙, 함수 선언 방식, 객체와 배열의 작성 방식 등 구체적인 규칙이 포함될 수 있다.
3. 피드백과 수정:
   팀원들에게 초안을 공유하고 피드백을 받는다. 필요에 따라 규칙을 추가하거나 수정하며, 모두가 수용할 수 있는 합의점을 찾는다.
4. 규칙 확정 및 ESLint 설정:
   합의된 규칙을 바탕으로 .eslintrc 파일을 작성하거나 수정하여, ESLint 설정을 완성한다.
5. 문서화 및 공유:
   최종적으로 합의된 코딩 스타일과 ESLint 규칙을 문서화하고, 팀 내부의 문서 공유 시스템에 등록하여 모든 팀원이 쉽게 접근하고 숙지할 수 있게 한다.
6. 지속적인 검토 및 개선:
   정기적인 코드 리뷰와 피드백을 통해 적용된 규칙의 유효성을 검토하고, 필요한 경우 규칙을 개선한다.

 

예시: 웹 개발 팀이 ESLint를 도입하기로 결정했다고 가정해보자. 팀은 Airbnb의 스타일 가이드를 기본으로 하되, 몇 가지 규칙은 팀의 상황에 맞게 수정하기로 결정한다. 예를 들어, Airbnb 가이드라인은 화살표 함수에서 단일 매개변수에 괄호를 사용하지 않지만, 팀 내에서는 명확성을 위해 항상 괄호를 사용하기로 합의할 수 있다.

이러한 결정을 반영하기 위해 .eslintrc 파일에 다음과 같이 설정한다:

{
  "extends": "airbnb",
  "rules": {
    "arrow-parens": ["error", "always"], // 화살표 함수의 매개변수에 항상 괄호를 사용하도록 설정
    // 추가적으로 합의된 규칙을 여기에 정의한다.
  }
}

위의 설정을 통해 팀은 화살표 함수에서의 괄호 사용과 같은 코드 스타일에 대해 일관성을 갖고, 이를 자동으로 검사하며 코드베이스의 품질을 유지할 수 있다.

 

지속적 통합의 활용

지속적 통합(CI, Continuous Integration) 환경에서 ESLint를 활용하는 것은 코드의 통합 과정에서 발생할 수 있는 문제를 조기에 발견하고 수정함으로써, 소프트웨어의 품질을 향상시키는 데 기여한다. ESLint는 CI 파이프라인에 통합되어, 코드가 메인 레포지토리에 병합되기 전에 자동으로 코딩 규칙을 검사하고 오류를 보고한다.

 

다음은 지속적 통합 활용 과정이다.

1. CI 서비스 설정:
   Jenkins, Travis CI, GitHub Actions 등의 CI 서비스를 프로젝트에 설정한다.
2. CI 파이프라인 구성:
   소스 코드가 저장소에 푸시될 때마다 자동으로 실행될 작업들을 파이프라인으로 구성한다. 이는 종종 빌드, 테스트, 코드 분석 등의 단계를 포함한다.
3. ESLint 스크립트 통합:
   package.json 또는 CI 구성 파일에 ESLint를 실행하는 스크립트를 추가한다. 이 스크립트는 코드에 대한 정적 분석을 실행하고, 규칙 위반 사항이 있을 경우 이를 보고한다.
4. 결과의 검토 및 조치:
   ESLint로부터 받은 결과를 검토하여, 오류가 있을 경우 즉시 수정을 요청하고, 오류가 없을 경우 다음 단계로 진행한다.
5. 문서화 및 알림:
   ESLint 검사 결과를 문서화하고, 팀원들에게 알림을 보낸다. 이를 통해 코딩 표준 위반 사항에 대한 인식을 높이고, 지속적으로 코드 품질을 관리한다.

예시: GitHub 프로젝트에 ESLint를 통합하기 위해 GitHub Actions를 설정한다고 가정하자.

.github/workflows/lint.yml 파일을 생성하고 다음과 같이 설정한다:

name: ESLint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run ESLint
        run: npx eslint . --fix

위의 GitHub Actions 워크플로우는 소스 코드가 저장소에 푸시되거나 풀 리퀘스트가 생성될 때마다 실행된다. 이 워크플로우는 리포지토리를 체크아웃하고, Node.js를 설정하며, 필요한 의존성을 설치한 후, ESLint를 실행하여 코드 스타일 및 품질 검사를 수행한다. --fix 옵션은 자동으로 수정 가능한 오류들을 수정한다. 만약 오류가 수정되지 않으면, GitHub Actions는 실패 상태를 반환하고 이를 풀 리퀘스트나 푸시에 보고한다.

 

에디터 통합

에디터 통합은 개발자가 코드를 작성하는 동안 ESLint의 즉각적인 피드백을 받을 수 있게 해주는 과정이다. 이를 통해 개발자는 코드를 저장소에 커밋하기 전에 실시간으로 코딩 규칙을 확인하고, 오류를 수정할 수 있다. 대부분의 현대적인 코드 에디터는 ESLint 플러그인을 지원하며, 이 플러그인들은 코드 작성 시점에서 ESLint 규칙을 적용하고 위반 사항을 강조하여 개발자의 생산성을 향상시킨다.

 

다음은 에디터 통합 과정이다.

1. 플러그인 설치:
   사용하는 코드 에디터에 맞는 ESLint 플러그인을 설치한다. 예를 들어, Visual Studio Code의 경우, 마켓플레이스에서 ESLint 플러그인을 검색하여 설치할 수 있다.
2. 플러그인 설정:
   에디터에 설치된 ESLint 플러그인을 프로젝트의 ESLint 설정에 맞게 설정한다. 이 과정에서 .eslintrc 파일을 에디터가 인식할 수 있도록 한다.
3. 실시간 검사 활성화:
   에디터에서 실시간으로 코드를 검사하고 오류를 표시하는 기능을 활성화한다. 대부분의 ESLint 플러그인은 이 기능을 기본적으로 제공한다.
4. 코드 수정 및 개선:
   코드 작성 중 ESLint 위반 사항을 즉시 확인하고, 문제를 식별하여 수정한다.
5. 사용자 지정 규칙 설정:
   필요에 따라 개인이 선호하는 규칙을 추가하여, ESLint 플러그인이 이를 반영하도록 한다.

 

예시: Visual Studio Code에서 ESLint를 사용하는 방법을 살펴보자.

1. Visual Studio Code를 열고, Extensions 탭으로 이동한다.
2. "ESLint"를 검색하고, ESLint 확장을 설치한다.
3. 프로젝트 루트에 .eslintrc 파일을 생성하고, 규칙을 정의한다.

{
  "extends": "eslint:recommended",
  "rules": {
    // 사용자 지정 규칙을 여기에 추가
  }
}

1. ESLint 확장이 설치된 후, 코드를 작성하면서 실시간으로 ESLint 규칙 위반을 확인할 수 있다.
2. 오류나 경고가 발생하면, 코드 상에 빨간색 혹은 노란색으로 표시되고, 문제를 클릭하면 구체적인 내용을 볼 수 있다.

이러한 통합을 통해, 개발자는 코딩 규칙을 실시간으로 준수하면서 코드를 작성할 수 있으며, 팀 전체의 코드 품질과 일관성을 향상시키는 데 기여할 수 있다.

 

코드 리뷰 강화

코드 리뷰 과정에서 ESLint의 적용은 코드의 품질을 보증하고 개발자 간의 일관된 코딩 스타일을 유지하는 중요한 역할을 수행한다. ESLint는 소스 코드가 공유 리포지토리에 병합되기 전에 자동화된 코드 검사를 제공함으로써, 코드 리뷰어가 스타일이나 형식에 관련된 사소한 문제들보다는 코드의 구조, 알고리즘, 설계 결정과 같은 더 중요한 측면들에 집중할 수 있도록 돕는다.

 

코드 리뷰를 강화하는 ESLint의 적용 방법이다.

1. 리뷰 전 자동화된 검사:
   리뷰어가 코드를 검토하기 전에, ESLint를 통한 자동화된 코드 검사를 실행한다. 이는 리뷰어가 직접적으로 오류를 찾는 대신 시스템에 의해 사전에 식별되게 함으로써, 리뷰 프로세스를 더 효율적이고 집중적으로 만든다.
2. 리뷰 기준 설정:
   ESLint 규칙을 팀 내 리뷰 기준으로 설정하여, 모든 코드가 이 기준을 충족해야만 리뷰를 통과할 수 있도록 한다. 이는 리뷰 프로세스의 일관성과 공정성을 높인다.
3. 코드 리뷰 체크리스트에 포함:
   ESLint에 의해 감지된 사항들을 코드 리뷰 체크리스트에 포함시켜, 리뷰어가 해당 사항들을 확인하고 처리할 수 있도록 한다.
4. 교육적 피드백 제공:
   ESLint 오류를 단순히 지적하는 것이 아니라, 왜 이러한 규칙이 중요한지, 그리고 어떻게 해야 더 나은 코드를 작성할 수 있는지에 대한 교육적 피드백을 제공한다.

 

예시

// 잘못된 코드 예시
function add(a,b){
  return a+b;
}

// ESLint 규칙에 따라 수정된 코드
function add(a, b) {
  return a + b;
}

위의 예시에서 ESLint는 함수 선언시 괄호 내부에 공백이 없고, 더하기 연산자 양쪽에 공백이 없는 문제를 지적할 수 있다. 코드 리뷰 시, 리뷰어는 이러한 사소한 스타일 문제를 지적하기보다는 함수의 명명, 로직의 효율성, 그리고 가독성과 같은 더 큰 그림에 집중할 수 있다. ESLint에 의해 미리 수정된 코드는 리뷰어가 해당 코드의 설계 및 구현에 더 많은 주의를 기울일 수 있게 한다.