학습내용
- Pull Requests로 merge하기
- json-server 기반으로 리팩터링
merge를 마친 후 다시 원래 브랜치로 돌아가 git pull origin (base branch)
를 실행하면 병합이 완료된 버전에서 작업을 이어갈 수 있다.
PR을 실행하기 전에는 campare에 해당하는 브랜치가
add
-commit
-push
를 마친 상태여야 한다.
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 사용)
- 이벤트 배경 이미지 추가