1. 웹개발/1_3_1 Debug 검색 결과

해당 글 31건

[Yarn Berry] 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_3_1 Debug 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_3_1 Debug 2023. 2. 10. 21:35

[AWS S3 오류] 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_3_1 Debug 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_3_1 Debug 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_3_1 Debug 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_3_1 Debug 2022. 6. 26. 19:42

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..
1. 웹개발/1_3_1 Debug 2022. 5. 11. 09:58

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( );
1. 웹개발/1_3_1 Debug 2022. 5. 10. 17:46

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..
1. 웹개발/1_3_1 Debug 2022. 4. 23. 21:09

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를 감싸고 ..
1. 웹개발/1_3_1 Debug 2022. 4. 17. 12:26