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

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

현대 JavaScript 개발에서 Promise와 async/await 실전 활용법은 필수적인 기술입니다. 비동기 프로그래밍은 API 호출, 파일 처리, 데이터베이스 작업 등 실무에서 매일 마주하는 상황이며, 이를 효과적으로 다루지 못하면 콜백 지옥(callback hell)에 빠지거나 코드 가독성이 크게 떨어집니다. 이 튜토리얼을 통해 Promise의 기본 원리부터 async/await를 활용한 실전 패턴까지 체계적으로 학습하여, 깔끔하고 유지보수가 쉬운 비동기 코드를 작성할 수 있게 됩니다. 실무에서 바로 적용 가능한 예제와 함께 에러 처리, 병렬 처리, 순차 처리 등 다양한 시나리오를 다룹니다.

2. 기본 개념 설명

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

async/await는 Promise를 더 쉽게 사용할 수 있게 해주는 문법적 설탕(syntactic sugar)입니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환하고, await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지합니다. 이를 통해 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 크게 향상됩니다. then() 체이닝보다 훨씬 직관적이며, try-catch 블록으로 에러 처리도 간편합니다. 특히 여러 비동기 작업을 순차적으로 처리할 때 코드가 깔끔해지는 장점이 있습니다.

3. 단계별 구현 가이드

Step 1: 기본 Promise 생성하기

Promise를 생성하는 가장 기본적인 방법부터 시작합니다. new Promise() 생성자를 사용하여 비동기 작업을 감싸고, 작업이 성공하면 resolve()를, 실패하면 reject()를 호출합니다.

const simplePromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('작업 완료!');
    } else {
      reject('작업 실패!');
    }
  }, 1000);
});

Step 2: then/catch로 Promise 처리하기

생성한 Promise는 then()과 catch() 메서드로 처리합니다. then()은 성공 시, catch()는 실패 시 실행됩니다. finally()는 성공/실패 여부와 관계없이 항상 실행됩니다.

simplePromise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('작업 종료'));

Step 3: async/await로 전환하기

이제 같은 로직을 async/await로 변환합니다. 함수 앞에 async를 붙이고, Promise 앞에 await를 붙이면 됩니다. 에러 처리는 try-catch 블록을 사용합니다.

async function executePromise() {
  try {
    const result = await simplePromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  } finally {
    console.log('작업 종료');
  }
}

Step 4: 여러 Promise 병렬 처리하기

Promise.all()을 사용하면 여러 비동기 작업을 동시에 실행하고 모두 완료될 때까지 기다립니다. 하나라도 실패하면 전체가 실패합니다. Promise.allSettled()는 성공/실패 여부와 관계없이 모든 결과를 반환합니다.

async function parallelExecution() {
  const promise1 = fetch('/api/user');
  const promise2 = fetch('/api/posts');
  const promise3 = fetch('/api/comments');
  
  try {
    const [user, posts, comments] = await Promise.all([
      promise1,
      promise2,
      promise3
    ]);
    console.log('모든 데이터 로드 완료');
  } catch (error) {
    console.error('하나 이상의 요청 실패:', error);
  }
}

Step 5: 순차 처리와 에러 핸들링

각 작업이 이전 작업의 결과에 의존할 때는 순차적으로 처리해야 합니다. await를 순서대로 사용하면 됩니다.

async function sequentialExecution() {
  try {
    const user = await fetchUser();
    const profile = await fetchProfile(user.id);
    const posts = await fetchPosts(profile.id);
    return { user, profile, posts };
  } catch (error) {
    console.error('순차 처리 중 에러:', error);
    throw error;
  }
}

4. 실제 코드 예제와 설명

Promise와 async/await 실전 활용법의 실무 예제로 사용자 데이터를 가져오고 가공하는 전체 플로우를 구현해보겠습니다.

// API 호출 함수들
const fetchUserData = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId) {
        resolve({ id: userId, name: 'John Doe', email: '[email protected]' });
      } else {
        reject(new Error('User ID is required'));
      }
    }, 1000);
  });
};

const fetchUserPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, title: 'First Post', userId },
        { id: 2, title: 'Second Post', userId }
      ]);
    }, 800);
  });
};

// 실전 활용: 사용자 대시보드 데이터 로드
async function loadUserDashboard(userId) {
  try {
    console.log('대시보드 로딩 시작...');
    
    // 병렬로 데이터 가져오기
    const [userData, userPosts] = await Promise.all([
      fetchUserData(userId),
      fetchUserPosts(userId)
    ]);
    
    // 데이터 가공
    const dashboard = {
      user: userData,
      posts: userPosts,
      postCount: userPosts.length,
      lastUpdated: new Date().toISOString()
    };
    
    console.log('대시보드 로드 완료:', dashboard);
    return dashboard;
  } catch (error) {
    console.error('대시보드 로드 실패:', error.message);
    // 에러를 상위로 전파하거나 기본값 반환
    return { user: null, posts: [], postCount: 0, error: error.message };
  }
}

// 실행
loadUserDashboard(123).then(dashboard => {
  console.log('최종 결과:', dashboard);
});

이 예제는 실무에서 자주 사용되는 패턴입니다. Promise.all()로 독립적인 API 호출을 병렬로 처리하여 성능을 최적화하고, try-catch로 에러를 안전하게 처리하며, 에러 발생 시에도 기본값을 반환하여 애플리케이션이 중단되지 않도록 합니다.

5. 고급 활용 방법

재시도 로직 구현

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

타임아웃 설정

function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), ms)
  );
  return Promise.race([promise, timeout]);
}

async function fetchDataWithTimeout() {
  try {
    const data = await withTimeout(fetch('/api/data'), 5000);
    return data;
  } catch (error) {
    console.error('요청 시간 초과:', error);
  }
}

Promise 체이닝 최적화

여러 비동기 작업을 체인으로 연결할 때는 불필요한 중첩을 피하고, 각 단계에서 명확한 값을 반환합니다. Promise와 async/await 실전 활용법을 마스터하면 이러한 복잡한 시나리오도 쉽게 처리할 수 있습니다.

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

이 튜토리얼에서 다룬 Promise와 async/await 실전 활용법을 통해 비동기 JavaScript 프로그래밍의 핵심을 이해하셨을 것입니다. 실무에서는 이러한 패턴들을 조합하여 복잡한 비동기 플로우를 구현하게 됩니다. 추가 학습을 위해 MDN Web Docs의 Promise 공식 문서와 JavaScript.info의 비동기 프로그래밍 섹션을 참고하시기 바랍니다. 또한 실제 프로젝트에 적용해보면서 다양한 에러 케이스를 경험하고, Promise.race(), Promise.any() 등 다른 유틸리티 메서드들도 학습해보세요. 계속 연습하고 실험하다 보면 비동기 프로그래밍이 자연스러워질 것입니다.