ESLint 규칙 중 grouped-accessor-pairs 란?

프로그래머라면 코드를 더욱 안전하고 효율적으로 작성하기 위해 ESLint와 같은 도구를 사용합니다. ESLint는 JavaScript 코드의 품질을 보장해 주는 린팅(Linting) 도구로, 여러 가지 유용한 규칙을 제공합니다. 그 중 하나인 grouped-accessor-pairs 규칙은 코드에서 접근자 속성을 보다 일관되게 작성할 수 있도록 돕습니다. 이 글에서는 grouped-accessor-pairs 규칙에 대해 자세히 살펴보고, 이 규칙이 코드의 품질을 어떻게 향상시키는지를 알아보겠습니다.

grouped-accessor-pairs 규칙이란?

grouped-accessor-pairs는 ESLint가 제공하는 규칙 중 하나로, 객체 리터럴(Object Literals) 혹은 클래스에서 getter와 setter 쌍이 올바르게 그룹화되어 작성되었는지 검사합니다. 일반적으로 getter와 setter는 하나의 속성을 중심으로 함께 사용됩니다. 따라서 이 두 함수가 가까이 배치되면 코드의 가독성이 높아지고 유지 보수에도 용이해집니다.

이 규칙은 다음과 같은 상황을 방지합니다:

// 잘못된 접근자 쌍 배치 예시
const obj = {
  get value() {
    return this._value;
  },
  otherProperty: true,
  set value(val) {
    this._value = val;
  }
};

위 코드에서 getter와 setter는 value 속성에 대해 정의되어 있지만, otherProperty가 그 사이에 위치해 있습니다. 이는 코드의 가독성을 해치고 접근자 쌍을 식별하기 어렵게 만듭니다.

올바른 grouped-accessor-pairs 사용 방법

grouped-accessor-pairs 규칙을 따르면, getter와 setter는 하나의 속성에 대해 서로 인접하게 정의되어야 합니다. 아래 예시는 이를 어떻게 구현하는지 보여줍니다:

// 올바른 접근자 쌍 배치 예시
const obj = {
  get value() {
    return this._value;
  },
  set value(val) {
    this._value = val;
  },
  otherProperty: true
};

위 코드에서는 getter와 setter가 같은 value 속성을 위해 나란히 정의되어 있습니다. 이 방식은 코드 구조가 명확하고 논리적인 흐름을 제공합니다.

ESLint에서 grouped-accessor-pairs 규칙 설정

grouped-accessor-pairs 규칙은 ESLint 설정 파일인 .eslintrc에 다음과 같이 추가하여 사용할 수 있습니다:

{
  "rules": {
    "grouped-accessor-pairs": "error"
  }
}

이 설정을 통해 코드에서 접근자 쌍이 올바르게 그룹화되어 있는지 ESLint가 검사하며, 어긋난 경우 에러를 발생시킵니다.

결론

ESLint의 grouped-accessor-pairs 규칙은 접근자 쌍을 일관되게 작성하도록 강제함으로써 JavaScript 코드의 가독성을 향상시킵니다. getter와 setter를 올바르게 그룹화하면, 코드 유지 보수가 용이해지고 다른 개발자들이 코드를 이해하기 쉬워집니다. 이 규칙을 적극 활용하여 코드 품질을 높이고 에러 발생을 예방하세요.

코드 작성 시 접근자 쌍을 잘못 배치하는 실수를 줄이고 싶다면, ESLint와 grouped-accessor-pairs 규칙을 통합해 보기를 권장합니다. 올바른 접근자 쌍 배치는 가독성을 높이며 프로젝트의 성능을 향상시키는 현명한 선택입니다.