맨땅에 헤딩

todo와 같이 crud를 만드면서 create기능을 구현할때도 만났던 에러이다. create를 할때는 새로운 키값을 넣어줘야하기 때문에 uuid라이브러리를 이용해서 이러한 에러를 해결했다. uuid를 사용하는 이유와 사용법도 직접 블로그에 정리해두었다. 리액트 uuid 설치 (리액트 고유id, 고유key 사용이유) uuid란 리액트에서 사용하는 라이브러리로서, 고유한 id값을 자동으로 추가해줘서 편리하다. 1. 사용법 1️⃣ install npm install uuid npm을 사용하면 위와같은 코드를, yarn을 사용하면 yarn add uuid 를 통 hihiha2.tistory.com 하지만 이번에는 같은 오류더라도 추가하기 기능이 아니라, 이미 존재하는 open api를 받아오면서 고유한 key..

chatgpt api를 이용해서 내 웹사이트에서 chatgpt에 질문을하고 답변을 받을수 있는 기능을 넣었는데, 질문을 하고 답변을 받을때, 아래와 같은 오류가 발생하였다. 화면에 답변이 정상적으로 나오기 때문에 기능이 작동하지 않는 에러는 아니었지만 고치고 싶어서 구글링을 열심히 함..!! 🔍 원인 이 오류는 보안 백엔드/서버 측이 아닌 프런트엔드/클라이언트 측에서 OpenAI를 호출하는 경우 발생한다. ✅ 해결 chatgpt의 api를 받아오는 코드에 delete configuration.baseOptions.headers["User-Agent"]; 를 추가한다. 💻 기존 코드 const generateText = async (input) => { const configuration = new Con..

googlebooks의 API를 가져오는 과정에서 Array.map is not a function 라는 에러가 발생하며, map을 사용할 수가 없다는 에러가 나왔다. 원래는 잘 작동하던 코드였는데 axios를 모듈화하여 따로 빼주는 과정에서 이런 에러가 발생했다. 해결하느라 꽤 시간이 걸렸지만 이유를 알고나니, 해결방법은 완전 간단했다. 🔍 원인 Array.map is not a function 에러는 배열이 아닌값을 map()을 돌리면 발생한다. 나의 경우 bookData를 불러오는 과정에서 경로를 더 들어가야하는데, 그냥 response를 그대로 받아오게 했더니 이런 에러가 발생하였다. ✅ 해결 console.log(res); 를 통해서 받아오는 값을 확인한다. 개발자도구-콘솔창을 열어서 확인을 하..

❌ 에러코드 ❌ error: {code: 400, message: 'API key not valid. Please pass a valid API key.', errors: Array(1), status: 'INVALID_ARGUMENT', details: Array(1)} [[Prototype]]: Object ✅ 해결방법 1. 서버를 껐다가 켠다. - vsCode를 껐다가 다시 켠다. - npm start를 다시 한다. 2. .env의 위치가 올바른지 확인한다. - .env를 루트 폴더로 옮긴다. (pakage.json과 동등한 위치) 나의 경우 이 에러가 발생했을때 30분을 헤맸는데, 1의 방법으로 간단하게 해결했다 🥲 npm start를 다시 해주니 잘됨 ㅋㅋ (console.log를 통해 확인하면..

Netlify 배포를 하다가 컴파일 에러가 발생했다. 1. 에러메시지 에러메시지는 아래와 같다. Failed to compile. Module not found: Error: Can't resolve 'react-icons/fi' in '/opt/build/repo/src ➡️ 'react-icons/fi'를 찾지 못한다 2. 에러 원인 구글링결과 react-icon이 package.json에 존재하기 않아서라는 것을 알게 되었다. 실제로 들어가보니 package.json의 dependencies에 react-icons가 없었다. 3. 해결방법 터미널에서 yarn add react-icons 해준다 (react-icons 다시 설치해줌) package.json에 react-icons가 추가된 것이 보인다..