선언되었지만 아직 사용하지 않은 함수에 대한 빨간줄

Question

defined but never used.eslint@typescript-eslint/no-unused-vars

만들고 아직 다른 곳에서 import 하거나 사용하지 않아서 빨간줄이 뜹니다.

문제는 없으나 헷갈리기도 하고 ,, 강의에서 강사님은 빨간줄이 안뜨는데

ESLint 설정을 따로 하신 걸까요?

헷갈리니 설정을 하는 것을 추천하시나요?

이정환 Winterlood · Answer

Minho Yang님의 제보를 통해 알아낸 새로운 소식과 함께 다시 답변 드리겠습니다.

아래의 답변은 무시해주세요 **

원래 14.x 버전대의 앱에서는 ESLint no-unused-vars 설정이 기본 해제되어 있기 때문에, 별도의 rules 설정을 하시지 않아도 문제가 발생하지 않았는데요, 버전이 계속하여 변경 되면서 ESLint 기본 rules 설정도 자꾸만 바뀌고 있는 것 같습니다.

이에 번거로우시겠지만 해당 오류가 발생하실 경우 말씀하신대로 아래와 같이 eslintrc.json 파일에 새로운 rules 옵션을 추가하시면 됩니다

{
  (... 중략)
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

Minho Yang · Answer

저는 Next.js 14.2.26 로 설치했는데 같은 현상이 나와서 이전 리엑트 강의를 참고하여 .eslintrc.json 파일에 설정을 추가하였습니다.

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

Minho Yang · Answer

저도 페이지 라우팅 파트를 학습중입니다.
진행중 [id].tsx 파일에서는 같은 현상이 해결되지 않아 설정을 다시 수정했습니다.

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react-hooks/rules-of-hooks": "off"
  }
}

일단 빨간줄이 안나오기는 하는데 이렇게 놓고진행해도 될까요

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

우선 현재 2섹션 실습을 진행중인 Next.js 앱의 nextjs 버전이 15.x이지는 않은가요?

참고로 우리 강의에서는 페이지 라우터 섹션에 한해서는 14.x 버전으로 설치를 안내 드리고 있습니다 (2.1 챕터 6분 5초를 확인해 보세요) 현재 설치된 버전은 package.json 파일에서 확인하실 수 있습니다.

14.x 버전에서는 사용하지 않는 변수에 대해 오류를 표시하는 no-unused-vars 옵션이 기본 해제 되어 있어 오류가 발생하지 않는데요

15.x 버전에서는 no-unused-vars 옵션이 설정되어 있어서 사용하지 않는 변수를 선언하시면 오류가 발생하게 됩니다.

이를 해결하시려면 말씀하신대로 ESLint 설정 파일에 rules를 추가해 해당 옵션을 해제하시거나, 강의 진행과 동일한 버전인 14.x 버전으로 앱을 다시 생성하시는 걸 권장드립니다.

인프런 커뮤니티 질문&답변

선언되었지만 아직 사용하지 않은 함수에 대한 빨간줄