계발하는 개발자

참고 https://github.com/vercel/next.js/issues/10608 에러 redux-persist로 localstorage에 저장한 state값을 값을 유지되게 하려고 했는데 기대와 달리 새로고침 후에 아래와 같은 에러가 났다. "Prop `src` did not match" 직역하면 속성 'src'가 일치하지 않는다는 에러였다. 문제의 img요소 src를 확인해보니 문자열 안에 "" 기호가 한 번 더 들어가 있었다. 그리고 alt 속성값도 "Queencard" 이렇게 깨져있었다.. 이때 로컬호스트에 저장된 값이 뭔가 달라졌음을 직감했다. 아니나 다를까 이런 식으로 문자열 값 안에 \\ 기호가 새로고침할때마다 들어갔다. 원인 결론적으로 PersistGate로 루트 컴포넌트 랩핑하는 ..

참고https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using에러redux-persist 라이브러리를 이용해 새로고침 후에도 state값이 유지되게끔 하려고했는데DOM로드 후에 갑자기 이런 에러가 떴다. 원인오류 내용만 읽어보면 "action에 직렬화가 불가능한 값을 전달"했다는 내용의 에러였다.직렬화 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify) 역직렬화 역직렬화는 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse..

사전 준비 - redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit react-redux Redux 세팅하기 - redux.js 파일 생성 redux.js 파일 생성후 아래와 같은 코드를 붙여넣는다. (2번의 store.js 파일에 합쳐도 상관없음) - store.js 파일 생성 store.js 파일 생성후 아래와 같은 코드를 붙여넣는다. store 파일을 생성했다면, layout.js 파일로 가서 컴포넌트로 children을 감싸주면 된다. - Provider 로 root 컴포넌트 랩핑 자세한 설명은 아래 이전 포스팅 참고 ⬇️ [Next.js 13] Error: could not find react-redux context value; please ensure the comp..

참고 https://github.com/reduxjs/react-redux/issues/2049 https://lobsterhyeon.tistory.com/41 에러 next.js에서 redux-toolkit 사용하려고 했을 때 다음과 같은 에러가 자꾸 났다..! Error: could not find react-redux context value; please ensure the component is wrapped in a Provider로 컴포넌트를 wrapping 하라는 메시지와 함께. 이러쿵 저러쿵 해봐도 자꾸 떠서 슬슬 한계 임박할 쯤에.. 다른 사람 github issue, 블로그 글을 참고해서 해결! 원인 먼저 에러 자체는 루트 컴포넌트를 Provider로 감싸지 않아서 발생한 거였다. r..