왜 내 코드는 맨날 오류일까? ESLint가 도와줄게!

여러분, 코딩하면서 이런 상황 겪어본 적 있나요?
"어? 분명 코드는 잘 썼는데 왜 갑자기 오류가 뜨지?"
"이거 분명 동작은 하는데... 뭔가 이상해..."
혹시 내가 놓친 버그나 잘못된 문법이 있을까 걱정되죠? 바로 이때 ESLint가 도와줄 수 있습니다😊

---

ESLint란 뭐지?

쉽게 말해서, ESLint는 "코드 경찰"이에요. 여러분이 자기도 모르게 저지르는 작은 실수들을 찾아내고 알려주는 똑똑한 툴이죠. 자, 예를 들어볼게요. 우리가 JavaScript 코드를 작성할 때, 어디서 변수 하나 빼먹었거나, 함수 괄호를 잘못 닫았을 때 "삑삑!" 하면서 알려줘요. 마치 교통 신호를 지키는 경찰처럼요.

코드를 막 쓰고 나서 "괜찮겠지?"라고 생각했는데, 갑자기 ESLint가 와서 "잠깐! 여기서 변수 하나 안 썼잖아!"라며 오류를 딱 잡아내는 거죠.
"내가 언제 실수했지?" 하고 놀라면서도... 내심 안도하게 되는 그런 친구랄까요.

---

ESLint 설치는 어떻게 해?

설치도 간단해요! 명령어 한 줄이면 끝! 😎

npm install eslint --save-dev

설치후에는 구성파일을 만들어야 합니다! ESLint는 그 파일을 읽고 안에 정의된 규칙을 적용합니다.(이 부분은 자동으로 정의되어서 생략해도 상관없다!)

npm init @eslint/config

 

명령어 실행시 몇가지 질문을 합니다. 보통의 사용방법은 다음과 같아요!

 

• ESLint 사용 방식을 묻는 질문:
  • style: 기본 스타일 설정을 적용
• 프로젝트에서 사용하는 모듈 타입:
  • esm (ES6 모듈)
• 프레임워크:
  • react 선택 (React 프로젝트일 경우)
• TypeScript 사용 여부:
  • 선택 사항: 예(Yes) 또는 아니오(No)
• 코드가 실행되는 환경:
  • browser (브라우저에서 동작)
• 스타일 가이드 선택:
  • airbnb 스타일 가이드 선택
• 설정 파일 형식:
  • JavaScript

---

설치가 끝났다면 ESLint가 일을 시작할 준비를 마친 거예요.
이제 우리의 코드 경찰이 언제든 실수할 때마다 "삑!"하고 알려줄 준비가 된 겁니다.

 

그럼 ESLint가 어떻게 작동해?

자, 우리가 코드를 막 써 내려갈 때 ESLint가 뒤에서 조용히 감시하고 있다고 상상해 보세요. 코드 작성 중에 "어, 여기에 세미콜론 안 붙였네!" 하면서 작은 오류도 빠짐없이 알려주는 거죠.

 

다음과 같은 상황이 있다고 가정해볼게요:

const name = "Junsu"
console.log("Hello " + name)

 

이 코드는 동작할 수 있어요. 근데 ESLint가 보더니 "잠깐, 세미콜론은 어딨어?"라고 물어봐요.
사실 세미콜론을 안 붙여도 브라우저는 돌아가지만, ESLint는 우리의 코드를 더 깔끔하고 안전하게 만들도록 도와주는 거예요.

---

ESLint를 사용하면 어떤 점이 좋아?

1. 코드 품질 향상: 사소한 실수를 줄이고, 일관된 코드를 작성할 수 있어요.
2. 디버깅 시간 절약: 오류를 미리 찾아내 주니, 나중에 고생할 일이 적어집니다.