API를 관리해보자

기존 프로젝트는 api 호출 시 method와 url을 직접 입력하고 있었는데,
같은 url인데도 계속 입력을 해주어야 했고, 수정할 때도 파편화 된 부분들을 찾아서
다 수정해야 하는 번거로움이 들어서 모듈로 만들어 관리하기로 하였다.

request({
  method: "method",
  url: "endpoint",
  params: {
     ...
  }
});

위와 같이 진행중이였는데 몇 가지 단점들을 느꼈는데..

1. 같은 endpoint라도 직접 타이핑을 해주어야 하는 번거로움
2. endpoint가 dtl, lt 같이 명확하지 않은 줄임말일 경우 헷갈림
3. 같은 endpoint에 parameter만 바뀌는데도 직접 타이핑을 해야 하기에 만약 endpoint가 수정될 경우 전부 다 수정을 해 주어야 하는 상황

아래와 같이 모듈로 바꾸기로 마음을 먹었다.

// api
export const API_LIST = {
	login: {
       method: "post",
       url:"/api/login"
    },
    dashboard: {
       method: "post",
       url: "/api/dashboard"
    }
};


// use
import { API_LIST } from "API_LIST";
request(API_LIST.dashboard, parameter1)
request(API_LIST.dashboard, parameter2)
request(API_LIST.dashboard, parameter3)

위 처럼 한 곳에서 관리하는 것으로 변경하였고, 개인적으로 느껴지는 장점으로는

1. API_LIST의 key값으로 어떤 api인지 유추가 가능해졌고,
2. 하나하나 직접 타이핑 하지 않아도 되고,
3. 만약 dashboard의 url이 바뀐다고 해도 한 곳만 수정하면 되니 반복 작업이 줄어서 편해졌다.

하나씩 바꿔가며 편리해지는 기분이 들어서 아주 좋다.