211004(월) - 서비스 API 관련 부분 리팩토링

목차

• 서비스 API 관련 부분 리팩토링
  • 문제의식
  • 목표
  • 기준
  • 리팩토링 진행
  • 결과

서비스 API 관련 부분 리팩토링

문제의식

후기 글을 작성하는 함수를 예시로, 코드를 추가하거나, 코드에 문제가 발생했을 때, 총 3개의 파일(함수가 사용되는 컴포넌트 파일, service/index.js, requests.js)을 확인해야 하는 번거로움이 있었기 때문에 그 과정을 줄이고 싶었다. 또한, service/index.js에 있는 함수들은 두 번째 사진과 같이 동일한 형태가 반복되고 있었고, 디렉터리 구조를 봤을 때 마지막 사진처럼 서비스 관련 로직들이 분산되어 있어 리팩토링이 필요했다.

목표

이번 리팩토링의 목표도 지난 리팩토링과 동일하게 '새로운 개발자가 쉽게 이해할 수 있는 코드'였다.

기준

이번 리팩토링을 하면서, end point와 header가 있는 부분은 추상화를 하지 않기로 결정했다. 이 부분도 service/index.js에 있는 함수들처럼 비슷한 형태가 반복되지만, 그 형태들이 완벽히 동일하지 않아 생각보다 많은 분기가 필요했고 end point와 header를 명시적으로 나타내는 편이 새로운 개발자가 더 쉽게 이해할 수 있는 코드라고 생각했다.

리팩토링 진행

기존에 service/index.js 파일에 있는 함수들을 추상화하여 customRequest.js 파일을 만들었다. 네이밍은 request를 고려했는데, FetchAPI에 Request 인터페이스가 존재하여 customRequest로 정했다. requests.js 파일 안에 있는 함수들은 기존의 prefix인 request-를 fetch-로 변경하면서, 우리 도메인 안에서도 사용되는 세부적인 부분에 따라 review.js, comment.js, statistics.js, auth.js, myInfo.js, like,js로 구분하여 분리했다.

결과

서비스 API와 관련된 파일은 기존과 동일하게 같이 총 3개의 파일(함수가 사용되는 컴포넌트 파일, service/customRequest.js, service/fetch/review.js이지만, customRequest.js 파일은 공통이므로 코드를 추가하거나, 코드에 문제가 발생했을 때 나머지 두 개의 파일만 확인하면 된다. 또한, customRequest.js 파일로 반복되던 코드들을 줄였고, 디렉터리 구조도 도메인의 세부적인 부분을 나눠 찾기 쉽게 변경했다.