자바스크립트 Async/Await 완벽 이해하기

async/await는 Promise를 기반으로 비동기 코드를 동기적 스타일로 작성할 수 있게 해줍니다.

Async 함수 기본

// async 함수는 항상 Promise를 반환합니다
async function fetchData() {
  return 'data';
}

fetchData(); // Promise {<pending>}

Await 사용하기

async function getUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('데이터 가져오기 실패:', error);
  }
}

병렬 처리

// 순차 처리 (느림)
const user = await fetchUser(1);
const posts = await fetchPosts(user.id);

// 병렬 처리 (빠름)
const [user, posts] = await Promise.all([
  fetchUser(1),
  fetchPosts(1)
]);

에러 처리 전략

• try/catch 블록 사용
• Promise.catch() 메서드 활용
• 에러 타입에 따른 처리 분기

성능 고려사항

1. 불필요한 await 제거
2. 병렬화 가능한 작업은 Promise.all() 사용
3. 타임아웃 설정으로 무한 대기 방지

async/await를 올바르게 사용하면 코드 가독성이 크게 향상됩니다.