[불어나는 API_URL 관리] - 1차 팀프로젝트 리팩토링 #첫 번째

💡 TMDB API - 영화에 대한 각종 정보를 가져올 수 있는 사이트

Getting Started

 

간략한 팀프로젝트 소개

• tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 
• 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 

---

프로젝트에 대한 기능을 완성하고 몇 가지 수정하고 싶은 부분이 생겼다. 그 중 첫번째는 다양한 데이터를 조회하다 보니 api 요청 `url`이 꽤나 많이 사용되고 있었는데 이러한 `url`을 하나의 함수로 관리하도록 변경하였다.

 

 

기존 코드

async function 함수_1(id) {
  const apiUrl = `https://영화 상세정보 요청 url`;
  // 코드 ..
 }
 
 async function 함수_2(id) {
  const apiUrl = `https://출연진 정보 요청 url`
  // 코드 ..
 }
 
 // 함수_3, 함수_4... 등

문제점

• '가독성 문제': 종류가 많아질수록 어떤 데이터를 요청하는 `url` 인지 바로 파악하기가 어렵다. 함수나 변수명을 보고  파악해야한다. 
• '유지보수': `url`을 수정하려면 함수를  찾아가며 수정해야한다. 

 

변경된 코드

function getUrl(type) {
  const endpoints = {
    movie: `https://영화 상세정보 주소`,
    credits: `https://영화 출연진 정보 주소`,
    ott: `https://OTT 정보 주소`,
    // 기타 등등..
  };

  return endpoints[type]
}

async function 함수_1(id) {
  const apiUrl = getUrl("movie")  // url 반환 함수에 각 데이터의 type만 넘겨주면 됨
  // 코드 ..
 }
 
 async function 함수_2(id) {
  const apiUrl = getUrl("credits")
  // 코드 ..
 }
 
 // 함수_3, 함수_4... 등

함수내의 객체에 `url`을 정의해놓았다. 어떤 유형의 정보인지 `type`이라는 매개변수를 받아 객체의 속성과 매핑하여 반환 한다. 

변경 목적

• 관리가 용이해진다. `url` 관련 데이터를 수정할 때 `getUrl()` 함수에서만 수정이 일어나면 된다. 
• 가독성이 좋아진다. `getUrl()` 을 호출하는 부분에서도 어떤 유형의 데이터를 요청하는지 바로 확인이 가능하고, `getUrl()` 함수 안에서도 `url`이 어떤 정보를 담당하는지 보기 편하다.

 

문제점

• 객체로 관리할 경우 정적인 `url` 데이터를 처리하는데에는 이상이 없을 수 있다. 
• 하지만 추가적인 로직이(조건, 예외처리 등) 들어가야 한다면 다른 방식으로 변환하는 작업이 필요할 것이다.

 

조건문으로 url 처리

function getUrl(type, { movieId = null, countryCode = null, genres = null, page = 1 } = {}) {
    switch (type) {
        case 'genres':
            if (!genres || !countryCode || !page) throw new Error('장르 데이터를 보려면 장르코드, 국가코드, 페이지 정보 필수');
            return `${BASE_URL}/discover/movie?api_key=${API_KEY}&with_origin_country=${countryCode}&with_genres=${genres[0].id}&without_genres=${WITHOUT_GENRES}&page=${page}`;
        case 'detail':
            if (!movieId) throw new Error('영화의 상세정보를 보려면 movieId가 필수임');
            return `${BASE_URL}/movie/${movieId}?api_key=${API_KEY}`;
    }
}

이번에는 객체 대신 `switch` 문으로 까다로운 조건까지 처리해서 `url` 을 반환해주는 함수이다. 매개변수로 `type` 뿐만 아니라 `movieId`, `countryCode`, `genres` ... 등의 변수까지 받아서 `url`을 생성하는 것은 물론이고 예외처리까지 진행했다. 

 

변경 목적

• 데이터 유형(`type`) 뿐만 아니라,  추가적인 데이터 요청을 위한 변수를 받아, `url`을 생성할 수 있다.
• 객체로는 처리하기 번거로운 예외처리까지 가능하도록 변경했다.

 

정리

• 프로젝트를 진행하다 보니 각기 다른 요청 `url`이 매우 많아질 수 있다는 것을 느꼇다.
• `url`에 다양한 파라미터를 전달할 경우 문자열의 길이도 매우 길어질 수 있다. 
• 위의 두 가지(+@)등의 이유로 모든 함수에 url을 선언해놓으면 찾기도 힘들고 보기도 힘들다. 
• 하나의 함수에서 관리를 하게 되면 문제가 어느 정도 해소가 될 수 있다. 

 

(2) - [중복되는 매개변수 제거]