본문 바로가기

Front-End/Redux4

[Redux] Redux Persist VS Local storage 오늘 토이 프로젝트에서 Firebase 구글 로그인 기능을 구현하고 흐뭇한 마음으로 이런저런 버튼을 클릭을 하고 있을 때였다. 새로고침 버튼을 누르니 로그인 상태가 풀려버리는 것이었다...! 아차 싶었다. 로그인 상태를 Redux state에 유저정보와 함께 저장해 관리하려고 했는데 생각해보니 Redux는 새로고침과 동시에 모든 State를 초기화한다는 사실을 깜빡했다. 문제 해결에는 두 가지 방안이 있다. 하나는 Redux-persist 라이브러리를 이용해 Redux State를 초기화되지 않고 유지할 수 있도록 해주는 방법이고 다른 하나는 local storage를 이용해 상태를 기록하는 것이다. (물론 Rest api를 이용해 서버로부터 계속 정보를 받아오는 방법도 있겠지만 이는 배제하도록 하겠다... 2022. 4. 15.
[Redux] Redux의 세 가지 원칙 상태 관리 라이브러리 Redux는 세 가지 원칙이 있다. 이는 리덕스 공식 페이지에서도 한 섹션을 차지할 정도로 근본적인 리덕스의 작동 원칙을 설명하는 것들인데, 오늘은 공식문서에 설명하고 있는 Redux의 세 가지 원칙에 대해 알아보자. Single source of truth '어플리케이션의 글로벌 state는 하나의 store 안 객체 트리에 저장된다.' 이 원칙은 서버의 state를 별다른 코딩 작업 없이 serialize 하고 데이터를 공급하는 전체적인 애플리케이션 제작이 쉽도록 해준다. 또한 하나의 state 트리는 디버깅에 유리하고 빠른 개발 사이클 속에서 애플리케이션의 state 유지에 도움을 준다. 예를 들어, 이전에는 구현하기 어려웠던 undo/redo와 같은 기능들이 하나의 트리에 s.. 2021. 12. 6.
Redux Basics with Code Examples (Redux 예제) 이전 포스팅에서 Redux에 대한 기본적인 개념과 탄생 배경에 대해 알아보았다. 이번 포스팅에서는 예제코드를 통해 어떻게 코드를 짜는지 살펴보자. 이와 관련해 상세히 정리해놓은 글이 있어 번역하여 올려본다. 출처: https://www.freecodecamp.org/news/redux-for-beginners/ Redux for Beginners – Learn Redux Basics with Code Examples Redux can be confusing for beginner React developers to understand. There are a lot of concepts you need to know to use it properly, like reducers, actions, store,.. 2021. 12. 3.
Redux WHAT IS REDUX? 오늘은 리덕스의 기본 개념에 대해 알아보도록 하자. 리덕스와 관련되어 자세하게 설명된 글이 있어, 아래와 같이 번역하여 옮겨본다. 출저: https://www.robinwieruch.de/react-redux-tutorial/ React Redux Tutorial for Beginners [2019] A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application ... www.robinwieruch.de WHAT IS REDUX? 리덕스는 어플리케이션에서 .. 2021. 12. 2.