20210325 first project #5

오늘 한 것 

• redux-persist
• welcome page
• 반응형 디자인

 

 오늘은 내일이 프로젝트 마무리라 배포를 하였고 버그를 수정하는 시간을 가졌다. 생각보다 버그가 많지 않아서 그리 오래 걸리지 않았지만 redux가 새로고침 시에 유지가 되지 않아 redux-persist라는 미들웨어를 사용하였다. 

 

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'root',
  storage
};

const enhancedReducer = persistReducer(persistConfig, rootReducer);

 

먼저 persist를 사용하여 enhanced reducer를 만들어준다. 

 

import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';


const persistor = persistStore(store);


ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

 

그후 persistStore로 persistor를 만들어준 뒤 persisGate에 props로 전달하여 준다. 이렇게 하면 redux에서 state가 새로고침을 해도 dispatch하지 않는 이상 바뀌지 않는다.

 

그 후에는 반응형 디자인을 손봤다. 전체적으로 모바일에서도 사용할 수 있게 하기 위한 것이 프로젝트할 때 목적이었기에 미디어 쿼리로 max-width를 나누어 작업했다. 

 

 

사실 기획을하고 역할을 나누고 테스트를 나누는 등 코드를 적는 시간은 1주일 정도였는데 결과물에 만족했고 마무리가 잘된 것 같아 정말 기분이 좋았다. 이번 팀원들과도 합이 정말 잘 맞아서 감사하다는 말씀을 드리고 싶다. 기회가 된다면 다음 프로젝트 때도 같이 했으면 좋겠다.