학습내용

• Pull Requests로 merge하기
• json-server 기반으로 리팩터링

Pull Requests로 merge하기

1. New pull request
2. base와 campare 선택
   • base : 최종적으로 머지가 반영될 브랜치
   • compare : 변경한 내용을 반영할 브랜치
3. 구체적인 내용 작성 후 Create pull request
4. merge
   충돌이 발생하면 충돌 부분 수정 후 merge

merge를 마친 후 다시 원래 브랜치로 돌아가 git pull origin (base branch)를 실행하면 병합이 완료된 버전에서 작업을 이어갈 수 있다.

PR을 실행하기 전에는 campare에 해당하는 브랜치가 add-commit- push를 마친 상태여야 한다.

json-server 기반으로 리팩터링

데이터 조회

src/components/Calendar/Calendar.jsx

export const Calendar = () => {
  const { posts } = useSelector((state) => state.calendar);

  useEffect(() => {
    dispatch(__getPosts());
  }, [dispatch]);
  .
  .
  .
  return (
    <>
      <CalendarContainer>
        <FullCalendar events={posts} />
      </CalendarContainer>
    </>
  );
};

리덕스 모듈의 initialState에서 불러오던 데이터를 json-server에 저장되어 있는 데이터(posts)로 변경

데이터 필터링

src/redux/modules/calendarSlice.js

// 푸터 팀원 이벤트 필터링
export const __filteredEvents = createAsyncThunk(
  "filteredEvents",
  async (payload, ThunkAPI) => {
    const response = await axios.get("http://localhost:3001/posts");
    const result = ThunkAPI.fulfillWithValue(response.data).payload.filter(
      (item) => {
        if (item.userId === payload) {
          return item;
        }
      }
    );
    return result;
  }
);
.
.
.
const calendarSlice = createSlice({
  name: "calendar",
  initialState,
  reducers: {...},
  extraReducers: {
    // 캘린더에서 이벤트 조회
    [__filteredEvents.fulfilled]: (state, action) => {
      state.posts = action.payload;
    },
  },
});

filter 메서드를 사용하는 방법은 동일하나 extraReducers와 __filteredEvents 중에서 어느 곳에서 사용해야 하는 지가 문제였다. 그래서 둘 다 시도해보았다.

• extraReducers

      [__filteredEvents.fulfilled]: (state, action) => {
        state.posts = action.payload.filter((item) => {...});
      }

  db.json에 저장된 모든 데이터가 action.payload로 들어오기 있기 때문에 filter를 걸었는데 동작하지 않았다. 또한 동작한대도 필터링 기준이 되는 이름 데이터를 가져올 수 없기에 비교 자체가 불가능 했다.

• __fillteredEvents

      const result = ThunkAPI.fulfillWithValue(response.data).payload.filter(
        (item) => {
          if (item.userId === payload) {
            return item;
          }
        }
      );

  그래서 json-server 통신 결과(response)와 필터링 기준 데이터(payload)를 모두 받아오는 __fillteredEvents에서 필터링을 시도하자 성공적이었다.

reducers	extraReducers
데이터를 변경	서버와의 통신 결과에 따른 데이터를 반환

아직 thunk를 완벽하게 이해하지 못하는 바람에 reducers와 extraReducers의 차이점을 제대로 알지 못해서 리팩터링 과정에서 어려움을 겪었었는데 이번 기회에 제대로 알게 되었다. extraReducers는 thunk 함수의 통신 결과(pending, fulfilled, rejected)에 따른 데이터를 반환한다.

내일 할 일

• 라우팅 설정
• 캘린더-상세페이지 연결
• 드래그로 변경한 일정의 날짜 정보 수정
• title 길이 코멘트 유무 여부에 따라 자동 설정
• 공휴일 정보 추가(구글 캘린더 API 사용)
• 이벤트 배경 이미지 추가