[💻 코드스테이츠 FE 44기]main-project - 11일차

마이페이지 리스트 조회하기

🤔 이슈사항

마이페이지 리스트 조회 작업을 진행했다.
일정, 즐겨찾기 탭메뉴가 있고
하단에는 본인 작성한 일정, 즐겨찾기한 카드를 모아 두었다.

마이페이지 리스트 조회는 다행히 커뮤니티 페이지와 거의 동일하기 때문에
조건이나 props만 수정하면 된다.

여기서 몇가지 이슈 사항이 있었다.

1. 남의 코드 고치는게 더 힘들다...
2. 타입스크립트 타입, eslint 에러 진짜 복병이다...ㅠ

1. 남의 코드 고치는게 더 힘들다...

원래 만들어져 있던 코드를 재사용하는게 쉬울 거 같지만
오히려 더 힘들다.

각각 어떤 기능을 하고 있는지 파악해야 하고
어떤 props를 내려주는지 등 코드 분석하는 시간이 오래 걸렸다.

또한 커뮤니티 페이지는 하나의 리스트를 조회하면 되지만
마이페이지는 본인 일정, 즐겨찾기 한 영역 2가지가 있는 점 부터 달랐다.

작업 하면서 막히는 부분은 작업하신 팀원 분께 바로바로 여쭤 보았다.

<FilterTab
  content="최신순"
  selectTab={selectTab}
  tab="Newest"
  onClick={setTab}
  />
<FilterTab
  content="좋아요순"
  selectTab={selectTab}
  tab="Like"
  onClick={setTab}
  />

탭메뉴 영역이 이런식으로 되어 있어 selectTab으로 구분을 하는거 같았다.
이부분은 다행히 금방 처리할 수 있었다.

<FilterTab
  content="일정"
  selectTab={selectTab}
  tab="First"
  onClick={setTab}
  />
<FilterTab
  content="즐겨찾기"
  selectTab={selectTab}
  tab="Second"
  onClick={setTab}
  />

기존에 있던거 처럼 특정 단어로 주지 않고
첫번째, 두번째, ... 네이밍을 변경해 재사용할 수 있도록 수정했다.

카드 컴포넌트도 마이페이지는 2가지를 조회해야 해서
selectTab이 First인 것과 아닌 것을 조건으로 줘서 나눠 주었다.

{selectTab === 'First'
  ? memberCourseList?.map((post: MypCourseSummaryT) => (
    <ContensCard
      ...
    </ContensCard>
  ))
  : memberBookmarkedList?.map((post: MyBookMarkSummaryT) => (
     <ContensCard
      ...
    </ContensCard>
  ))}

다행히 리스트 조회하는 건 금방 처리할 수 있었지만,
코드를 분석하고 이해하는데 많은 시간이 필요 했고
막힐 때 마다 작업 하신 팀원 분께 여쭤봐야 했었다.

2. 타입스크립트 타입, eslint 에러 진짜 복병이다...ㅠ

진짜... 기능 구현은 완료 했는데
빨간줄이 나를 힘들게 했다.

몇 개는 줄바꿈 해서 금방 해결 할 수 있었지만
간혹 해당 값은 undefined가 들어 올 수 있다. 등
애매한 오류를 뱉어 냈다.

const { data: userMemData } = useQuery(['userInof'], () => GetMyList());

처음엔 useQuery를 이용해 서버 데이터를 가져오려고 했다.
그랬더니 data를 찾을 수 없다는 오류가 났었다.

console.log(userMemData?.data?.memberBookmarkedList);

이런식으로 옵셔널 설정도 해주고 타입 설정도 해봤는데 해결하지 못했다.

팀원 분의 도움을 받았고
useQuery는 비동기 처리하기 때문에 값을 받아오기도 전에 불러와서 그런거 같다고 하셨다.
데이터를 전역으로 저장해서 불러 보면 어떠냐고 말씀해 주셨다.

import { PayloadAction, createSlice } from '@reduxjs/toolkit';

import {
  MypCourseSummaryT,
  MyBookMarkSummaryT,
  MypSummaryT,
} from '../types/apitype';

const initialState: MypSummaryT = {
  memberCourseList: [
    {
      courseContent: '',
      courseDday: '',
      courseId: -1,
      courseLikeCount: 0,
      courseThumbnail: '',
      courseTitle: '',
      courseUpdatedAt: '',
      courseViewCount: 0,
      isPosted: false,
      memberNickname: '',
    },
  ],
  memberBookmarkedList: [
    {
      courseId: -1,
      courseLikeCount: 0,
      courseThumbnail: '',
      courseTitle: '',
      courseUpdatedAt: '',
      courseViewCount: 0,
      likeStatus: false,
      memberNickname: '',
      postContent: '',
      postCreatedAt: '',
      postId: -1,
      tags: [''],
    },
  ],
};

const myInfoDataListSlice = createSlice({
  name: 'myInfoData',
  initialState,
  reducers: {
    setDataCourse(state, action: PayloadAction<MypCourseSummaryT[]>) {
      state.memberCourseList = action.payload;
    },
    setDataBookMark(state, action: PayloadAction<MyBookMarkSummaryT[]>) {
      state.memberBookmarkedList = action.payload;
    },
  },
});

export const myInfoDataListReducer = myInfoDataListSlice.reducer;
export const myInfoDataListActions = myInfoDataListSlice.actions;

Redux Toolkit 작성해 주고 타입도 지정해 주었다.
타입스크립트는 인자에 action이 들어갈 경우 PayloadAction<타입>을 꼭 해줘야 한다.

useQuery({
    queryKey: ['mypage'],
    queryFn: () => GetMyList(),
    onSuccess: (data) => {
      dispatch(
        myInfoDataListActions.setDataCourse(
          data?.data.memberCourseList as MypCourseSummaryT[]
        )
      );
      dispatch(
        myInfoDataListActions.setDataBookMark(
          data?.data.memberBookmarkedList as MyBookMarkSummaryT[]
        )
      );
    },
  });

  const memberCourseList = useSelector(
    (state: RootState) => state.myInfoData.memberCourseList
  );
  const memberBookmarkedList = useSelector(
    (state: RootState) => state.myInfoData.memberBookmarkedList
  );

그러고 useQuery를 바로 사용하지 않고
API 호출이 성공 했을 때 useDispatch를 이용해 값을 할당해 주었고
useSelector를 이용해 전역으로 저장된 데이터를 사용할 수 있었다.

그렇게 타입이 해결 되었나?

아니다... 아직도 오류는 해결 되지 않았다.
그래도 어느 정도 오류는 줄어 들었다.

이런 자잘한 타입 오류가 나는데 거이 해당 데이터의 문제 보단
데이터 요청이나 부모 요소의 에러인 경우가 있기도 한다.

타입스크립트 + eslint로 진행하다 보면 작어 시간 보다
타입 에러 해결하는 시간이 더 오래 거릴 때도 있는거 같다ㅠ

그 만큼 코드가 깔끔해 지고 가독성이 좋아지는 장점도 있는 듯 싶다.

---

✏️ 마치며

다른 사람이 작성한 코드 분석, 타입 에러로 시간을 많이 날린 날이다...

타입스크립트, eslint는 이번 메인 프로젝트에서 처음 알게 된 내용이라...
타입 에러가 다른 팀원들에 비해 많았고 해결하는데 오랜 시간이 걸렸던 거 같아 아쉬웠다.