[Refactoring] IssueTracker _상수관리하기

Issue Tracker

• API 객체화 컴포넌트별 관리
  API를 상수로 관리하였고, 변수명에 API의 내용을 담아 네이밍을 하였다.
  개발을 하면서 API가 굉장히 많이 늘어났고, 변수명만으로 필요한 API를 찾는데 어려움을 느꼈다. 또한 비슷비슷한 요청에 대해서는 네이밍의 고통을 느끼게 되었다.

BEFORE

const API: APItype = {
  tabType: basicURL + `/issues/form`,
  createIssue: basicURL + `/issues/form`,
  editDeleteMilestone: (milestoneID) => basicURL + `/milestones/${milestoneID}`,
  editIssueTitle: (issueId: number) => basicURL + `/issues/${issueId}/title`,
  labelURL: basicURL + '/labels',
  editLabel: (id) => basicURL + '/labels/' + id,
  editIssueDetailOption: (id, type) => basicURL + `/issues/${id}/${type}s`,
  
...(생략)...
  
};

때문에 API 상수관리가 필요했고
API를 사용하는 컴포넌트를 명시,
요청하는 메서드와 요청 내용으로 나누어 명시해서 필요한 API를 빠르게 찾을 수 있게 수정했다.

AFTER

const API: APItype = {
  ISSUE: {
    GET: { ALL: basicURL + `/issues?`, FILTER: basicURL + `/issues/search?` },
    POST: basicURL + `/issues/form`,
  },
  ISSUE_DETAIL: {
    GET: {
      CLICKED: (id) => basicURL + "/issues/" + id,
      OPEN: basicURL + `/issues?status=close`,
      CLOSE: basicURL + `/issues?status=open`,
    },
    PATCH: {
      FILTER: (id, type) => basicURL + `/issues/${id}/${type}s`,
      TITLE: (issueId) => basicURL + `/issues/${issueId}/title`,
    },
    POST: {
      FILE: basicURL + `/images`,
      COMMENTS: (issueId) => basicURL + `/issues/${issueId}/comments`,
    },
  },
  MILESTONE: {
    GET: { ALL: (status) => basicURL + `/milestones?status=${status}` },
    POST: { CREATE: basicURL + `/milestones` },
    PATCH: {
      EDIT: (milestoneID) => basicURL + `/milestones/${milestoneID}`,
      OPEN_CLOSE: (status) => basicURL + `/milestones?status=${status}`,
    },
    DELETE: (milestoneID) => basicURL + `/milestones/${milestoneID}`,
  },
  LABEL: {
    GET: basicURL + "/labels",
    PATCH: (id) => basicURL + "/labels/" + id,
    DELETE: (id) => basicURL + "/labels/" + id,
    POST: basicURL + "/labels",
  },
  
...(생략)...
};