계발하는 개발자

참고 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..