TripLog 프로젝트를 진행하면서 로그인 처리를 redux로 처리하였기 때문에 페이지를 새로고침 할 때 store의 state가 날아가 로그인이 풀리기 때문에 이에 대응하기 위해 localStorage 또는 session에 저장을 하기 위해서 이다.
로그인정보를 계속 저장하지 않고 페이지를 나가게 되면 삭제가 되는 session을 이용한 방법이다.
npm install redux-persist
localStorage에 저장
import storage from 'redux-persist/lib/storage
session Storage에 저장
import storageSession from 'redux-persist/lib/storage/session
localStorage 와 session Storage 란?
브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.
이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage
의 경우)
심지어 브라우저를 다시 실행해도(localStorage
의 경우) 데이터가 사라지지 않고 남아있는다.
쿠키를 사용하지 않고 다른 객체를 사용해 데이터를 저장하는 이유
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해주며 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
- 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
- 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import rootReducer from './store';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
1. import { persistStore } from "redux-persist";
2. import { PersistGate } from "redux-persist/integration/react";
import App from './App';
const store = configureStore({ reducer: rootReducer });
3. const persistor = persistStore(store);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Provider store={store}>
4. <PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</BrowserRouter>
);
reportWebVitals();
persistConfig를 적용하기 앞서 저장하고자 하는 내역에 대해 설정할 수 있다
key, storage, whitelist, blacklist 등이 존재하며
key(스토리지에서 사용되는 키 명칭), storage(localStorage, sessionStorage)는 필수 값
나머지는 선택에 따라서 입력한다.
import { combineReducers } from 'redux';
1. import { persistReducer } from "redux-persist";
2. import storageSession from 'redux-persist/lib/storage/session';
import users from './modules/users';
3. const persistConfig = {
key: "user",
storage: storageSession, // 또는 storage: storage
whitelist: ["users"] // -> 이것만 사용
// blacklist -> 그것만 제외합니다
};
export const rootReducer = combineReducers({
users,
});
4. export default persistReducer(persistConfig, rootReducer);
여기까지가 redux-persist을 사용하기 위한 방법이였다.
하지만 해당 코드를 적용 후 콘솔창에서 아래와 같은 오류가 발생되었다.
해당 블로그에서 (https://guiyomi.tistory.com/116)
오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다.
여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify)
역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse)
Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다.
위와 같이 설명하고 있었다.
미들웨어를 추가해 해결하는 방법
// 해당 코드를 아래의 코드로 변경해준다
const store = configureStore({ reducer: rootReducer });
// 변경코드
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware({
serializableCheck: false,
}),
});
여기서 문제점이 하나 더 발생을 했다.
vscode에서 코드에 취소선이 생성되어 "사용을 권장하지 않는다" 라고 알려준다.
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
})
npm install logger
단순히 로컬스토리지를 사용하기 위해 시작했지만 공부를 하다보니 쿠키와의 차이점도 배울 수 있었으며 처음에는 발생한 오류에 대해 공식문서를 살펴보는 습관이 더욱 중요하다는 걸 알게되었다.
마지막으로
localStorage
와sessionStorage
의 차이점을 정리해 보고 필요한 요소에 사용 할 수 있도록 해야겠다.
localStorage
- 브라우저를 닫고 새로 열어도 지속 된다
- 탭을 여러개 열어도 사용이 가능하다
session Storage
- 브라우저 세션 동안만 데이터를 저장할 수 있다
- 브라우저를 닫게 되면 삭제된다
공통
- 새로고침이 발생해도 사용이 가능하다