ESLint no-unused-vars로 빌드 실패했을 때 대처법

배경

Vercel 배포 시 next build에서 ESLint 검사가 자동으로 돌아간다
로컬에서는 잘 돌아가던 코드가 빌드 단계에서 lint 에러로 터졌다

Failed to compile.

./src/app/(mobile)/check/[id]/inspections/[machineInspectionId]/_components/PictureTable.tsx
84:9  Error: 'subItemData' is defined but never used.  @typescript-eslint/no-unused-vars

문제

@typescript-eslint/no-unused-vars - 선언만 해놓고 실제로 안 쓰는 변수가 있으면 에러가 난다

내 경우, 함수 시그니처에서 두 번째 파라미터를 선언했지만 함수 내부에서 사용하지 않는 케이스였다

const handleImageUpload =
  (
    itemData: SomeType,
    subItemData: AnotherType  // ← 안 쓰는데 선언만 되어 있음
  ) =>
    async (event: React.ChangeEvent<HTMLInputElement>) => {
      // subItemData를 쓰지 않음
      const id = itemData.machineProjectChecklistItemId
      // ...
    }

시도 1: _ 접두사 붙이기 — 실패

JavaScript/TypeScript 관례상 _ 접두사는 "의도적으로 안 쓰는 변수"라는 뜻이다

const handleImageUpload = (
  itemData: SomeType,
  _subItemData: AnotherType  // ← _ 붙임
) => // ...

보통은 ESLint에서 argsIgnorePattern: "^_" 옵션이 설정되어 있으면 이걸로 해결된다고 한다
그러나 내 프로젝트의 ESLint 설정에는 이 옵션이 없어서 _ 붙여도 똑같이 에러가 났다

Error: '_subItemData' is defined but never used.  @typescript-eslint/no-unused-vars

시도 2: eslint-disable-next-line — 성공

해당 줄 바로 위에 주석을 달아서 그 줄만 lint를 무시하게 했다

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleImageUpload = (
  itemData: SomeType,
  _subItemData: AnotherType
) => // ...

빌드 통과함

정리

로컬에서 안 나던 에러가 Vercel 빌드에서 나는 이유

next dev는 lint 안 돌리고, next build는 lint를 돌리기 때문임