외부에 의존하는 코드 줄이기 + API를 그대로 사용하면 안 좋은 이유는?

 

API를 그대로 사용하면 안 좋은 이유는?

 

외부 API를 그대로 사용하면 제공해 주는 서비스의 API에 크게 의존하게 됩니다.

 

예시 1) 기상청으로부터 받아오는 API   - date

 

기상청의 API 중 date를 일반 문자열로 받아 사용하는 코드를 작성했다고 가정해 봅시다. 기상청에서 API 중 date를 year, month, day로 이루어진 객체로 바꾸게 된다면 작성했던 코드 중  date 부분은 전부 수정해야 합니다. 2~3개라면 괜찮지만 그 개수가 많아질수록 코드를 일일이 바꾸는데 시간이 듭니다. 

 

예시 2) API를 받아오는 플랫폼 변경 - 한국 기상청 -> 미국 기상청

 

API를 제공해 주는 곳을 변경해야 할 때가 있을 텐데요. 이때 한국 기상청과 미국 기상청에서 제공하는 API는 많이 다를 것입니다. API가 사용된 모든 코드를 일일이 수정해야 하기에 비효율적입니다.

 

예시 2) 비슷한 플랫폼들의 API를 가져와 사용할 때 - 최저가 사이트

 

상품을 파는 플랫폼들의 가격을 가져와 최저가를 알려주는 사이트를 만든다고 가정해 봅니다.

네이버 = price

쿠팡 = commodity_price

11번가 = product_price

다나와 = cost

 

등등 다양한 이름의 종류가 있을 텐데 코드를 작성하며 각각 다르게 작성하기는 어려울 것입니다.

 

해결방법 - 도메인 객체 만들기

자신의 코드에서 사용할 API를 직접 만들어 관리하면 해결할 수 있습니다.

 

필요한 API를 불러와 자신이 사용할 API로 직접 가공해서 사용하면 됩니다.

 

 

TMDB에서 가져온 API를 가공하는 예시 코드입니다.

 

poster_path로 주는 이미지를 imgUrl로 바꾸어 사용했습니다.

  parseMovieList(fetchedMovies: MovieListResult[]): MovieInfo[] {
    return fetchedMovies.map((movie: MovieListResult) => {
      return {
        id: movie.id,
        title: movie.title,
        imgUrl: movie.poster_path,
        score: movie.vote_average,
        description: movie.overview,
      };
    });
  }
  
  
  static parseMovieDatail(fetchedMovie: MovieDetailResult): MovieDetailInfo {
    return {
      id: fetchedMovie.id,
      title: fetchedMovie.title,
      imgUrl: fetchedMovie.poster_path,
      score: fetchedMovie.vote_average,
      description: fetchedMovie.overview,
      categories: fetchedMovie.genres.map(genre => genre.name).join(', '),
      releaseDate: fetchedMovie.release_date,
      runningTime: fetchedMovie.runtime,
    };
  }

 

---

 

제어할 수 없는 것에 의존하지 않기 (외부 코드 줄이기)

비슷한 이유로 fetch, jest 코드 등 사용하는 라이브러리를 변경할 때 수정을 최소화하는 방법을 찾아야 합니다.

 

제어가능한 코드를 최대한 늘리고, 제어가 어려운 코드를 비즈니스 로직으로 변경해 나가는 코드를 사용해야 합니다.

 

1. Fetch API 래핑 하기 (추상화)

 

코드에서 사용하는 fetch를 추상화하여 axios에서 ReactQuery로 라이브러리를 변경하더라도 도메인 fetch 코드만 변경하면 정상 작동할 수 있도록 하는 방법이 있습니다.

 

예시) fetch를 직접 사용하지 않고 request라는 함수를 만들어 사용했습니다.

export const request = async <T>(url: string): Promise<T> => {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error('정보를 불러올 수 없습니다.');
  }

  return response.json();
};

 

2. 테스트 코드 프레임워크인 Jest에서 모킹을 최소화하기 ( 변화에 쉽게 흔들리지 않는 코드 작성하기 )

 

Jest 라이브러리에서 Mocking을 사용하면 여러 함수들을 임의로 설정할 수 있습니다. 이렇게 Mocking을 사용하여 몇백 개의 테스트 코드를 만들었을 때. Jest의 치명적인 결함이 발견되어 Mocha로 변경해야 한다면 Mocking을 적극적으로 사용했기 때문에 테스트 코드 변경이 어렵다고 하거나 일일이 수백 개의 테스트 코드를 수정해야 합니다.

 

예시) 최하단에서 await을 사용하기 때문에 그 함수를 포함하는 모든 함수가 async / await을 사용하게 되어버린 상황에서 제어할 수 있는 코드를 골라내어 리팩터링 한 예시

 

 

도움받은 자료

우아한테크코스 코치 크론의 수업 자료

 

[우아한테크세미나] 테크 리더 3인이 말하는 "개발자 원칙" - 이동욱 님