에러 어떻게 고치나요?ㅠㅠ

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[31-14] 윈도잉과 무한스크롤 성능 개선

해결된 질문

작성

에러 어떻게 고치나요?

react react-native 하이브리드-앱 graphql next.js

답변 3

노원두

지식공유자

안녕하세요! yoonseong님!

결론부터 말씀드리면, @types/react 의 버전이 19버전으로 최신버전이 설치되어 있어서 발생된 문제예요!

"무슨 소리에요! 저는 @types/react 는 18버전으로 설치했거든요?"와 같은 질문을 하실 수 있으실텐데요!
packge.json에 입력한 버전은 설치를 원하는 버전일 뿐이며, 진짜 설치된 버전은 yarn.lock 파일을 통해서 확인해 볼 수 있답니다!

그렇다면, 왜 이런 일이 일어날까요?!

yoonseong님께선 package.json에 @types/react 18버전을 입력하셨지만, yoonseong님께서 설치한 다른 라이브러리(ex, react-quill, react-infinite-scroll 등)들은 react, @types/react를 다른 버전으로 설치하려고 할 수 있답니다!
(npm 배포 수업을 참고하시면, 내가 만든 라이브러리를 배포하기 위해 react 프로젝트를 설치하셨던 것을 떠올려 보세요! 이때 이 라이브러리에서 설치했던 react 버전이 지금 내 메인프로젝트의 react 버전과 다를 수 있겠죠?!)

따라서, 이러한 경우에 package.json에 입력한 버전과 다른 원치않는 버전이 설치되는 경우가 종종 있답니다!
이럴때, resolutions 라는 키워드를 사용하시면, "다른 라이브러리에서 뭘 어떤 버전으로 설치할진 모르겠지만, 난 무조건 이 버전으로 설치할거야!" 라는 명령을 주실 수 있답니다!

{
  ...,

  "dependencies": {
    "next": "14.2.16",
    "react": "^18",
    "react-dom": "^18",
    "react-window": "^1.8.11"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-window": "^1.8.8",
  },
  "resolutions": {
    "@types/react": "^18"  // 이 부분을 추가해 주세요.
  }
}

추가하셨다면, 기존의 yarn.lock을 지우고 다시 한 번 yarn install 을 시도해 보세요!

이승엽

어떤 외부 라이브러리의 List 컴포넌트를 사용했는지까지 알려주신다면 도움을 드릴 수 있습니다.

위 에러는 대부분 import가 제대로 되지 않았거나, 같은 이름의 컴포넌트가 중복 import 되었을 수도 있습니다.

인프런 AI 인턴

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

에러 메시지로 보아 <List> 컴포넌트를 JSX로 사용할 수 없다는 문제가 발생하고 있는 것 같습니다. 이는 주로 타입스크립트에서 타입 정의가 잘못되었거나, 모듈을 잘못 임포트한 경우에 발생합니다.

이 문제를 해결하기 위해 다음 사항을 확인하고 시도해 보세요:

타입 정의 확인: 사용하고 있는 <List> 컴포넌트에 대한 타입 정의가 올바른지 확인해주세요. 해당 컴포넌트가 올바른 타입으로 정의되어 있어야 합니다.
모듈 임포트 확인: <List> 컴포넌트를 적절히 임포트했는지 확인하세요. default export인지, 혹은 named export인지에 따라 임포트 방식이 달라질 수 있습니다.
패키지 설치 확인: <List>가 외부 라이브러리나 패키지에서 제공되는 것이라면, 해당 패키지가 제대로 설치되어 있는지 확인하고, 최신 버전인지 확인하십시오.

이와 유사한 문제를 다룬 내용의 URL을 참고하세요:
- 타입스크립트오류 - 이는 비슷한 타입스크립트 오류가 발생하는 경우 해결 방법을 안내합니다.
- React 초기 세팅 yarn dev 오류 - 환경 설정 오류로 인해 발생하는 문제를 다루고 있습니다.

문제를 해결하시고도 동일한 에러가 발생한다면, 추가 정보를 제공해 주시면 더욱 정확한 도움을 받을 수 있습니다.

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

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

에러 어떻게 고치나요?ㅠㅠ