본문 바로가기
728x90

redux-persist2

[No-Cap News] 방치된 프로젝트 리팩토링하기 (feat. React) 프로젝트(Github) : https://github.com/dygreen/nocap-news사용 기술 : React + Redux(RTK) + Styled-components주소 : https://nocap-news.vercel.app/ 거의 1년 정도 실무 경험을 해보니, 그 전에 진행했던 프로젝트들의 부족함이 많이 보이기 시작했다.완벽한 코드는 없으니 (더군다나 내가 작성한 코드이기 때문에..!) 지속적으로 리팩토링이 필요하다고 생각한다. 다양한 프로젝트들 중에서, 취준 기간에 가장 공들였던 프로젝트이기도 하고일단 보여지는 화면부터가 수정이 간절히 필요했던 뉴스앱 서비스 No Cap News부터 손보기로 했다. 이번 글에서는 어떤 부분을 리팩토링하였고, 리팩토링 하는 과정에서 배운점들을 기록해보고자.. 2023. 7. 2.
[React] Redux-persist 사용법(Redux toolkit ver.) (+ Next.js, TypeScript) 이번에 회사 이벤트 페이지들을 Vue에서 React로 바꾸게 되었는데, Redux toolkit을 사용하여 필요한 정보를 가져와 화면에 표시하였다. 그러나 store는 새로고침하면 값이 날아가기 때문에 새로고침 시 해당 화면이 그려지지 않는 문제가 발생했다. 이 문제를 해결하기 위해 Redux-persist를 사용하면 좋을 것 같았다. 📌 Redux-persist ? Redux-persist는 store 값을 localStorage나 sessionStorage에 저장하여 새로고침해도 데이터를 유지된다. 새로고침 시 저장공간에 있는 데이터를 Redux에 불러오는 형식으로 이루어진다. 📌 Redux-persist 적용하기 (Redux toolkit ver.) ( Redux toolkit 사용 방법 ) [st.. 2023. 5. 30.
728x90