22.06.23 회고(Redux-persist, RTK-Query)

Facts(사실/ 객관)

[업무]

1. 지난 달부터 구독자가 많이 감소하여 대응 TF팀이 꾸려 졌는데 논의 결과, 액션플랜으로 구독 프로세 일부를 개편하기로 했다.
   하루 빨리 시도 해봐야 되는 급한 건으로 하던 next.js migration 업무를 멈추고 구독 개편에 투입 되었다.
2. 나는 구독프로세스를 담당했는데(액션 플랜으로 구독 프로세스를 간소화 하는 것이 나옴) 1단계의 구독 박스 선택을 없애야 했다. 
   하지만 작업을 하다보니 구독 프로세스 중 새로고침 시 어디로 가야 되는 지 의문이 들었다.기존에는 1단계인 구독박스 선택으로 향하면 됐는데 이제는 1단계가 수량 선택이기 때문이다. 그래서 구독박스 선택을 할 수 있는 구독 랜딩으로 가야지 생각하고 기획자와 소통했다. 1인 다역을 하는 기획자는 거기까지는 미쳐 고려하지 못했기 때문에 ('당연히 1단계인 수량 선택으로 가야지' 했다가 '그럼 구독 박스 정보가 없자나'는 반문에 털썩) 뼈아프지만 다시 랜딩으로 보내자고 했다.
   
   하지만 작업을 하며 생각해보니 만약 구독 프로세스 진행중 새로고침이 일어날 시 유저는 구독 랜딩 -> 구독 상세페이지 -> 구독프로세스 라는 구간을 다시 반복해야 한다. 그래서 url 쿼리로 어떤 구독박스인지를 구독프로세스 중에 명시해준다면 새로고침을 하더라도 1단계로 진입하여 다시 프로세스를 진행할 수 있게다는 생각이 들어 제안했고 '너무 좋다'라는 피드백을 받았다.  

[일상]

1. 재택하는 날이라 오전에는 카페 갔다가 점심시간에 운동하고 오후에는 집에서 근무했다. 저녁에는 밥먹고 좀 쉬다가 카페에서 남은 업무를 좀 하다가 회고를 쓴다. 

---

Feelings(느낌,주관)

1. 능동적인 개발을 해서 뿌듯하다. 
   개발이라는 일의 특성상 굉장히 끝단에 위치한다. 유관부서의 요청에 의해, 기획자와 UX디자이너의 요청사항을 구현하는 업무가 거의 대부분을 차지한다. 그러다 보면 어느새 수동적으로 요청사항만 생각하는 개발을 할 수가 있다. 그러다 보면 개발적으로만, 내가 아는 지식의 범위에서만 별 고민없이 가능 여부를 판단하고 알려준다. 문제는 비개발자는 개발을 알 수 없기에 개발자의 의견이 곧 가능여부로 이해된다는 데 있다. 
   
   그렇기 때문에 내가 뱉는 말을 조심해야 한다는 걸 느낀다. 짧고 수동적인 생각으로 '구독 박스를 선택할 수 없으니 랜딩으로 보내야지' 라고 답했지만 능동적으로 고민하여 '그렇다면 쿼리를 써서 구독 박스 정보를 url에 계속 남기는 것을 어떨까' 라고 먼저 제안을 했다.
   
   앞으로의 개발도 오늘처럼 능동적인 개발을 해야한다고 느낀다. 내가 아는 범위에서 쉽게 안된다고 뱉기 전에 치열하게 고민하고 찾아보고 설령 요구사항을 못들어 줄지라도 최대한 UX를 위한 방향도 같이 고려하는 개발자가 되어야 한다. 
   
   단순히 개발만 잘하는 것이 다가 아니다. 그런 능동성이 자신의 가치를 결정함을 느끼는 하루다. 
   
   
2. 환경이 중요하다.
   화목에는 재택을 하기 때문에 쉽게 나태해질 수 있다. 초반에는 그런 것이 힘들어 굳이 1시간 30분 걸려서 출근도 했다(당시 회사 위치 광교). 최근에는 화목 점심시간에 PT를 끊어 재택 날에 회사를 가지 못했는데 오전에는 카페에서 오후에는 집에서라는 업무 루틴을 만들어 괜찮은 집중도를 가져왔다. 문제는 저녁먹고 나서인데 재택하는 날에는 쉽게 누워 재미난 영상을 보며 시간을 낭비하게 된다는 것이다. 이번주 화요일도 그랬고 기억은 나지 않지만 꽤 많은 날에 그랬던 것 같다.
   
   그래서 오늘은 저녁 먹고 좀 쉬다 카페를 왔는데 괜찮은 집중도로 시간을 쓰고 있는 것 같다.
   역시 환경이 중요하다는 것을 다시 한번 느낀다.

 

 

---

Findings(배운점)

1. Redux persist

[배경]
RTK-Query를 찾아보다 들어간 블로그에서 우연히 'redux persist새로고침 시에도 상태 유지' 라는 제목을 보고 궁금증이 생겨 들어가 보았다. 마침 위에 얘기했듯 새로고침에 대한 고민이 있었고 저번 구독 프로세스 개편 시 소셜페이 연동 시 리로드 되어 리덕스 상태가 날라가는 문제에 봉착하여 로컬스토리지에 저장 후 다시 리덕스에 상태를 보내줘서 사용했던 경험이 있었기에 더 관심이 갔다.

 

역시 내가 느꼈던 문제는 다른 개발자도 똑같이 느끼고 웬만한건 해결책이 이미 존재한다는 걸 느낀다.  

[개념] 
localStorage나 sessionStorage에 저장하고자 하는 reducer state을 저장하여 새로고침하여도 저장 공간에 있는 data를 redux에서 불러올 수 있다.

 

1-0. 설치

npm i redux-persist

 

1-1. reducer에 persist store 정의

• localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage
• session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session

// reducers/index.js
import { combineReducers } from "redux";
➊ import { persistReducer } from "redux-persist";
➋ import storage from "redux-persist/lib/storage";

import auth from "./auth";
import board from "./board";
import studio from "./studio";

➌ const persistConfig = {
  key: "root",
  // localStorage에 저장합니다.
  storage,
  // auth, board, studio 3개의 reducer 중에 auth reducer만 localstorage에 저장합니다.
  whitelist: ["auth"]
  // blacklist -> 그것만 제외합니다
};

export const rootReducer = combineReducers({
  auth,
  board,
  studio
});

➍ export default persistReducer(persistConfig, rootReducer);

 

1-2. persist store 사용

// src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
➊ import { persistStore } from "redux-persist";
➋ import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import configureStore from "./store";
import { rootReducer } from "./reducers";

const store = createStore(rootReducer);
➌ const persistor = persistStore(store);

const Root = () => (
  <Provider store={store}>
    ➍ <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById("root"));

 

획기적이다. 로그인 정보의 경우 리로드시 매번 새로고침 시 유저의 정보를 가져올 필요 없이 redux-persist를 사용해서 상태를 관리할 수 있겠다. 또한 구독 프로세스의 경우에도 굳이 첫 단계로 다시 보낼 필요 없이 해당 단계에서 다시 진행 할 수 있겠다는 생각이 든다. 

추후에 한번 활용해 봐야지! 

참고자료 

1. https://11001.tistory.com/191

 

2. https://kyounghwan01.github.io/blog/React/redux/redux-persist

1. RTK - Query

[배경]

코드숨의 다른 분의 PR 리뷰에서 우연히 보게 됐는데 궁금해졌다. 이번주 주말에 찾아봐야지!