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

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

보내주신 소스코드를 확인해보았더니 에디터 상에는 정말 오류가 표시되지 않네요, 이는 아마 Vite나 ESLint의 버전 업데이트로 인해 중요하지 않은(앱을 당장 중단시키지는 않는) 오류로 처리되어 에디터 상에는 나타나지 않는걸로 보입니다.

그러나 브라우저 콘솔에서는 아래와 같이 동일한 오류를 확인하실 수 있습니다.

해당 문제를 제보해주셔서 감사합니다. 더 정확한 원인이 파악되면 답글 추가로 남겨드리겠습니다!

https://drive.google.com/file/d/1aWeX_crs2-PYE4rQwzBvKEsoZjWD-wxx/view?usp=sharing 확인 부탁 드립니다.

안녕하세요.

Error Lens를 설치 했는데도 여전히 동작하지 않습니다.

저의 eslint.config.js 파일 전체 내용은 아래와 같고, rules 말고는 건드린 부분이 없습니다.

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{js,jsx}"],
    extends: [
      js.configs.recommended,
      reactHooks.configs["recommended-latest"],
      reactRefresh.configs.vite,
      "plugin:react/recommended",
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    rules: {
      "no-unused-vars": "off",
      "react/prop-types": "off",
      "react/jsx-key": "true",
    },
  },
]);

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

소스코드 위치에 에러 메세지가 바로 나타나는 기능을 이용하시려면, 우리 강의의 1.2) VSCode 설치하기 챕터의 8분 51초 경에 설명드리고 있는 Error Lens 라는 확장 프로그램을 설치하셔야 합니다.

혹시 설치하셨음에도 안된다면 다시 답글 부탁드립니다 😀

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

리액트에서 리스트를 렌더링할 때 각 요소에 고유한 key prop을 제공하는 것은 필수적입니다. key 값은 리액트가 각 요소가 바뀌었는지 여부를 구별하는 데 사용되며, 이를 제공하지 않으면 콘솔에 경고 메시지가 나타날 수 있습니다.

현재 각 요소에 key prop을 제공하지 않았을 때 VsCode에서 경고 메시지가 정상적으로 보이지 않는 문제에 대해 설명드리겠습니다.

ESLint 규칙 및 VSCode의 경고 알림

1. ESLint 설정 확인:

   • ESLint가 올바르게 설정되어 있고, 프로젝트에서 적용되고 있는지 확인해 보세요. ESLint 설정 파일(보통 .eslintrc 또는 .eslintrc.json)에 올바르게 규칙이 설정되어 있는지 확인합니다.
     

2. VSCode ESLint 플러그인:

   • VSCode의 ESLint 확장 플러그인을 설치하고, 환경 설정에서 해당 확장 프로그램이 활성화되어 있는지 확인하세요. 때로는 VSCode에서 플러그인이 제대로 활성화되지 않을 수 있습니다.
     

3. Linting 규칙:

   • react/prop-types와 같이 설정된 규칙 외에 react/jsx-key 설정이 필요합니다. 관련된 규칙이 활성화되어 있는지 반드시 확인해 보세요.
     

4. 터미널 및 콘솔:

   • 코드 변경 후 ESLint가 제대로 실행되고 있는지 확인하기 위해 터미널에서 직접 ESLint를 실행해 보십시오. 경고가 터미널에 표시된다면, VSCode의 플러그인 문제일 수 있습니다.
     

관련하여 유사한 문제의 경우 해결책으로 다음과 같은 사례를 살펴볼 수 있습니다:

• 투두 리스트 렌더링하기 - key prop 관련 문제 해결
  

이 주제는 리액트 개발에서 중요한 부분이므로 기회가 되신다면 공식 문서나 커뮤니티 포럼에서 더 많은 정보를 찾으실 수 있습니다.

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