[Dev_Log] 8/16 (월) 김정빈

## 오늘 할 일 (To Do)

- palette page 구성
- login page 구성
- signup page 구성
- nav-bar 기능 구현
- logo 클릭시 팔레트페이지 이동
- Log-in 했을 경우 log-in -> log-out으로 바꾸기

## 오늘 한 일 (Done)

- [x] palette page 구성완료
- [x] login page 구성 완료
- [x] signup page 구성 완료
- [x] redux-persist 적용하기

## 오늘의 프로젝트에서 배운 점은 무엇인가요?

- **redux state는 새로고침하면 날라간다 (feat.redux-persist)**

퍼스트 프로젝트시에도, 페이지 새로고침시 저장해두었던 state가 자꾸 초기화가 되어서 애먹었던 기억이 있다. 결국 임시방편으로 해당 페이지에서 새롭게 axios 요청을 함으로써 해결했지만, 이는 마음에 드는 해결방법은 아니였고, 이번에는 redux를 이용하여 상태관리를 해주기로 했다.
어느정도 예상은 했지만, 다른페이지로 넘어갈 시에 상태가 잘 저장되지만 새로고침시에 상태가 날아가버려서 방법을 찾아본 결과 redux-persist를 사용하면 이를 해결할 수 있다.
redux-persist는 localStorage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 형식으로 이루어진다.
즉 local Storage 혹은 session Storage 두개중 한곳을 선택해서 상태를 저장하는 것이다.
session storage와 local storage는 거의 같지만, session storage는 창을 닫으면 정보가 사라지지만 local storage는 직접 지우기전까지 사라지지 않는다는 특징이 있다.
나는 사용자가 로그인상태를 좀더 유지하기 쉽게 local storage에 저장하기로 했다.

이를 적용하는 법은 `reducer/index, src/index` 두곳만 수정해주면 되는 간단한 작업이다.

```tsx
// reducer > index.tsx

import numberReducer from "./numberReducer";
import userReducer from "./userReducer";
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist"; // 추가
import storage from "redux-persist/lib/storage"; // 추가

const persistConfig = { // 추가
key: "root",
// localStorage에 저장합니다.
storage,
whitelist: ["userReducer"],
// blacklist -> 그것만 제외합니다
};

const rootReducer = combineReducers({
numberReducer,
userReducer,
});

// export default rootReducer; -> 아래 persistReducer에 넣어준다.
export default persistReducer(persistConfig, rootReducer); // 변경

// src > index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./Store";

import { persistStore } from "redux-persist"; // 추가
import { PersistGate } from "redux-persist/integration/react"; // 추가

const persistor = persistStore(store); // 추가

ReactDOM.render(

// 추가


,
document.getElementById("root"),
);
```

위와같이 코드를 추가해주면 상태를 임시적으로 local storage에 저장하기때문에 새로고침하거나 심지어 다른페이지를 갔다와도 저장이 되어있다.
또한 redux toolkit을 사용하는법도 알아봐야겠다.

### [redux-persist 사용법](https://kyounghwan01.github.io/blog/React/redux/redux-persist/#reducer에-persist-store-정의)
### [리덕스를 빛내주는 도구들](https://jeffarea.site/blog/redux/)

# 내일 할 일

- [ ] PalettePart type 지정하기
- [ ] accessToken 저장 구성하기
- [ ] Main Page 기능 완성하기 (Mic)
- [ ] redux action 재구성

## 더 알아봐야 할 것

- 각종 redux action에서 아래 3단계로 나누더라? (log-in)
- LOGIN_REQUEST
- LOGIN_SUCCESS
- LOGIN_FAILURE