728x90 🧠 지식창고/에러21 [Error] Module not found : Can't resolve "next/image"; Next.js로 프로젝트 진행하면서 img 태그를 사용할 일이 있어 next/image를 import 받았는 데 위처럼 오류가 발생했다. import Image from "next/image"; 찾아보니 next/image는 v10 이상부터 지원하는 데 지금 프로젝트는 v9라서 오류가 발생하는 것 같다. [Next]Next.js에서 이미지 사용하기 Next에서 이미지를 사용하는건 여간 쉽지가 않다.공식문서에는 다음과 같은 레퍼런스를 제공하고 있다.이미지 컴포넌트 자체를 Next에서 제공해주고 있다.뭔가 고마운거 같지만 써보면 참 그렇다 velog.io 팀장님께 여쭤보니 img 태그 사용해도 된다고 하셔서 img 태그로 구현했다. 2022. 2. 23. [Error] Warning : Props 'className' did not match Server: ' ' Client: ' ' 회사에서 첫 업무로 Publishing 받아서 진행하려다 보니 CSS in Js를 CSS 말고 styled-components로 하는 게 익숙해서 라이브러리를 설치 했는 데 아래와 같이 오류가 발생했다. 어떻게 해결 해야 할까 찾아보던 중 아래 두 게시물을 참고해서 해결 했다. Next js + Styled-Components 셋팅 Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-c.. taenami.tistory.com [Next.js] Warning : Props 'className' did not .. 2022. 2. 21. [Error] Parsing Error : Cannot find module 'next/babel' 터미널에 아래와 같이 입력하여 Next.js 프로젝트 설치 후 $ npx create-next-app@latest next-practice 터미널에 개발자 모드로 구동 시켰더니 localhost:3000에서 $ npm run dev 아래와 같은 오류가 발생했다. 구글에 검색 해봤더니 루트 디렉토리에 .babelrc라는 파일을 만들어서 아래 코드를 추가하고 { "presets": ["next/babel"], "plugins": [] } .eslintrc에 기본 코드를 다음과 같이 바꾸라고 하길래 { // "extends": "next/core-web-vitals" "extends": "next/babel" } 아래와 같이 .babelrc 파일 추가하고 위처럼 수정 했더니 오류 해결했다. 다른 사람들은 파일.. 2022. 2. 17. [Error] kakao.init: App key must be provided kakao 소셜 로그인 구현 후 로그인 페이지에 접근 할 때마다 아래와 같은 오류가 발생함. 첫번째 시도 "script 순서가 잘못된 건 아닐까??"라는 생각으로 Kakao.js 컴포넌트에 script를 넣어봄 동일한 오류가 발생해서 실패 두번째 시도 "소셜 로그인에 필요한 js key를 env에서 관리하고 있어서 string으로 안넘어 오는 게 아닐까?" 생각함 typeof를 사용하여 확인 → String이였음 카카오로 연결은 되지만 KOE101 오류가 떠서 실패 세번째 시도 다른 건 나랑 똑같은 데 다른 부분이 하나 있어서 유심히 지켜봄 → jsKey를 token으로 변경하여 테스트 → 오류 사라짐 → 하지만 env로 불러 왔을 때는 실행이 되지 않음 → env 변경 될 경우 yarn start 초기.. 2022. 1. 26. [Error] api 요청 시 200, 204 뜨는 이유 개발자 도구 → 네트워크에서 서버에 요청이 잘 들어가고 있는 지 확인 하다가 api 요청을 보낼 떄마다 200, 204가 같이 뜨는 문제??를 발견했다. 그 전 프로젝트를 진행 할 때는 요청이 성공 했을 경우 200 하나만 떴었는 데 왜 204가 떴는 지 의문이었다. 구글링 해본 결과 웹 개발을 하다 보면 네트워크 요청 시 실제 원하는 요청(CRUD) 전에 OPTIONS 요청이 발생한 걸 볼 수 있는 데 응답값을 확인하면 아무것도 없는 데 응답값이 없는 이 요청은 왜 발생하는 것일까?? 의문이 생겼다. preflight라고 불리는 OPTIONS 요청은 브라우저가 서버에게 지원하는 옵션들을 미리 요청하고, 허가된 요청에 한해서 전송하기 위한 보안상의 목적을 가지고 있다. 모든 경우에 발생하지 않고 실제 요.. 2022. 1. 13. [Error] npm install 설치 시 npm ERR! code ERESOLVE 오류 npm install react-wordcloud 를 설치해서 워드 클라우드가 되는 지 실험 해보려고 했는 데 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.13.0" from react-wordcloud@1.2.7 npm ERR! node_modules/react-wordcloud npm ERR! react-wordcloud@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry n.. 2021. 12. 24. [Error] git push origin master 시 failed to push some refs to 오류 Git에 팀원들끼지 push를 많이 하다 보니 아래와 같은 오류가 발생했다. $ git push origin master To https://github.com/eundol0519/cloneCodingProject.git ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://github.com/eundol0519/cloneCodingProject.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repositor.. 2021. 12. 13. [Error] the slice reducer for key "feed" returned undefined. 에러 서버에 axios로 요청 후 redux에 dispatch 할 때 아래와 같은 오류 발생 (payload에 falsy한 값 없고, reducer에서 payload 값 잘 넘어와서 draft에 들어가는 것까지 확인 했는 데 저런 오류가 계속 발생 중이다.) 더보기 Error: When called with an action of type "GET_FEED", the slice reducer for key "feed" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of und.. 2021. 12. 9. [Error] doc 사용 시 n.indexOf is not a function 에러 키워드 : doc -> 참조 데이터 / n.indexOf is not a function 오류 1) doc으로 받아온 반환값은 타입이 document(문서)이기 때문에 참조 데이터이다. const docRef = doc(db, 'dictionary', dictionary_id) 참조값은 데이터를 받아와서 사용 할 수 없기 때문에 (await getDoc(docRef)) 를 사용해서 docRef에 해당하는 데이터를 불러오면 promise 형태로 넘어온다. (await getDoc(docRef)).data() 거기서 내가 원하는 값은 딕셔너리의 형태의 데이터이기 때문에 .data()를 사용한다. 2) 글 작성 후 새로고침 없이 수정이나 삭제를 할 경우 에러 발생 (새로고침을 하면 수정과 삭제가 에러 없이 잘.. 2021. 12. 1. 이전 1 2 3 다음 728x90
