Library-Framework/Redux3 redux-persist로 localStorage 관리하기 현재 회사에서 redux를 새로 도입하는 과정에서 미리 공부하는 중에 구글링해서 찾아낸 글들과 챗지피티의 도움을 받으며 해보던 중에 그 과정을 정리하고 발생했던 에러와 해결 방법을 정리해보았다. redux-persist란? redux의 상태는 일시적이기 때문에, 브라우저를 새로고침하면 모든 상태값들이 초기화된다. 사용자가 새로고침할 때마다 값이 사라져버리면 상태 관리를 하는 의미가 없다. 이를 개선하기 위해, redux-persist라는 라이브러리를 사용하여 redux의 상태를 브라우저 내에 저장할 수 있다. 이 라이브러리는 redux store 값들을 영구 저장소에 저장하는 데 사용되는 라이브러리로, 브라우저를 새로고침하더라도 상태를 유지할 수 있게 된다. 현재 코드 상태 지금은 특별한 프로젝트가 아니.. 2023. 5. 10. [Redux] Redux 사용해서 Counter 구현하기 (Next.js + TypeScript) 벨로퍼트와 함께하는 모던 리액트 문서를 따라하면서 redux 튜토리얼을 진행해보았다. 대부분의 redux 튜토리얼이 (이것도 마찬가지지만) React와 JavaScript 기반으로 진행되어 생각했던 것보다는 시간이 조금 걸렸다 (헤매느라....), 그래서 나도 앞으로 안 헤매고, 또 나처럼 Next Typescript Redux를 한 번에 배우는.. 시도하는 ... 사람들을 위해서 기록해본당. 0. 설치하기 1) next 프로젝트 생성 : npx create-next-app 플젝이름 --typescript 2) redux 설치 : npm install react-redux next-reddux-wrapper 3) redux-devtools 설치 : npm install react-devtools-exte.. 2023. 5. 8. Next.js + TypeScript + Redux 시작하기 (+ redux-devtools 사용) 1. Next.js 프로젝트 생성하기 npx create-next-app 플젝이름 --typescript 이 때, 터미널에 ESLint 쓸거냐고 물어보는데, yes라고 대답하면 ts 관련 의존성 패키지들도 알아서 다운받아준다. 만약에 안 깔아준다면, 직접 깔아주면 된다. npm install --save-dev typescript @types/react @types/node 2. Redux 설치하기 next에서 redux를 사용하려면, 2가지가 필요하다. npm install react-reduxnpm install next-redux-wrapper 3. redux devtools redux devtools를 사용하면, 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고, 지금까지 어떤 액션들이 디스패.. 2023. 5. 7. 이전 1 다음
