코딩병원

Frontend/Debug Log

[에러 해결] Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

이번 글에서는 아래 에러에 대해서 다루어 보겠습니다.Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.  [에러 원인]위 에러 메시지는 React 컴포넌트의 타입이 잘못되었음을 의미합니다. 즉, React는 문자열(내장 컴포넌트)이나 클래스/함수(사용자 정의 컴포..

2024. 9. 1.

Frontend/Debug Log

[에러 해결] Prop `className` did not match ~ in Next Js

Next.js로 토이프로젝트를 진행하던 도중에 아래와 같은 오류가 발생하였습니다.warning: Prop `className` did not match. Server: "MuiFormControl-root sc-iKTcqh gwSKiw css-1nrlq1o-MuiFormControl-root" Client: "MuiFormControl-root sc-gJhJTp gehcyX css-1nrlq1o-MuiFormControl-root"  [발생 원인]저는 Next.js로 styled-components와 Material-UI를 사용하고 있었습니다. 그런데 왜 이런 경고가 발생했을까요?이 경고는 서버에서 렌더링된 클래스 이름과 클라이언트에서 렌더링된 클래스 이름이 일치하지 않아서 발생합니다. 주로 SSR환경에..

2024. 8. 24.

Frontend/Debug Log

ERR_PNPM_ADDING_TO_ROOT 해결 방법

Pnpm으로 의존성 패키지를 설치 하였는데 아래와 같은 오류가 발생하였습니다. ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.  [에러 원인..

2024. 6. 23.

Frontend/Debug Log

img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 해결 방법

사이드 프로젝트로 코딩하던 도중, 일반적인 img태그와 Next.js에서 제공하는 Image태그를 비교하다가 아래와 같은 에러가 발생하였습니다.img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 해석하자면, "img는 자동 닫힘 태그로 자식을 두거나 속성으로 dangeroslySetInnerHTML을 사용해서는 안 됩니다."인데 여기서 자동 닫힘 태그란 간단하게 자식이 없는 태그입니다.// 자동 닫힘 태그// 자동 닫힘 태그 아님블라블라 // dangerouslySetInnerHTML 속성 사용 불가Example' }} /> 에러 원인이미지 태그에서 컨텐츠를 가져서 그렇습니다. 작업하다가 ..

2024. 6. 1.

Frontend/Debug Log

ParentComponent.jsx:3 Warning: ChildComponent: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 해결 방법

ParentComponent.jsx:3 Warning: ChildComponent: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 위의 에러는 ref와 관련된 에러입니다. 굉장히 간단합니다. 하나하나 알아볼까요? 시작하기에 앞서 forwardRef를 이해하면 해결 방법과 개발 지식도 향상될 수 있습니다.forwardRef란?ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLE..

2024. 5. 1.

Frontend/Debug Log

Module '"@prisma/client"' has no exported member 'PrismaClient'. 해결 방법

Yarn Berry 환경에서 작업 중인 토이 프로젝트에서 prisma를 사용하려고 했는데 다음과 같은 에러가 발생하였습니다.'"@prisma/client"' has no exported member 'PrismaClient'"@prisma/client"' 모듈에 내보낸 멤버 'PrismaClient'이(가) 없습니다.  [에러 원인]저는 PrismaClient를 통해 스키마에 접근해 데이터를 가져오려고 했습니다. 하지만 '"@prisma/client"' has no exported member 'PrismaClient' 에러가 발생하였습니다. 저의 작업 환경은 Yarn Berry 이다 보니 node_modules 폴더가 아닌 PnP로 되어있는 라이브러리 파일을 참조합니다. 그래서 기본 prisma 설정으..

2023. 11. 12.

Frontend/Debug Log

Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. 해결 방법

MUI의 DataGrid를 활용한 토이프로젝트 진행 도중 다음과 같은 에러가 발생하였습니다. Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. MUI DataGrid 컴포넌트를 사용하실 땐 MUI 자체에서 행에 고유한 id Props를 설정해줘야 합니다. MUI DataGrid에 고유 id props를 추가해 보겠습니다. MUI DataGrid API 레퍼런스에 가서 보시면 getRowId 프롭스가 있습니다. 바로 이것을 설정 해주시면 됩니다. getRowId 프롭스를 통해 해당 행의 ID를 반환할 수 있습니다. getRowId 타입은 Function이여서 함수형태로 주셔야 합니다. 인..

2023. 2. 10.

Frontend/Debug Log

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결 방법

React로 파일 업로드 작업을 구현하기 위해서 AWS의 S3(Simple Storage Service)를 사용하려고 하였습니다. 제가 생성한 버킷의 경로에 파일 이미지를 추가하려고 하는데 아래와 같은 에러가 발생하였습니다. 저와 같은 에러가 발생하였다면 이 글을 보고 시간 절약해서 빠르게 해결하셨으면 좋겠습니다. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.    [에러 원인]위에서 발생한 에러는 Cors에러로 현재 도메인의 권한이 허용이..

2023. 1. 22.

Frontend/Debug Log

AxiosError: Request failed with status code 500 해결 방법

사이드 프로젝트를 진행하다가 아래와 같이 에러가 발생하였습니다. 에러 status는 500이면 여러개의 에러형태가 있을 수 있어 정확한 원인은 로그를 봐야 알 것입니다. 이번 글에서는 제가 발생한 현상을 기준으로 에러가 발생한 이유와 해결 방법을 공유드립니다. 저와 같은 에러가 발생해서, 저처럼 하다가 막히지 마시고 이 글을 보고 시간 절약하며 빠르게 해결하셨으면 좋겠습니다. [에러 원인] axios 라이브러리를 이용하여 post 방식으로 api를 호출하였는데 호출이 제대로 되지 않아 에러가 발생하였습니다. 에러를 로그로 찍어서 확인해 보니 'Uncaught (in promise) Error: AxiosError: Request failed with status code 500' 이었습니다. 더 자세히 ..

2022. 12. 17.

Frontend/Debug Log

page /fetch getServerSideProps can not be attached to a page's component and must be exported from the page 해결 방법

Next JS로 프로젝트를 진행하다가 아래와 같은 에러가 발생하였습니다. page /fetch getServerSideProps can not be attached to a page's component and must be exported from the page [에러 원인] 에러 코드를 읽어보시면 확실히 알 수 있지만 번역해보면 page/fetch 스크립트는 getServerSideProps는 페이지 구성 요소에 연결할 수 없으므로 페이지에서 export 해야 한다고 합니다. 아래 코드가 에러가 발생한 코드인데 자세히 보면 export default fetchPanel이 없는 것을 확인할 수 있습니다. import fetch from 'isomorphic-unfetch'; const fetchPan..

2022. 7. 6.

Frontend/Debug Log

Operator '<' cannot be applied to types 'boolean' and 'RegExp' 해결 방법

Next JS로 프로젝트를 진행하다가 아래와 같은 컴파일 에러가 발생하였습니다. Operator '

2022. 6. 28.

Frontend/Debug Log

The default export is not a React Component in page: "/" 해결 방법

Next JS를 공부하던 중에 아래와 같은 에러가 발생하였습니다. The default export is not a React Component in page: "/" [디렉토리 구조] [에러 원인] index.ts 파일에 아래와 같이 코드를 입력하고 실행해서 확인하니 The default export is not a React Component in page: "/" 에러가 발생하였습니다. 에러를 읽어보면 default export가 React Component가 아니라고 합니다. Next JS에서는 default로 export하지 않는다면 사이트에 접속했을 때 에러가 발생하게 되어있습니다. 따라서 default export를 하지 않아 발생한 에러입니다. export function Home() { ..

2022. 6. 26.

Frontend/Debug Log

useRoutes() may be used only in the context of a <Router> component. 해결 방법

토이 프로젝트에서 Route를 사용할 일이 있어 사용하는데 아래와 같은 에러가 발생하였습니다. Uncaught Error: useRoutes() may be used only in the context of a component. [에러 원인] Uncaught Error: useRoutes() may be used only in the context of a component.라는 에러를 해석해보면 useRoutes는 로 감싸야한다고 합니다. 저는 감싸지 않고 사용해서 에러가 발생한 거였습니다. root.render( ); [해결 방법] 먼저 BrowserRouter as Router를 추가해주고 Route를 Router로 감싸주시면 에러가 해결될 것입니다. import { BrowserRouter as..

2022. 5. 11.

Frontend/Debug Log

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. 해결 방법

토이 프로젝트를 진행하던 중 아래와 같은 에러가 발생하였습니다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. [에러 원인] Header 태그가 children을 prop으로 전달하는 과정을 생략해 발생한 타입 에러입니다. Header가 마치 props로 Router에게 넘겨지는 구조로 코드가 작성이 되어있습니다. 넘겨지는 props가 없는데 말이죠. [에러 원인] Header 태그의 자식 컴포넌트들이 props를 넘김 받지 않도록 수정해 주시면 됩니다. root.render( );

2022. 5. 10.

Frontend/Debug Log

A component is changing an uncontrolled input to be controlled. 해결 방법

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component [에러 원인] input 태그의 value가 undefined 값이 들어갈 수도 있으면 발생하는 에러입니다. uncontrolled input이었다가 controlled input으로 바뀌면서 발생한 것입니다. 즉, 한마디로 초기값이 u..

2022. 4. 23.

Frontend/Debug Log

This component must be used inside a <RecoilRoot> component. 해결 방법

이번 글에서는 This component must be used inside a component. 에러에 대하여 알아보도록 하겠습니다. This component must be used inside a component 컴포넌트는 태그 내에서 사용해야 한다고 합니다. recoil의 상태관리하는 역할을 보면 당연하다는 생각이 듭니다. 실제로 recoil.org에서 태그의 위치는 루트 컴포넌트에 넣는 것이 가장 좋은 방법이라고 적혀있습니다. 이를 알면서도 저는 에러가 났네요.. 왜 일어났는지는 아래에서 확인해보겠습니다. [에러 원인] 저는 App.tsx에서 를 최상단 루트로 감싸줬는데 에러가 발생하였습니다. 확인해보니 App.tsx가 최상단 루트가 아니더군요.. index.tsx가 App.tsx를 감싸고 ..

2022. 4. 17.

Frontend/Debug Log

react-scripts: command not found 해결 방법

이번 글에서는 react-scripts: command not found. 에러 해결 방법에 대하여 알아보겠습니다. react-scripts: command not found [에러 원인] 명령어를 읽을 수 없다고 로그가 찍힌 것을 확인할 수 있습니다. 아무래도 프로젝트 경로가 기존과 다르거나, 다른 프로젝트를 사용할 때 이런 에러가 종종 발생하고는 합니다. [해결 방법] npm update 혹은, npm Install을 해주시면 됩니다. npm update npm install

2022. 2. 4.

Frontend/Debug Log

internal/modules/cjs/loader.js:888 해결 방법

이번 글에서는 internal/modules/cjs/loader.js:888 에러 해결 방법에 대하여 알아보겠습니다. internal/modules/cjs/loader.js:888 [에러 원인] react 프로젝트를 다운받고 실행시키려는데 위의 에러가 발생하였습니다. 위의 에러는 @bable/core 모듈을 찾을 수 없다고 나오는데 그 이유는, 전에 사용하던 node_modules에서 만든 경로랑 실행시킬 프로젝트의 모듈이 충돌해서 발생했을 가능성이 높습니다. [해결 방법] 모듈 하나하나를 수정해주는 방법이 있을테지만, 저는 아래와 같은 명령어로 모듈 자체를 지우고 재설치하였습니다. npm remove package-lock.json npm remove node_modules npm install

2022. 2. 3.