1. 웹개발/1_1_8 Error Handling 검색 결과

해당 글 32건

[에러 해결] 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는 문자열(내장 컴포넌트)이나 클래스/함수(사용자 정의 컴포..
1. 웹개발/1_1_8 Error Handling 2024. 9. 1. 11:50

[에러 해결] 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환경에..
1. 웹개발/1_1_8 Error Handling 2024. 8. 24. 11:55

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.  [에러 원인..
1. 웹개발/1_1_8 Error Handling 2024. 6. 23. 18:02

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' }} /> 에러 원인이미지 태그에서 컨텐츠를 가져서 그렇습니다. 작업하다가 ..
1. 웹개발/1_1_8 Error Handling 2024. 6. 1. 11:46

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 설정으..
1. 웹개발/1_1_8 Error Handling 2023. 11. 12. 21:10

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이여서 함수형태로 주셔야 합니다. 인..
1. 웹개발/1_1_8 Error Handling 2023. 2. 10. 21:35

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에러로 현재 도메인의 권한이 허용이..
1. 웹개발/1_1_8 Error Handling 2023. 1. 22. 22:17

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

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

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..
1. 웹개발/1_1_8 Error Handling 2022. 7. 6. 22:17

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() { ..
1. 웹개발/1_1_8 Error Handling 2022. 6. 26. 19:42