147일차 - 프로젝트 28일차
프로젝트
이전 프로젝트에 이어서 이번 프로젝트도 localStorage를 사용했다.
그런데 이전 프로젝트에서는 redux를 사용하지 않아서 생각보다 쉬운 작업이었지만 이번 프로젝트에서는 redux를 사용해서 서칭하기가 힘들었다.
예제들은 redux-toolkit이 아닌 redux로 제작한 예제들이라서 코드를 읽기가 어려웠었다.
그러다가 redux-persist 사용법 이 블로그를 일고나서 redux-persist의 존재를 알게되었고 이 라이브러리를 공부하고, 결국 localStorage에 state들을 저장하는 것을 성공하였다.
예시 코드는 추가 부분에 작성하겠다
Dev Log
오늘은 어떻게 프로젝트에 기여했나요?
- LocalStorage를 사용해서 state들 저장
- axios작업
오늘의 프로젝트에서 힘든 점은 무엇인가요?
- LocalStorage에 저장을 저번 프로젝트에서는 redux를 사용하지 않고 react로만 했어서 state를 저장하면 되었지만,
이번 프로젝트는 redux를 사용해서 LocalStorage를 사용하는 방법을 서칭하는 것이 어려웠다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- Order페이지 axios 작업
추가
Redux-React App을 처음 사용할때를 기준으로 예시를 들겠다.
npx create-react-app my-app --template redux
위의 명령어를 통해 my-app이라는 app을 만든다.
우선 cd my-app
명령어를 통해 my-app으로 들어가서,
npm i redux-persist
명령어를 통해 redux-persist를 설치한다.
우리가 수정해야하는 파일은 src/app/store.js와 src/index.js 두 가지 파일이다.
아래와 같이 수정한다.
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';
import counterReducer from '../features/counter/counterSlice';
const reducers = combineReducers({
counter: counterReducer,
});
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
reducer: persistedReducer,
middleware: [thunk]
});
export default store;
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './app/store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import * as serviceWorker from './serviceWorker';
let persistor = persistStore(store);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
결과
새로고침을 하여도 숫자가 저장되어있다.
Author And Source
이 문제에 관하여(147일차 - 프로젝트 28일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pest95/147일차-프로젝트-28일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)