●[Main-Project] Refactor: 1일차

저희 팀은 query와 mutation 관련된 함수들을 src > api 폴더로 만들어 따로 관리하였었는데요, 로직을 나누고 작업을 하면서 각자 작업하다보니 중복이 생긴지 모른채 작업했었답니다ㅠ_ㅠ;;

게다가 작업을 같이 병행하면서 중복을 제거하는게 쉽지 않았기때문에 프로젝트가 마무리되기 이전에도 수정하지 못했었어요. 배포 후 터진 에러들이 많았기 때문에.. 그래서 프론트엔드 팀원이신 한분과 함께 같이 리팩토링을 진행하게 되었습니다.

 

● 1일차 작업 분배

❍ queryfn.ts (준석)

• 중복되는 로직 삭제 (getWalkmateList )

❍ mutationfn.ts (다은)

• post, patch, delete 요청에 맞춰서 함수명 통일하기 (현재 add, edit, delete.. 마구잡이임)
• + 겹치는 로직 삭제 및 수정
• formdata post , patch, delete 요청의 코드가 똑같다.
• 각 method 별로 똑같은 것을 코드로 관리

❍ routers > path.ts (준석)

• enum이 JS로 컴파일되면 treeShaking이 되지 않는다고 들어서, const enum??이었는지 기억이 잘안나지만 treeShaking이 되는 코드로 변환해도 좋을 것 같아요. → const enum으로 수정
• navigate나 path 이동될때 enum router 불러와서 수정하기
• import 절대경로 수정 → 시간남으면 (1시간이면 하지 않을까?)

mutation 부분이 많았기때문에, 준석님께서 두부분을 맡아주시기로 했습니다.

 

● mutationfn.ts 분리작업

❍ 중복되는 mutation 함수 제거

/* -------------------------------- 피드게시물 삭제 -------------------------------- */
interface DeleteFeedProp {
  url: string;
  token: string | null;
}

export const deleteFeed = async (body: DeleteFeedProp) => {
  const { url, token } = body;
  const result = await axios.delete(url, {
    headers: {
      Authorization: token,
    },
  });
  return result;
};


/* -------------------------------- 피드게시물 댓글 삭제  -------------------------------- */
export const deleteFeedComment = async (body: MutationProp) => {
  const { url, accessToken } = body;
  const result = await axios.delete(url, {
    headers: {
      Authorization: accessToken,
    },
  });
  return result;
};

위와 아래 로직은 같은모양인데, 다른 interface로 prop을 받고 있고, 로직이 중복되고 있었습니다. 이것 이외에도 patch요청이나 formadata를 post하는 mutation 함수코드가 중복되고있었기때문에, 이런 코드들의 중복을 제거하였습니다.

 

아래같이 공통 mutation 함수를 만들어 코드 중복을 제거하였습니다.

/* ------------------------------ POST METHOD (FORMDATA)------------------------------ */

export const postFormMuation = async (body: MethodFormProp) => {
  const { formData, url, accessToken } = body;
  const result = await axios.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: accessToken,
    },
  });
  return result.data;
};

/* ------------------------------ PATCH METHOD ------------------------------ */
export const patchMutation = async (body: MutationProp) => {
  const { url, accessToken } = body;
  const result = await axios.patch(
    url,
    {},
    {
      headers: {
        Authorization: accessToken,
      },
    },
  );
  return result;
};

/* ------------------------------ DELETE METHOD ------------------------------ */
export const deleteMutation = async (body: MutationProp) => {
  const { url, accessToken } = body;
  const result = await axios.delete(url, {
    headers: {
      Authorization: accessToken,
    },
  });
  return result;
};

 

❍ 중복되는 interface제거 및 extneds 처리

이외에도 prop으로 전달 받는interface의 중복이 많아서 그 부분도 interface의 extends를 활용하여, 코드중복을 최대한 제거하였습니다.

interface MutationProp {
  url: string;
  accessToken: string | null;
}

export interface Comment extends MutationProp {
  id: string;
  content: string;
  tag: string;
}

interface MethodFormProp extends MutationProp {
  formData: FormData;
}

 

결과적으로 거의 절반이나 줄일 수 있었다..

 

이외에도 멘토님께서 말씀주셨던 절대경로로 import해오는 식으로 코드를 수정하였습니다. (tsconfig.json 수정)