Blog

도입 – 학습 목표 및 필요성

현대 JavaScript 개발에서 비동기 프로그래밍은 필수입니다. Promise와 async/await 실전 활용법을 제대로 이해하면 API 호출, 파일 처리, 데이터베이스 연동 등 실무에서 마주치는 비동기 작업을 효율적으로 처리할 수 있습니다. 콜백 지옥(Callback Hell)에서 벗어나 가독성 높고 유지보수가 쉬운 코드를 작성하는 것이 이 튜토리얼의 목표입니다. 이 가이드를 통해 Promise의 기본 원리부터 async/await를 활용한 실전 패턴까지 단계별로 학습하여, 실무에 바로 적용할 수 있는 역량을 키우게 될 것입니다.

기본 개념 설명

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가집니다: Pending(대기), Fulfilled(이행), Rejected(거부). Promise를 생성할 때는 resolve와 reject 콜백을 받는 executor 함수를 전달합니다.

async/await는 ES2017에 도입된 문법으로, Promise를 더 동기적인 코드처럼 작성할 수 있게 해줍니다. async 키워드를 함수 앞에 붙이면 해당 함수는 자동으로 Promise를 반환하며, await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지합니다. 이를 통해 .then() 체이닝보다 훨씬 읽기 쉬운 코드를 작성할 수 있습니다. try-catch 블록과 함께 사용하면 에러 처리도 직관적으로 할 수 있어, 복잡한 비동기 로직을 다룰 때 특히 유용합니다.

단계별 구현 가이드

1단계: Promise 기본 생성과 사용

먼저 Promise의 기본 구조를 이해해야 합니다. Promise는 new Promise() 생성자로 만들며, 비동기 작업이 성공하면 resolve를, 실패하면 reject를 호출합니다. 예를 들어 서버에서 데이터를 가져오는 상황을 시뮬레이션해봅시다.

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: '홍길동', email: '[email protected]' });
      } else {
        reject(new Error('유효하지 않은 사용자 ID입니다'));
      }
    }, 1000);
  });
}

// Promise 사용
fetchUserData(1)
  .then(user => console.log('사용자 정보:', user))
  .catch(error => console.error('에러:', error.message));

2단계: Promise 체이닝

여러 비동기 작업을 순차적으로 실행해야 할 때 Promise 체이닝을 사용합니다. 각 .then()은 새로운 Promise를 반환하므로 연속적으로 연결할 수 있습니다.

fetchUserData(1)
  .then(user => {
    console.log('1. 사용자 조회:', user.name);
    return fetchUserPosts(user.id); // 다음 Promise 반환
  })
  .then(posts => {
    console.log('2. 게시글 조회:', posts.length, '개');
    return fetchComments(posts[0].id);
  })
  .then(comments => {
    console.log('3. 댓글 조회:', comments);
  })
  .catch(error => {
    console.error('처리 중 에러 발생:', error);
  });

3단계: async/await로 전환

Promise와 async/await 실전 활용법의 핵심은 복잡한 Promise 체인을 간결한 async/await 코드로 변환하는 것입니다. 위의 체이닝 코드를 async/await로 재작성하면 훨씬 읽기 쉬워집니다.

async function getUserContent() {
  try {
    const user = await fetchUserData(1);
    console.log('1. 사용자 조회:', user.name);
    
    const posts = await fetchUserPosts(user.id);
    console.log('2. 게시글 조회:', posts.length, '개');
    
    const comments = await fetchComments(posts[0].id);
    console.log('3. 댓글 조회:', comments);
    
    return { user, posts, comments };
  } catch (error) {
    console.error('처리 중 에러 발생:', error);
    throw error;
  }
}

getUserContent();

4단계: 병렬 처리 최적화

독립적인 비동기 작업들은 Promise.all()을 사용해 병렬로 처리하여 성능을 향상시킬 수 있습니다.

async function fetchMultipleUsers() {
  try {
    const [user1, user2, user3] = await Promise.all([
      fetchUserData(1),
      fetchUserData(2),
      fetchUserData(3)
    ]);
    
    console.log('모든 사용자 조회 완료:', user1, user2, user3);
    return [user1, user2, user3];
  } catch (error) {
    console.error('사용자 조회 실패:', error);
  }
}

실제 코드 예제와 설명

실무에서 자주 사용되는 API 호출 시나리오를 구현해봅시다. 여러 API를 조합하고 에러를 적절히 처리하는 완전한 예제입니다.

// 실전 예제: 대시보드 데이터 로딩
class DashboardService {
  async loadDashboard(userId) {
    try {
      // 1. 필수 데이터는 병렬로 로딩
      const [userProfile, userStats] = await Promise.all([
        this.fetchProfile(userId),
        this.fetchStats(userId)
      ]);

      // 2. 프로필 정보를 기반으로 추가 데이터 로딩
      const notifications = await this.fetchNotifications(
        userProfile.email
      );

      // 3. 선택적 데이터는 Promise.allSettled 사용
      const [recentActivity, recommendations] = await Promise.allSettled([
        this.fetchRecentActivity(userId),
        this.fetchRecommendations(userId)
      ]);

      return {
        profile: userProfile,
        stats: userStats,
        notifications,
        activity: recentActivity.status === 'fulfilled' 
          ? recentActivity.value : [],
        recommendations: recommendations.status === 'fulfilled'
          ? recommendations.value : []
      };
    } catch (error) {
      console.error('대시보드 로딩 실패:', error);
      throw new Error('대시보드를 불러올 수 없습니다');
    }
  }

  async fetchProfile(userId) {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('프로필 조회 실패');
    return response.json();
  }

  async fetchStats(userId) {
    const response = await fetch(`/api/users/${userId}/stats`);
    if (!response.ok) throw new Error('통계 조회 실패');
    return response.json();
  }

  async fetchNotifications(email) {
    const response = await fetch(`/api/notifications?email=${email}`);
    if (!response.ok) throw new Error('알림 조회 실패');
    return response.json();
  }

  async fetchRecentActivity(userId) {
    const response = await fetch(`/api/users/${userId}/activity`);
    if (!response.ok) throw new Error('활동 조회 실패');
    return response.json();
  }

  async fetchRecommendations(userId) {
    const response = await fetch(`/api/users/${userId}/recommendations`);
    if (!response.ok) throw new Error('추천 조회 실패');
    return response.json();
  }
}

// 사용 예시
const dashboard = new DashboardService();
dashboard.loadDashboard(123)
  .then(data => console.log('대시보드 데이터:', data))
  .catch(error => console.error(error));

고급 활용 방법

Promise와 async/await 실전 활용법을 마스터하려면 고급 패턴도 알아야 합니다. 재시도 로직은 네트워크 불안정 시 유용합니다.

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (response.ok) return await response.json();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

타임아웃 처리도 중요합니다. Promise.race()를 활용하여 시간 제한을 구현할 수 있습니다.

async function fetchWithTimeout(url, timeout = 5000) {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('요청 시간 초과')), timeout);
  });
  
  const fetchPromise = fetch(url).then(res => res.json());
  
  return Promise.race([fetchPromise, timeoutPromise]);
}

순차 처리가 필요할 때는 reduce나 for…of를 활용합니다.

async function processSequentially(items) {
  const results = [];
  for (const item of items) {
    const result = await processItem(item);
    results.push(result);
  }
  return results;
}

마무리 및 추가 학습 자료

이 튜토리얼을 통해 Promise와 async/await 실전 활용법의 핵심 개념과 실전 패턴을 배웠습니다. Promise 기본부터 async/await 변환, 병렬 처리, 에러 핸들링, 재시도 로직까지 실무에서 바로 활용할 수 있는 기술들을 습득했습니다. 다음 단계로는 MDN Web Docs의 Promise 공식 문서, JavaScript.info의 비동기 프로그래밍 챕터, 그리고 실제 프로젝트에 적용해보는 것을 추천합니다. 꾸준한 연습으로 비동기 프로그래밍 마스터가 되어보세요!