💻6/16

6/16

구현

미들웨어로 합치느라 별 삽질을 다 하다가 결론적으로 action을 모두 합치고, 조건 처리도 모두 reducer에서 처리하도록 했다.

react 실강에서 미들웨어는 redux에서 모든 상태, action들이 거쳐가는 역할이라고 하셨는데(?) 우리는 slice를 두가지 쓰고 있고, 내가 처리하려는 것은 searchSlice에만 관한 것이어서 미들웨어에서 작업하려면 action이 searchSlice에서 온 건지, clipSlice에서 온 건지부터 판단해야했다.

store를 두 개 쓰거나, action.type으로 판별하거나, try catch문으로 처리하거나...
방법은 다양했으나 결론적으로 미들웨어의 역할이 맞는지 확신도 없고, 궁극적으로 내가 잘 구현하지 못했다 ㅎ;;

결국 Input.jsx에서는 깔끔하게 update 액션만 작성해주고, updateHistory 액션 내에서 모두 처리해주도록 작성했다.
(이렇게 작성하니 결국 10분만에 작성할 수 있었다. 내 하루가... 😇) 괜찮아! 이게 다 성장의 일부지 뭐

// store.js
import { createSlice } from '@reduxjs/toolkit';

const historyMax = 5;

const searchSlice = createSlice({
  name: 'search',
  initialState: [],
  reducers: {
    updateHistory: (state, action) => {
      if (state.includes(action.payload)) {
        let temp = [...state];
        temp.splice(state.indexOf(action.payload), 1);
        return [action.payload, ...temp];
      }

      // 최대 개수이면 삭제하고 값 넣어주기
      return (state.length === historyMax) 
      ? [action.payload, ...state.slice(0, state.length-1)]
      : [action.payload, ...state];
    },
  },
});

export const { updateHistory } = searchSlice.actions;
export default searchSlice.reducer;

// Input.jsx
import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux';

import { updateHistory } from '../reducer/searchSlice';

export default function Input() {

  const history = useSelector(state => state.searchSlice);
  const dispatch = useDispatch();

  const [value, setValue] = useState("");

  const onChange = (e) => {
    setValue(e.target.value);
  }

  const onEnterDown = (e) => {
    if (e.key === "Enter") {
      searchFunc();
    }
  }

  function searchFunc() {
    dispatch(updateHistory(value));
  }

  return (
    <div>
      <input onChange={onChange} onKeyDown={onEnterDown}/>
      <div> {history.map((value, i) => (<p key={i}>{i} : {value}</p>))}</div>
    </div>
  )
}

Git과 멘토링

이제 Input 작업을 맡은 나와 팀원이 한번 Merge를 진행해보기로 했다.
이 과정이 매우 까다로웠다. 아직 해결 못 함.
아예 한 파일에서 동시에 작업을 하니 confilct가 났고, 당연한거라고 생각은 했으나 이렇게 하나부터 열까지 내가 수정해야하는 것이라고 생각 못했다. (Git이 어느 정도 해주는 줄...)

멘토링과 매니저님 둘 다 공통적으로 말씀하신 것을 토대로 내가 느낀 것은

• 애초에 작업 단위를 나눌 때 이렇게 짜면 안됨.
  물론 미니 프로젝트가 단위가 작다보니 어쩔 수 없긴 했는데, 이럴거면 한명이 일단 input 작업 하고, 한 명은 header 작업하고 있고, 이런 식으로 어느 정도 다른 파일을 작업한 다음에, input이 다 끝나면 그 때 다른 사람 input 작업을 할 수 있게? 이런 식으로 나눴어도 괜찮을 것 같다.

• 브랜치 이름을 기능/이름 으로 하고 develop으로 두지 말 것.

찾아볼 것

• git rebase

• git 작업 흐름