redux 새로고침 이슈

redux를 통해 저장해놓은 데이터들이 f5 클릭 시 데이터가 사라지게 되었다. 왜 이러한 문제가 일어나는지 구글링을 한 결과, 정확히는 redux가 초기화되는 것이 아닌 저장한 state 값이 초기화 되는 것이었다.

SPA는 일반적으로 웹 브라우저에서 엑세스 할 수 이는 하나의 index.html만을 사용합니다. 따라서 새로고침을 하는 경우, 해당 index.html 전체를 분석하기 시작하고, 그렇게 state 값이 비어있는 상황이 되는 것이다.

redux를 사용하는 개발자들은 다들 많이 경험하는 이슈이고, 여러가지 문제 해결방안들이 나오고 있었는데, 우리 프로젝트에서는 redux-persist를 적용시키기로 했다.

기존 vuex의 영속성을 관리하는 vue-persisted 와 매우 유사한 개념으로 redux-persist 역시, redux의 변화할 때 마다 localStorage에 저장하여, 미리 데이터를 가져오는 것이 가능하게 한다.

redux-persist 병합 이슈

기존에 상태관리를 통해 저장해두었던 openvidu 인스턴스가 redux-persist를 통해 지워지지 않게 되며, 정상적으로 프로젝트가 운영되지 않는 이슈가 생성되었다. 해결 방식은 기존의 openvidu 객체를 미팅페이지에서만 사용하는 것으로 문제를 해결했다. 어짜피 session 연결은 미팅 페이지에서만 진행이 되기 때문에, 데이터를 반드시 저장해서, redux에 반드시 지녀야 할 이유가 없다고 생각했다.

이전에 작성했던 useState() 로 사용했던 코드가 있어서 바로 적용시킬 수 있었다.