트러블 슈팅: API 모듈화 - minumsa/carver-music GitHub Wiki

문제 상황

프로젝트가 커짐에 따라 API 호출 로직이 복잡해졌습니다. 다양한 데이터 유형과 요청 경로에 따라 각각 다른 API 호출을 구현해야 했고, 이로 인해 코드의 중복이 발생하고 관리가 어려워졌습니다. 각 API 호출 함수가 비슷한 에러 처리와 데이터 변환 로직을 반복적으로 포함하고 있어 유지보수와 확장성이 저해되었습니다.

해결 과정

코드의 중복을 줄이고 유지보수를 쉽게 하기 위해 API 호출 로직을 모듈화했습니다. 이를 통해 각 API 호출을 담당하는 함수가 명확한 역할을 수행하도록 했으며, 공통된 에러 처리와 데이터 변환 로직을 통합해 코드의 일관성과 재사용성을 높였습니다.

공통 에러 처리 및 데이터 변환 함수 정의

모든 API 호출 함수에서 공통으로 사용되는 에러 처리와 데이터 변환 로직을 별도의 함수로 분리했습니다. 이를 통해 각 API 함수는 데이터 요청과 처리에 집중할 수 있게 되었습니다.

// utils/apiUtils.ts

export async function handleApiResponse<T>(response: Response): Promise<T> {
  if (!response.ok) {
    const error = AlbumError.fromResponse(response);
    toast.error(error.message);
    throw error;
  }
  return response.json();
}

export function handleError(error: unknown): void {
  if (!(error instanceof AlbumError)) {
    const systemErrorMessage = "앨범 데이터 처리 중 시스템 오류가 발생했습니다.";
    toast.error(systemErrorMessage);
    throw new Error(systemErrorMessage);
  }
  throw error;
}

API 호출 함수 모듈화

각 데이터 유형에 맞는 API 호출 함수를 별도로 정의하고, 공통 로직은 위에서 정의한 유틸리티 함수를 사용하여 코드의 중복을 줄였습니다.

// api/albumApi.ts

import { handleApiResponse, handleError } from "./utils/apiUtils";

// 게시물 데이터 요청
export async function fetchPostData(activeId: string): Promise<AlbumData> {
  try {
    const url = `${BASE_URL}/api/post?albumId=${activeId}`;
    const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const postData = await handleApiResponse<AlbumData>(response);
    return postData;
  } catch (error) {
    handleError(error);
  }
}

배운 점

  • API 호출의 공통 로직을 모듈화하면 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있음을 배웠습니다.
  • 공통된 에러 처리와 데이터 변환 로직을 별도의 유틸리티 함수로 분리하여 코드의 일관성을 높였습니다.
  • 각 API 호출 함수가 명확한 역할을 갖게 되어, 기능 추가나 수정이 용이해졌습니다.
⚠️ **GitHub.com Fallback** ⚠️