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

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

현대 JavaScript 개발에서 비동기 처리는 필수 기술입니다. 이 가이드에서는 Promise와 async/await 실전 활용법을 단계별로 배우며, 실제 프로젝트에서 바로 사용할 수 있는 실용적인 패턴들을 익히게 됩니다. API 호출, 파일 처리, 데이터베이스 쿼리 등 실무에서 마주하는 비동기 작업을 효율적으로 다루는 방법을 학습합니다.

비동기 프로그래밍을 제대로 이해하지 못하면 콜백 지옥에 빠지거나, 예측 불가능한 버그를 만들게 됩니다. Promise와 async/await를 마스터하면 코드의 가독성이 향상되고, 에러 처리가 명확해지며, 유지보수가 쉬워집니다. 이 튜토리얼을 통해 실전에서 즉시 활용 가능한 비동기 처리 능력을 갖추게 될 것입니다.

2. 기본 개념 설명

Promise란?

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 세 가지 상태를 가집니다:

• Pending(대기): 초기 상태, 아직 완료되지 않음
• Fulfilled(이행): 작업이 성공적으로 완료됨
• Rejected(거부): 작업이 실패함

Promise는 then(), catch(), finally() 메서드를 통해 결과를 처리합니다.

async/await란?

async/await는 Promise를 더 간결하고 동기 코드처럼 작성할 수 있게 해주는 ES2017 문법입니다. async 키워드는 함수가 Promise를 반환하도록 만들고, await는 Promise가 처리될 때까지 기다립니다. 이를 통해 복잡한 비동기 로직을 직관적으로 표현할 수 있으며, try/catch를 사용한 에러 처리가 가능합니다.

3. 단계별 구현 가이드

Step 1: 기본 Promise 생성하기

Promise는 실행 함수(executor)를 인자로 받아 생성합니다. 실행 함수는 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));

Step 2: Promise 체이닝

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

fetch('https://api.example.com/user/1')
  .then(response => response.json())
  .then(user => {
    console.log('사용자:', user);
    return fetch(`https://api.example.com/posts?userId=${user.id}`);
  })
  .then(response => response.json())
  .then(posts => console.log('게시글:', posts))
  .catch(error => console.error('에러 발생:', error));

Step 3: async/await로 전환하기

위의 Promise 체이닝을 async/await로 변환하면 가독성이 크게 향상됩니다.

async function getUserPosts() {
  try {
    const userResponse = await fetch('https://api.example.com/user/1');
    const user = await userResponse.json();
    console.log('사용자:', user);
    
    const postsResponse = await fetch(`https://api.example.com/posts?userId=${user.id}`);
    const posts = await postsResponse.json();
    console.log('게시글:', posts);
    
    return posts;
  } catch (error) {
    console.error('에러 발생:', error);
    throw error;
  }
}

getUserPosts();

Step 4: 병렬 처리하기

독립적인 여러 비동기 작업을 동시에 실행하려면 Promise.all()을 사용합니다.

async function fetchMultipleUsers() {
  try {
    const [user1, user2, user3] = await Promise.all([
      fetch('https://api.example.com/user/1').then(r => r.json()),
      fetch('https://api.example.com/user/2').then(r => r.json()),
      fetch('https://api.example.com/user/3').then(r => r.json())
    ]);
    
    console.log('모든 사용자:', { user1, user2, user3 });
    return { user1, user2, user3 };
  } catch (error) {
    console.error('사용자 조회 실패:', error);
  }
}

Step 5: 에러 처리 패턴

실전에서는 세밀한 에러 처리가 중요합니다. 다양한 에러 상황을 구분하여 처리하세요.

async function robustFetch(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP 에러! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'TypeError') {
      console.error('네트워크 에러:', error.message);
    } else {
      console.error('기타 에러:', error.message);
    }
    throw error;
  }
}

4. 실제 코드 예제와 설명

실전 예제: 사용자 데이터 가져오기 및 가공

실무에서 자주 사용하는 패턴으로, API에서 데이터를 가져와 가공하는 완전한 예제입니다.

// 재사용 가능한 API 클라이언트
class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }
  
  async get(endpoint) {
    try {
      const response = await fetch(`${this.baseURL}${endpoint}`);
      
      if (!response.ok) {
        throw new Error(`API 에러: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error('API 요청 실패:', error);
      throw error;
    }
  }
}

// 사용 예시
const api = new ApiClient('https://jsonplaceholder.typicode.com');

async function getUserData(userId) {
  try {
    // 병렬로 사용자 정보와 게시글 가져오기
    const [user, posts] = await Promise.all([
      api.get(`/users/${userId}`),
      api.get(`/posts?userId=${userId}`)
    ]);
    
    // 데이터 가공
    const userData = {
      ...user,
      postCount: posts.length,
      posts: posts.slice(0, 5) // 최근 5개만
    };
    
    console.log('완성된 사용자 데이터:', userData);
    return userData;
  } catch (error) {
    console.error('사용자 데이터 조회 실패:', error);
    return null;
  }
}

// 실행
getUserData(1).then(data => {
  if (data) {
    console.log(`${data.name}님은 총 ${data.postCount}개의 게시글을 작성했습니다.`);
  }
});

타임아웃 처리 예제

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('타임아웃')), timeout)
    )
  ]);
}

async function safefetch(url) {
  try {
    const response = await fetchWithTimeout(url, 3000);
    return await response.json();
  } catch (error) {
    console.error('요청 실패:', error.message);
    return null;
  }
}

5. 고급 활용 방법

Promise.allSettled – 모든 결과 확인

Promise.all()과 달리, 일부가 실패해도 모든 결과를 받을 수 있습니다.

async function fetchAllUsers(userIds) {
  const promises = userIds.map(id => 
    fetch(`https://api.example.com/user/${id}`)
      .then(r => r.json())
  );
  
  const results = await Promise.allSettled(promises);
  
  const successful = results
    .filter(r => r.status === 'fulfilled')
    .map(r => r.value);
    
  const failed = results
    .filter(r => r.status === 'rejected')
    .map(r => r.reason);
    
  console.log(`성공: ${successful.length}, 실패: ${failed.length}`);
  return successful;
}

순차 실행 패턴

배열의 각 항목을 순차적으로 처리해야 할 때 사용합니다.

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

// 또는 reduce 사용
async function processWithReduce(items) {
  return items.reduce(async (promiseChain, item) => {
    const results = await promiseChain;
    const result = await processItem(item);
    return [...results, result];
  }, Promise.resolve([]));
}

재시도 로직 구현

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

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

이 가이드를 통해 Promise와 async/await 실전 활용법의 핵심을 배웠습니다. 비동기 프로그래밍은 연습이 중요하므로, 실제 프로젝트에 적용하며 익숙해지세요. Promise 체이닝보다 async/await를 우선 사용하고, 병렬 처리가 가능한 곳에서는 Promise.all()을 활용하세요.

추가 학습 권장사항:

• MDN Web Docs – Promise와 async/await 공식 문서
• JavaScript.info – 비동기 프로그래밍 심화 학습
• 실제 프로젝트에서 API 통합 연습
• 에러 처리 패턴 및 로깅 전략 학습

꾸준히 연습하면 복잡한 비동기 로직도 자신있게 다룰 수 있게 됩니다. 이제 여러분의 프로젝트에 Promise와 async/await 실전 활용법을 적용해보세요!