저희 팀은 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 수정)