async/await를 활용한 JavaScript 비동기 프로그래밍

비동기 프로그래밍은 웹 개발에서 중요한 부분입니다. JavaScript에서 async와 await를 사용하면 복잡한 비동기 코드를 쉽고 깔끔하게 작성할 수 있습니다. 이 글에서는 async와 await의 기본적인 사용 방법과 예제를 통해 이해를 돕고자 합니다.

async와 await란 무엇인가요?

async와 await는 JavaScript에서 비동기 작업을 더 쉽게 처리할 수 있도록 도와주는 키워드입니다. async를 함수 앞에 붙이면 해당 함수는 항상 프로미스(Promise)를 반환합니다. await는 async 함수 안에서만 사용할 수 있으며, 프로미스의 결과를 기다린 후 다음 코드를 실행합니다.

기본 사용법

async 함수 만들기

async 함수는 다음과 같이 만들 수 있습니다:

async function fetchData() {
  // 비동기 작업을 수행합니다.
}

await로 프로미스 기다리기

await 키워드를 사용하여 프로미스가 완료될 때까지 기다릴 수 있습니다:

async function fetchData() {
  let data = await fetch('https://example.com/data');
  console.log(data);
}

예제: 사용자 데이터 가져오기

다음 예제에서는 fetch API를 사용하여 웹에서 사용자 데이터를 가져오는 방법을 보여줍니다:

async function getUserData(userId) {
  try {
    // 사용자 데이터를 가져옵니다.
    let response = await fetch(`https://api.example.com/users/${userId}`);
    let data = await response.json();
    
    // 데이터를 콘솔에 출력합니다.
    console.log(data);
  } catch (error) {
    // 오류가 발생하면 여기서 처리합니다.
    console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
  }
}

// 함수를 호출합니다.
getUserData(1);

이 코드는 fetch를 사용하여 사용자 데이터를 비동기적으로 가져옵니다. await를 사용하여 프로미스가 완료될 때까지 기다린 후, 결과 데이터를 콘솔에 출력합니다. 만약 오류가 발생하면 catch 블록에서 처리합니다.

정리

async와 await를 사용하면 JavaScript에서 비동기 코드를 작성하는 것이 훨씬 쉬워집니다. 복잡한 프로미스 체인을 사용하는 대신, 동기 코드와 유사한 방식으로 비동기 코드를 작성할 수 있어 코드의 가독성이 크게 향상됩니다.

이 기술을 활용하여 웹 개발 프로젝트에서 비동기 작업을 더욱 쉽게 관리해보세요.