📉 Cascading Network Requests (Waterfall Model): 느린 로딩과 사용자 경험 저하

Why Wrong?

How to Fix?

// Before: Waterfall Requests (순차적 요청) - 불필요한 지연 발생
async function fetchUserProfileAndPostsSequential(userId) {
  try {
    console.log('--- 순차적 요청 시작 ---');
    // 1. 사용자 프로필 정보 요청
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
    console.log('User Profile fetched:', user.name);

    // 2. 사용자 프로필이 로드된 후 해당 사용자의 게시물 요청 (프로필 데이터에 의존하지 않아도 됨)
    const postsResponse = await fetch(`/api/users/${userId}/posts`);
    const posts = await postsResponse.json();
    console.log('User Posts fetched:', posts.length, 'posts');

    // 3. 사용자 게시물이 로드된 후 각 게시물의 댓글 수 요청 (여기서 또 다른 잠재적 N+1 문제 발생 가능)
    const commentsCounts = {};
    for (const post of posts) {
      const commentsResponse = await fetch(`/api/posts/${post.id}/comments/count`);
      const countData = await commentsResponse.json();
      commentsCounts[post.id] = countData.count;
      console.log(`Comments for post ${post.id}:`, countData.count);
    }

    console.log('--- 순차적 요청 완료 ---');
    return { user, posts, commentsCounts };
  } catch (error) {
    console.error('Error fetching data sequentially:', error);
    throw error;
  }
}

// 가상의 API 호출 지연 시뮬레이션 (각 100ms)
// fetch 함수를 래핑하여 지연을 추가하는 예시
const originalFetch = global.fetch;
global.fetch = async (...args) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(originalFetch(...args));
    }, 100); // 각 fetch에 100ms 지연 추가
  });
};

// Example usage
// fetchUserProfileAndPostsSequential(123); // 총 300ms + (N * 100ms) 이상 소요

// After: Parallel Requests (병렬 요청) - 성능 최적화
async function fetchUserProfileAndPostsParallel(userId) {
  try {
    console.log('--- 병렬 요청 시작 ---');
    // 1. 사용자 프로필 정보와 게시물 정보를 동시에 요청 (서로 의존성 없는 경우)
    // Promise.all을 사용하여 동시에 여러 비동기 작업을 시작하고 모든 작업이 완료될 때까지 기다림
    const [userResponse, postsResponse] = await Promise.all([
      fetch(`/api/users/${userId}`),
      fetch(`/api/users/${userId}/posts`)
    ]);

    const user = await userResponse.json();
    const posts = await postsResponse.json();
    console.log('User Profile fetched:', user.name);
    console.log('User Posts fetched:', posts.length, 'posts');

    // 2. 모든 게시물의 댓글 수 요청을 병렬로 처리
    // N+1 문제를 해결하기 위해 백엔드에서 Aggregator API를 제공하거나,
    // 프론트엔드에서 Promise.all로 병렬 처리. 여기서는 후자의 예시.
    const commentsCountPromises = posts.map(post =>
      fetch(`/api/posts/${post.id}/comments/count`).then(res => res.json())
    );

    const commentsCountsArray = await Promise.all(commentsCountPromises);
    const commentsCounts = commentsCountsArray.reduce((acc, current, index) => {
      acc[posts[index].id] = current.count;
      return acc;
    }, {});
    console.log('All Comments Counts fetched:', Object.keys(commentsCounts).length);

    console.log('--- 병렬 요청 완료 ---');
    return { user, posts, commentsCounts };
  } catch (error) {
    console.error('Error fetching data in parallel:', error);
    throw error;
  }
}

// 가상의 API 호출 지연 시뮬레이션 (각 100ms)
// (위 Before 코드에서 이미 설정되었다고 가정)

// Example usage
// fetchUserProfileAndPostsParallel(123); // 총 100ms + (100ms * (N=1일때)) + ... 소요
// 즉, (가장 오래 걸리는 1단계 요청) + (가장 오래 걸리는 2단계 요청)만 소요

You Might Also Like