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

JavaScript 개발에서 비동기 처리는 필수적인 기술입니다. 이 글에서는 Promise와 async/await 실전 활용법을 단계별로 학습하여, 실무에서 바로 적용할 수 있는 능력을 키우게 됩니다. API 호출, 파일 처리, 데이터베이스 작업 등 실제 프로젝트에서 자주 마주치는 비동기 상황을 효율적으로 처리하는 방법을 배우게 됩니다. 콜백 지옥에서 벗어나 깔끔하고 유지보수하기 쉬운 코드를 작성하는 것이 이 튜토리얼의 핵심 목표입니다. 초보자도 쉽게 따라할 수 있도록 기본부터 고급 기법까지 체계적으로 안내합니다.

2. 기본 개념 설명

Promise란?

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 세 가지 상태를 가집니다: pending(대기), fulfilled(이행), rejected(거부). Promise는 비동기 작업이 완료되면 then() 메서드로 결과를 받고, 에러가 발생하면 catch() 메서드로 처리합니다. 이를 통해 비동기 코드를 동기 코드처럼 읽기 쉽게 작성할 수 있습니다.

async/await란?

async/await는 Promise를 더 간결하게 사용할 수 있게 해주는 문법입니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다. await 키워드는 Promise가 처리될 때까지 기다린 후 결과를 반환합니다. 이를 통해 비동기 코드를 마치 동기 코드처럼 작성할 수 있어 가독성이 크게 향상됩니다. try-catch 문을 사용하여 에러 처리도 직관적으로 할 수 있습니다.

3. 단계별 구현 가이드

Step 1: 기본 Promise 생성하기

Promise 생성자는 executor 함수를 인자로 받습니다. executor 함수는 resolve와 reject 두 개의 콜백 함수를 매개변수로 받습니다. 작업이 성공하면 resolve를 호출하고, 실패하면 reject를 호출합니다.

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

Step 2: Promise 체이닝

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

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error('에러 발생:', error));

Step 3: async/await로 변환하기

Promise 체이닝을 async/await로 변환하면 코드가 더 읽기 쉬워집니다. await는 반드시 async 함수 내부에서만 사용할 수 있습니다.

async function getUserData() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    console.log(comments);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

Step 4: 병렬 처리하기

여러 비동기 작업이 서로 독립적일 때는 Promise.all()을 사용하여 병렬로 실행할 수 있습니다. 이는 순차 실행보다 훨씬 빠릅니다.

async function fetchAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetchUsers(),
      fetchPosts(),
      fetchComments()
    ]);
    return { users, posts, comments };
  } catch (error) {
    console.error('데이터 로딩 실패:', error);
  }
}

Step 5: 에러 처리 전략

실무에서는 다양한 에러 상황을 고려해야 합니다. try-catch를 사용하거나, Promise의 catch()를 활용하여 에러를 처리합니다. 각 비동기 작업마다 개별적으로 에러를 처리할 수도 있습니다.

4. 실제 코드 예제와 설명

실전 예제: API 데이터 가져오기

다음은 실제 프로젝트에서 자주 사용하는 패턴입니다. fetch API를 사용하여 서버에서 데이터를 가져오고 처리하는 완전한 예제입니다.

// API 호출 함수
async function fetchUserProfile(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP 에러! 상태: ${response.status}`);
    }
    
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('사용자 프로필 로딩 실패:', error);
    throw error;
  }
}

// 여러 사용자 데이터 동시에 가져오기
async function fetchMultipleUsers(userIds) {
  const promises = userIds.map(id => fetchUserProfile(id));
  
  try {
    const users = await Promise.all(promises);
    return users;
  } catch (error) {
    console.error('일부 사용자 데이터 로딩 실패:', error);
    return [];
  }
}

// 사용 예시
fetchMultipleUsers([1, 2, 3])
  .then(users => console.log('로딩된 사용자:', users));

이 예제는 에러 처리, 병렬 요청, 그리고 실패 시 빈 배열 반환 등 실무에서 필요한 모든 요소를 포함하고 있습니다.

5. 고급 활용 방법

Promise.race()로 타임아웃 구현

Promise.race()는 여러 Promise 중 가장 먼저 완료되는 것의 결과를 반환합니다. 이를 활용하여 타임아웃 기능을 구현할 수 있습니다.

function timeout(ms) {
  return new Promise((_, reject) => 
    setTimeout(() => reject(new Error('타임아웃')), ms)
  );
}

async function fetchWithTimeout(url, ms = 5000) {
  try {
    const response = await Promise.race([
      fetch(url),
      timeout(ms)
    ]);
    return await response.json();
  } catch (error) {
    console.error('요청 실패 또는 타임아웃:', error);
    throw error;
  }
}

재시도 로직 구현

네트워크 요청 실패 시 자동으로 재시도하는 패턴입니다.

async function retryFetch(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;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

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

이 튜토리얼에서 Promise와 async/await 실전 활용법의 핵심 개념부터 고급 기법까지 살펴보았습니다. 실무에서는 이러한 패턴들을 조합하여 복잡한 비동기 로직을 구현하게 됩니다. 더 깊은 학습을 위해서는 MDN Web Docs의 Promise와 async/await 문서를 참고하고, 실제 프로젝트에 적용해보며 경험을 쌓는 것이 중요합니다. JavaScript의 비동기 처리를 마스터하면 더 효율적이고 성능 좋은 웹 애플리케이션을 개발할 수 있습니다. 지금 바로 여러분의 프로젝트에 Promise와 async/await 실전 활용법을 적용해보세요!