ESLint 규칙 중 dot-notation 란?

프로그래밍에서 코드를 작성할 때, 가독성과 성능을 높이기 위해 다양한 도구와 규칙이 사용됩니다. 그중 하나가 ESLint입니다. 이는 자바스크립트 코드의 품질을 유지하기 위해 사용하는 정적 분석 도구로서, 여러 가지 규칙을 제공하여 개발자가 실수를 줄이고 더 나은 코드를 작성할 수 있도록 돕습니다.

이번 블로그에서는 그중 "dot-notation" 규칙에 대해 자세히 알아보겠습니다.

dot-notation 규칙이란?

ESLint의 dot-notation 규칙은 객체 속성에 접근할 때 도트 표기법(dot notation)을 사용하도록 권장하는 규칙입니다. 자바스크립트에서 객체의 속성에 접근하는 방법은 두 가지가 있습니다:

도트 표기법 (예: object.property)
브래킷 표기법 (예: object['property'])

이 규칙은 가능하면 도트 표기법을 사용하여 코드를 더 깔끔하고 직관적으로 만드는 것을 목표로 합니다. 특히 속성 이름이 유효한 식별자일 때 도트 표기법이 더 가독성이 좋고 간결하기 때문입니다.

예제 코드

올바른 사례와 잘못된 사례를 통해 dot-notation 규칙의 적용 방식을 살펴보겠습니다.

잘못된 예제

// 잘못된 브래킷 표기법 사용
const user = {
  name: "John",
  age: 30
};

console.log(user['name']);  // 경고 발생
console.log(user['age']);   // 경고 발생

올바른 예제

// 올바른 도트 표기법 사용
const user = {
  name: "John",
  age: 30
};

console.log(user.name);  // 문제 없음
console.log(user.age);   // 문제 없음

dot-notation 규칙의 이점

1. 코드 가독성 향상

도트 표기법은 코드의 구조를 단순화하여 가독성과 유지 보수를 쉽게 만듭니다. 이는 코드의 명확성을 높이고, 개발자가 쉽게 이해할 수 있도록 돕습니다.

2. 코드 자주성

브래킷 표기법은 유효한 자바스크립트 식별자일 때만 사용되므로, 자주성 없는 표기법을 줄여줍니다. 이는 실수를 방지하고 코드를 더 깔끔하게 유지하는 데 도움을 줍니다.

ESLint에서 dot-notation 규칙 활성화하기

dot-notation 규칙은 ESLint에서 활용도가 높은 규칙 중 하나이며, 기본 설정으로 활성화되지 않은 경우도 있을 수 있습니다. 이를 활성화하려면 .eslintrc 파일에 다음과 같이 설정할 수 있습니다:

{
  "rules": {
    "dot-notation": "error"
  }
}

이를 통해 객체의 속성 접근 방식에 관한 오류를 사전에 탐지하고, 코드의 품질을 높일 수 있습니다.

결론

dot-notation 규칙은 자바스크립트에서 객체 속성을 효율적으로 접근하여 코드의 품질을 유지하고, 가독성을 향상시키기 위한 유용한 ESLint 규칙입니다. 이 규칙을 통해 불필요한 브래킷 사용을 줄이고, 코드의 명확성을 유지할 수 있습니다. 앞으로 코드를 작성할 때는 ESLint의 dot-notation 규칙을 적극적으로 활용하여 더 나은 프로그래밍 습관을 길러보세요!