[mini-project] 22.4.12-13 회고 (DAY-1, 2)

garaming·2022년 4월 14일

mini project redux

일일회고

📌 Scrum

22.4.12 scrum 회의록

로그인이 기본 이메일 비번 방식에서 구글로만 하는 걸로 결정했음. 이에 따라 이전 프로젝트 코드를 이해하고자 분석했음.
프론트 분들에게 ⚠️ 이전 프로젝트 스켈레톤 코드에서 useContext 랑 useReducer , dispatch 썼고, 이걸 recoil로 하면 바로 바꿀 수 있겠다고 생각했는데 dispatch도 있어서 간단하지 않았음.
오히려 redux가 수월할 것 같음. 어떠한지? - 영우 🆗. 파일 경로도 만들면 말씀 드리겠음. redux 폴더 만들어서 작업하겠음. 오늘은 상태관리 마치는게 목표.

▶️ 결과 : redux 코드는 모두 구현 완료했지만 아직 Back쪽과 연결을 하지 못한 상태.
22.4.12 scrum 회의록

redux 기능 돌려보기, 인증방식 질문으로 하는 걸 해볼 듯. 백엔드와 얘기 할 필요.

▶️ 결과 : redux 기능 돌리기 완료.. 인증 화면은 아직 건들지도 못했음ㅠ

✔️ 진행사항

📁 파일구조

front/src 디렉토리에 store를 추가했다. redux 구조는 네이버 공식 블로그를 참고하였음.

📁 store/actions

// actions/actionTypes.js
export const LOGIN_USER = "LOGIN_USER";
export const LOGOUT_USER = "LOGOUT_USER";

action type의 경우 따로 분리하는 편이 나중에 추가 할 때 편하기 때문에 다음과 같다. 또 type의 네이밍은 duck 패턴이라는 것을 따를 땐, "user/LOGIN"와 같이 액션의 이름에 접두사를 넣음으로써 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있다. 하지만 나는 duck 패턴을 사용하지 않으므로 패스.

// actions/userAction.js
import { LOGIN_USER } from "./actionTypes";

export const loginUser = (user) => {
  return {
    type: LOGIN_USER,
    user: user,
  };
};

action 네이밍이 아직도 와닿지가 않는다..ㅠ 일단 타입과 통일시켰음. action은 user 객체를 받아서 type과 user 객체를 반환하는 형태이다.
후에는 직접 axios로 api 호출을 해서 데이터를 받아오는 형식도 가능하다. 이러한 비동기 통신을 위해서는 thunk라는 미들웨어를 사용한다.
하지만! 기존 코드는 모든 api호출이 바깥에 이루어져 있어서 나는 반환값(res.data)을 액션에 전달하는 걸로..

📁 store/reducers

// reducers/userReducer.js
import { LOGIN_USER } from "../actions/actionTypes";

export const userReducer = (state = {}, action) => {
  switch (action.type) {
    case LOGIN_USER:
      console.log("%c로그인 성공!", "color: #d93d1a;");
      return {
        ...state,
        user: action.user,
      };
    default:
      return state;
  }
};

reducer의 첫번째 인자인 initial state는 변수로 따로 지정해도 된다. 두번째 인자로는 action을 받아 action의 type에 따라 state를 반환한다. 이때 반환 값은 action에서 받은 유저 정보(=userState)

// reducers/index.js
import { combineReducers } from "redux";
import { userReducer } from "./userReducer";

const rootReducer = combineReducers({
  userReducer,
});

export default rootReducer;

여러 reducer를 사용하는 경우가 생길 수 있기 때문에, combineReducers 메소드를 사용하여 묶어준다.

📁 store

// store.js
import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import rootReducer from "./reducers/index";
import ReduxThunk from "redux-thunk";

const store = createStore(rootReducer, applyMiddleware(ReduxThunk, logger));

export default store;

dispatch에 action객체 말고 함수를 전달하기 위해서 (또는 나중에 비동기 처리를 위해) thunk 메소드를 사용했다. logger는 훗날 state를 확인하고 싶어서 추가하였음.. 본 플젝 코드에서는 안쓸 것(배포 수준에서는 필요가 없다더라)

📁 src

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import store from "./store/store";

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById("root")
);