Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요 김성관님 이정환입니다.

말씀하시는 빨간줄 설정이 무엇인지 정확히 모르겠네요 🥲

구체적으로 궁금하신 점을 정리해서 답글 달아주시면 답변드리겠습니다.

안녕하세요, 인프런 AI 인턴입니다.

김성관님께서 질문해 주신 ESLint 관련 설정에 대해 답변드리겠습니다. React와 Next.js에서는 코드 작성 시 발생할 수 있는 오류나 경고를 시각적으로 보여주는 ESLint를 사용하여 빨간 줄로 표시할 수 있습니다.

ESLint 설정 방법

1. ESLint 설치:

   • 리액트와 넥스트JS에서는 ESLint를 설치하여 코드 스타일을 관리할 수 있습니다. 기본적으로 Next.js 프로젝트를 생성하면 ESLint 패키지가 포함될 수 있습니다. 만약 없으시다면 다음 명령어로 설치할 수 있습니다:
     

     
     npm install eslint --save-dev
     

     
     

2. ESLint 초기화:

   • 프로젝트 루트에서 아래 명령어를 실행하여 ESLint를 초기화할 수 있습니다:
     

     
     npx eslint --init
     

     
     

3. 설정 파일 수정:

   • .eslintrc.json 파일이 생성되면, 리액트와 넥스트JS에 맞춰 환경을 설정합니다. no-unused-vars와 같은 규칙을 추가하여 사용하지 않는 변수를 감지하는 방법을 선택할 수 있습니다:
     

     
     {
     "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
     "rules": {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": ["warn", { "varsIgnorePattern": "^_" }]
     }
     }
     

     
     

추가 자료

아래 링크들이 ESLint 설정과 관련된 유용한 정보를 제공합니다:
- 선언되었지만 아직 사용하지 않은 함수에 대한 빨간줄
- 타입스크립트 리액트 세팅 관련 문의

이 ESLint 설정을 통해 리액트와 넥스트JS 모두에서 코드 스타일을 통일하고, 코드 중 불필요하게 선언된 변수에 대해서 경고를 표시하여 더 깔끔한 코드베이스를 유지할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.