더 알아보기/에러20 [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. [Error] firebase.js import 에러 발생 firebase가 버전 9로 업그레이드 되면서 임포트하는 방법이 달라졌다. v9에서는 firebase와 app 또는 auth 폴더 경로 사이에 compat 폴더를 추가 해주면 되고, 또는 v8로 다운그레이드 하는 방법이 있다고 한다. https://stackoverflow.com/questions/68946446/how-do-i-fix-a-firebase-9-0-import-error-attempted-import-error-firebase-app How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as I am trying to i.. 2021. 12. 1. 이전 1 2 3 다음 728x90
