티스토리 뷰
목차
JavaScript로 코딩을 하다 보면 코드가 점점 길어지고 복잡해지면서 오류가 발생하기 쉬워집니다. 이런 문제를 방지하고, 더 깨끗하고 일관된 코드를 작성하기 위해 우리는 도구의 도움을 받을 수 있습니다. 그중에서도 ESLint는 JavaScript 개발자들 사이에서 가장 널리 사용되는 도구 중 하나입니다.
이번 포스팅에서는 ESLint가 무엇인지, 왜 사용해야 하는지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다.
★ ESLint란 무엇인가요?
ESLint는 JavaScript와 관련된 코드의 문법과 스타일을 검사하는 정적 코드 분석 도구입니다. 정적 코드 분석이란, 코드를 실행하지 않고 코드를 검사하여 오류, 버그, 스타일 문제를 찾아내는 과정을 말합니다. ESLint는 여러분이 작성한 JavaScript 코드에서 문법적인 실수, 불필요한 코드, 일관성 없는 스타일 등을 찾아내어 수정할 수 있도록 도와줍니다.
간단히 말해, ESLint는 여러분의 코드가 더 깔끔하고 일관되며 오류 없이 동작할 수 있도록 돕는 도구입니다.
★ ESLint를 사용해야 하는 이유
ESLint를 사용하면 얻을 수 있는 장점은 많습니다.
1) 코드 품질 향상
ESLint는 코드에서 발생할 수 있는 일반적인 오류를 미리 잡아줍니다. 변수 선언 오류, 잘못된 함수 호출, 정의되지 않은 변수 사용 등 다양한 문제를 사전에 발견하고 수정할 수 있습니다. 이를 통해 여러분의 코드 품질이 자연스럽게 향상됩니다.
2) 코딩 스타일 일관성 유지
팀 프로젝트를 진행하다 보면, 각 개발자가 사용하는 코딩 스타일이 달라 코드가 일관되지 않을 수 있습니다. ESLint는 여러분의 팀이 합의한 코딩 스타일을 규칙으로 설정하고, 이를 자동으로 검사하여 모든 팀원의 코드가 일관된 스타일을 유지할 수 있도록 도와줍니다.
3) 생산성 향상
ESLint는 코드 작성 중 실시간으로 문제를 감지하고 알려줍니다. 이를 통해 여러분은 디버깅에 시간을 낭비하지 않고, 더 빠르게 문제를 해결할 수 있습니다. 코드 리뷰 단계에서도 ESLint가 코드 스타일과 품질을 미리 체크해주기 때문에, 리뷰어들은 로직에 집중할 수 있어 전체적인 생산성이 높아집니다.
4) 최신 자바스크립트 기능에 대한 지원
ESLint는 최신 JavaScript 문법과 기능을 지원하며, 특정 환경(예: Node.js, React)에서 사용하는 특별한 규칙도 적용할 수 있습니다. 이를 통해 새로운 기술을 사용할 때도 여러분의 코드가 올바르게 작성되었는지 확인할 수 있습니다.
★ ESLint 사용하는 방법
이제 ESLint를 설치하고 사용하는 방법을 알아보겠습니다. 단계별로 알아보겠습니다.
1) ESLint 설치
먼저, ESLint를 설치해야 합니다. Node.js와 npm(Node Package Manager)이 설치되어 있다면, 터미널이나 명령 프롬프트에서 다음 명령어를 실행하여 ESLint를 설치할 수 있습니다.
npm install eslint --save-dev이 명령어는 ESLint를 프로젝트의 개발 의존성(devDependencies)으로 설치합니다.
2) ESLint 설정
ESLint를 설치한 후에는 프로젝트에 맞는 규칙을 설정해야 합니다. 기본 설정 파일을 생성하려면 다음 명령어를 실행합니다.
npx eslint --init이 명령어를 실행하면 몇 가지 질문이 나오며, 여러분의 프로젝트에 맞는 설정을 선택할 수 있습니다. 예를 들어, 코드 스타일, JavaScript 버전, 사용 중인 프레임워크 등을 설정할 수 있습니다.
설정이 완료되면 프로젝트 루트에 .eslintrc.js, .eslintrc.json 또는 .eslintrc.yml 파일이 생성됩니다. 이 파일에는 ESLint 규칙과 설정이 저장됩니다. 필요에 따라 이 파일을 직접 수정하여 규칙을 추가하거나 변경할 수 있습니다.
3) 코드 검사 및 수정
설정이 완료되면, 이제 ESLint를 사용해 코드를 검사할 수 있습니다. 터미널에서 다음 명령어를 실행하세요.
npx eslint <파일 경로>
예를 들어, src 폴더 안에 있는 모든 파일을 검사하려면 다음과 같이 입력합니다.
npx eslint src/*ESLint는 지정된 파일을 검사하고, 발견된 오류나 경고를 출력합니다. 문제가 발견되면, 이를 수정하거나 ESLint 설정 파일에서 해당 규칙을 비활성화할 수 있습니다.
4) 자동 수정 기능
ESLint는 일부 오류나 스타일 문제를 자동으로 수정할 수 있는 기능을 제공합니다. 다음 명령어를 실행하여 자동으로 수정 가능한 문제를 해결할 수 있습니다.
npx eslint <파일 경로> --fix이 명령어는 ESLint가 수정할 수 있는 문제를 자동으로 수정합니다. 하지만 자동 수정이 모든 문제를 해결하는 것은 아니므로, 결과를 확인하고 필요한 경우 수동으로 수정해야 합니다.
5) 에디터 통합
ESLint는 다양한 코드 편집기와 통합되어 실시간으로 코드를 검사할 수 있습니다. 예를 들어, Visual Studio Code(VSCode)를 사용하는 경우, ESLint 확장을 설치하면 코드 작성 중에 ESLint가 실시간으로 오류와 경고를 표시해줍니다. 이를 통해 문제를 즉시 해결할 수 있어, 더 빠르게 개발할 수 있습니다.
★ ESLint 규칙 커스터마이징
ESLint는 매우 유연하여, 여러분의 프로젝트에 맞게 규칙을 커스터마이징할 수 있습니다. .eslintrc 파일을 열어 다음과 같이 규칙을 추가하거나 수정할 수 있습니다.
{
"rules": {
"no-console": "warn",
"semi": ["error", "always"],
"quotes": ["error", "single"]
}
}위 예시에서 no-console 규칙은 warn으로 설정되어, 콘솔 로그가 사용될 경우 경고를 표시합니다. semi 규칙은 항상 세미콜론을 사용하도록 강제하며, 그렇지 않을 경우 오류를 발생시킵니다. quotes 규칙은 문자열을 항상 작은따옴표로 감싸도록 설정합니다.
필요에 따라 특정 규칙을 비활성화하거나, 에러 대신 경고를 표시하도록 설정할 수도 있습니다. 이렇게 설정한 규칙들은 프로젝트 전반에 걸쳐 일관된 코딩 스타일을 유지하는 데 도움이 됩니다.
ESLint는 JavaScript 개발자가 코드 품질을 높이고, 일관된 코딩 스타일을 유지하는 데 필수적인 도구입니다. 코드에서 발생할 수 있는 문제를 미리 감지하고, 스타일 규칙을 자동으로 적용해주는 ESLint를 사용하면 더 나은 코드, 더 효율적인 팀 작업, 더 빠른 개발 속도를 경험할 수 있습니다.
ESLint는 처음 사용할 때는 조금 복잡하게 느껴질 수 있지만, 몇 가지 기본적인 설정과 사용법만 익히면 금방 익숙해질 것입니다.