챔피언 로테이션 데이터 처리, Promise.all로 성능 향상

verdantgreeny·2025년 3월 18일

본캠프

목록 보기

54/56

문제 발생

챔피언 로테이션 정보와 챔피언 목록을 가져와서 매칭하는 기능을 구현하던 중 처음에는 순차적으로 비동기 요청을 처리했다. 즉, fetch("/api/rotation")으로 로테이션 정보를 먼저 가져오고, 그 다음에 fetchChampionList()로 챔피언 목록을 가져왔다.

순차적 처리는 문제 없이 동작했지만, 두 요청이 서로 개별적이고 의존성이 없었기 때문에 Promise.all로 병렬 처리를 하면 성능을 개선할 수 있겠다는 생각이 들었다.

원인 추론

성능 개선이전에 일단 Promise.all로 기존 코드를 바꾸더라도 기능 상에는 문제가 없을 것이라 생각했고 또한, 성능적으로도 순차적 처리가 병렬처리에 비해 두 요청이 완료되는 데 더 많은 시간이 소요될 것이라 추론했다. 예를 들어서 fetch("/api/rotation")이 1초 걸리고, fetchChampionList()가 2초 걸린다면, 총 3초가 소요된다. 하지만 Promise.all을 사용하면 두 요청을 동시에 실행할 수 있으므로, 더 빠르게 결과를 얻을 수 있을 것이라 생각해서 코드를 수정하게 되었다.

해결 방안

순차적 처리를 병렬 처리로 변경하기 위해 Promise.all을 사용해 코드를 수정했다. 그리고 성능적으로 진짜 차이가 있는지를 비교하기 위해 console.time()과 console.timeEnd()로 두개를 비교해 보기도 했다.

수정 전 코드

export const getChampionRotation = async (): Promise<Champion[]> => {
  try {
    console.time("순차적 처리");
    const rotationRes = await fetch("/api/rotation");
    const freeChampionIds = await rotationRes.json();
    const champions = await fetchChampionList();
    console.timeEnd("순차적 처리");
    // console.log("로테이션 데이타:", freeChampionIds);

    return freeChampionIds.map((id: number) => {
      const numId = id.toString();
      return champions.find((c) => c.key === numId);
    });
  } catch (error) {
    console.error(error);
    throw error;
  }
};

수정 후 코드 (Promise.all 사용)

export const getChampionRotation = async (): Promise<Champion[]> => {
  try {
    console.time("병렬 처리");
    const [rotationRes, champions] = await Promise.all([
      fetch("/api/rotation"),
      fetchChampionList(),
    ]);
    const freeChampionIds = await rotationRes.json();
    console.timeEnd("병렬 처리");
    // console.log("로테이션 데이타:", freeChampionIds);
    return freeChampionIds.map((id: number) => {
      const numId = id.toString();
      return champions.find((c) => c.key === numId);
    });
  } catch (error) {
    console.error(error);
    throw error;
  }
};