개발 도구
ESLint
ESLint는 코드를 실행하기 전에 설정된 규칙에 따라 문제를 찾아 알려 주는 코드 검사 도구입니다.
쉬운 설명
AI가 코드를 고친 뒤 “lint 검사가 실패했어요”라는 결과를 볼 수 있어요. 린트는 코드를 읽어 잠재적 오류나 정해 둔 작성 규칙 위반을 찾는 검사예요. ESLint는 자바스크립트 코드에서 이런 검사를 수행하며, 타입스크립트 등에는 맞는 설정과 추가 도구를 사용해요. 검사 결과에는 보통 파일 위치와 어긴 규칙 이름이 나오므로 무엇을 확인할지 찾을 수 있어요.
이런 상황에서 만나요
신청 완료 문구를 만드는 함수를 추가했는데 ESLint에서 no-undef 오류가 나왔다고 해 볼게요. 이름을 잘못 적어, 선언하지 않은 변수를 사용한 예시예요.
변수 이름 하나가 달라 검사가 실패했어요
export function message(name) {
return nmae;
}2:10 error 'nmae' is not defined. no-undef
export function message(name) {
return name;
}- 1매개변수는 name인데 반환문에는 nmae라고 적혀 있어요.
- 22번째 줄의 정의되지 않은 이름을 no-undef 규칙이 지적해요.
- 3사용하려던 변수 이름으로 고친 뒤 다시 검사해요.
먼저 파일 위치와 규칙 이름을 읽어요. 아래에서는 매개변수 name을 받아 놓고 반환문에 nmae라고 적었어요. 철자를 고친 뒤 검사를 다시 실행하고, 실제 문구도 의도대로 나오는지 확인해요.
헷갈리기 쉬운 점
ESLint를 통과하면 앱에 오류가 없나요?
설정된 규칙으로 찾을 수 있는 문제를 통과했다는 뜻이에요. 결제 금액이 맞는지, 버튼이 원하는 화면으로 가는지 같은 동작까지 모두 보장하지는 않아요. 테스트와 실제 사용 확인을 함께 해야 해요.
오류를 없애려고 규칙부터 끄면 문제도 함께 숨길 수 있어요. 자동 수정 옵션도 모든 문제를 고치지는 못하므로 바뀐 내용을 확인해요. 규칙상 error와 앱 실행 중 발생한 오류는 같은 의미가 아니에요.
왜 알아야 할까요?
긴 검사 결과에서 파일·위치·규칙을 골라 AI에게 전달할 수 있어요. 규칙을 무시할지부터 고민하기보다 코드와 프로젝트 설정 중 무엇을 고쳐야 하는지 판단할 수 있어요.
조금 더 자세히
ESLint 규칙은 끔(off), 경고(warn), 오류(error)로 설정할 수 있습니다. 경고가 작업을 실패시키는지는 실행 옵션과 자동화 설정에도 영향을 받습니다.
린트와 코드 포맷팅은 목적이 다릅니다. 린트는 규칙 위반을 찾고, 포맷터는 들여쓰기 같은 표기를 일정하게 맞춥니다. 타입 검사 역시 별도 검사이며, 타입스크립트 프로젝트에서는 그 역할에 맞는 ESLint 구성을 사용합니다.
직접 사용할 때 확인해 보세요
- 파일 위치와 규칙 이름을 확인한다
- 오류 원인과 설정 문제를 구분한다
- 수정 후 검사와 실제 동작을 확인한다
관계 지도
