Promise와 async/await 실전 활용법 – 초보자도 쉽게 따라하는 완벽 가이드

1. 도입 – 학습 목표 및 필요성

이 튜토리얼에서는 Promise와 async/await 실전 활용법을 체계적으로 학습합니다. 현대 JavaScript 개발에서 비동기 처리는 필수적인 기술입니다. API 호출, 파일 읽기, 데이터베이스 쿼리 등 실무에서 마주치는 대부분의 작업이 비동기로 이루어지기 때문입니다. 콜백 지옥(Callback Hell)에서 벗어나 깔끔하고 읽기 쉬운 코드를 작성하는 방법을 배우게 될 것입니다. Promise의 기본 원리부터 async/await의 고급 패턴까지, 실무에서 바로 적용할 수 있는 실전 예제와 함께 단계별로 마스터해보겠습니다. 이 가이드를 마치면 비동기 JavaScript 코드를 자신있게 작성하고 디버깅할 수 있게 됩니다.

2. 기본 개념 설명

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가집니다: pending(대기), fulfilled(이행), rejected(거부). Promise 객체는 then(), catch(), finally() 메서드를 통해 결과를 처리합니다.

async/await는 Promise를 더 쉽게 사용할 수 있도록 ES2017에서 도입된 문법입니다. async 키워드를 함수 앞에 붙이면 해당 함수는 자동으로 Promise를 반환합니다. await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지하고, Promise가 resolve되면 결과값을 반환합니다. 이를 통해 비동기 코드를 동기 코드처럼 직관적으로 작성할 수 있습니다. async/await는 에러 처리를 위해 try-catch 블록을 사용하며, 여러 비동기 작업을 순차적으로 또는 병렬로 실행할 수 있는 유연성을 제공합니다.

3. 단계별 구현 가이드

3.1 Promise 기본 생성과 사용

첫 번째 단계는 Promise 객체를 생성하는 방법을 이해하는 것입니다. Promise 생성자는 executor 함수를 받으며, 이 함수는 resolve와 reject 두 개의 콜백 함수를 매개변수로 받습니다. 작업이 성공하면 resolve를 호출하고, 실패하면 reject를 호출합니다.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('작업 성공!');
  } else {
    reject('작업 실패!');
  }
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

3.2 Promise 체이닝

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

function fetchUser(userId) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id: userId, name: '홍길동' }), 1000);
  });
}

function fetchPosts(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve([{ title: '첫 번째 글' }, { title: '두 번째 글' }]), 1000);
  });
}

fetchUser(1)
  .then(user => {
    console.log('사용자:', user);
    return fetchPosts(user);
  })
  .then(posts => {
    console.log('게시글:', posts);
  })
  .catch(error => console.error(error));

3.3 async/await로 전환하기

같은 로직을 async/await로 작성하면 훨씬 읽기 쉬워집니다. 함수를 async로 선언하고, Promise 앞에 await를 붙여 결과를 기다립니다.

async function getUserData() {
  try {
    const user = await fetchUser(1);
    console.log('사용자:', user);
    
    const posts = await fetchPosts(user);
    console.log('게시글:', posts);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

getUserData();

3.4 병렬 처리

여러 독립적인 비동기 작업을 동시에 실행하려면 Promise.all()을 사용합니다. 이는 모든 Promise가 완료될 때까지 기다렸다가 결과 배열을 반환합니다.

async function fetchAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('/api/users').then(r => r.json()),
      fetch('/api/posts').then(r => r.json()),
      fetch('/api/comments').then(r => r.json())
    ]);
    
    console.log('모든 데이터 로드 완료:', { users, posts, comments });
  } catch (error) {
    console.error('데이터 로드 실패:', error);
  }
}

4. 실제 코드 예제와 설명

실무에서 자주 사용하는 패턴인 API 데이터 페칭과 에러 처리를 구현해보겠습니다. 이 예제는 Promise와 async/await 실전 활용법의 핵심을 보여줍니다.

// API 호출 함수
async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    
    if (!response.ok) {
      throw new Error(`HTTP 에러! 상태: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('요청 시간 초과');
    }
    throw error;
  }
}

// 재시도 로직이 포함된 API 호출
async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const data = await fetchWithTimeout(url);
      return data;
    } catch (error) {
      console.log(`시도 ${i + 1} 실패:`, error.message);
      
      if (i === maxRetries - 1) {
        throw new Error(`${maxRetries}번 재시도 후 실패: ${error.message}`);
      }
      
      // 지수 백오프: 1초, 2초, 4초 대기
      await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
    }
  }
}

// 사용 예제
async function loadUserDashboard(userId) {
  try {
    const userData = await fetchWithRetry(`/api/users/${userId}`);
    console.log('사용자 정보 로드 완료:', userData);
    
    return userData;
  } catch (error) {
    console.error('대시보드 로드 실패:', error);
    throw error;
  }
}

5. 고급 활용 방법

Promise.race()는 여러 Promise 중 가장 먼저 완료되는 것의 결과를 반환합니다. 타임아웃 구현이나 여러 소스에서 데이터를 가져올 때 유용합니다.

async function fetchWithRaceTimeout(url, timeout = 3000) {
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('타임아웃')), timeout)
  );
  
  return Promise.race([
    fetch(url).then(r => r.json()),
    timeoutPromise
  ]);
}

Promise.allSettled()는 모든 Promise의 성공/실패 여부와 관계없이 모든 결과를 반환합니다. 여러 독립적인 작업을 수행할 때 일부 실패해도 나머지 결과를 활용할 수 있습니다.

async function fetchMultipleSources() {
  const results = await Promise.allSettled([
    fetch('/api/source1').then(r => r.json()),
    fetch('/api/source2').then(r => r.json()),
    fetch('/api/source3').then(r => r.json())
  ]);
  
  const successful = results
    .filter(r => r.status === 'fulfilled')
    .map(r => r.value);
    
  console.log('성공한 요청:', successful);
}

6. 마무리 및 추가 학습 자료

이 튜토리얼에서 Promise와 async/await 실전 활용법의 핵심 개념과 실전 패턴을 배웠습니다. 비동기 프로그래밍은 연습이 중요하므로 직접 다양한 예제를 만들어보세요. 추가 학습을 위해 MDN Web Docs의 Promise와 async/await 문서, JavaScript.info의 비동기 프로그래밍 섹션을 추천합니다. 또한 실제 프로젝트에서 API 통신, 파일 처리, 데이터베이스 작업 등에 적용해보면서 실력을 키워보세요. 에러 처리와 성능 최적화도 함께 고려하면 더욱 견고한 코드를 작성할 수 있습니다.