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

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

async/await란 무엇인가요?

async와 await는 JavaScript에서 비동기 작업을 더 쉽게 다룰 수 있도록 도와주는 키워드입니다. async 함수는 항상 프로미스(Promise)를 반환하며, await 키워드는 프로미스가 처리될 때까지 함수의 실행을 일시 중지하고, 프로미스의 결과를 반환합니다.

기본 사용법

async 함수 만들기

async 키워드를 함수 앞에 붙이면 해당 함수는 비동기 함수가 됩니다.

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

await 키워드 사용하기

await 키워드는 async 함수 내에서만 사용할 수 있습니다. 이를 통해 비동기 작업의 결과를 기다릴 수 있습니다.

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

예제: 비동기적으로 데이터 가져오기

웹 개발에서 API로부터 데이터를 가져오는 것은 일반적인 작업입니다. async와 await를 사용하면 이 과정을 간단하게 만들 수 있습니다.

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

// 함수를 호출하여 사용자 데이터를 가져옵니다.
getUserData(1);

이 예제에서는 fetch 함수를 사용하여 비동기적으로 데이터를 가져옵니다. await를 사용하면 fetch의 결과(프로미스)가 처리될 때까지 기다린 후, 다음 코드로 넘어갑니다. try...catch 구문을 사용하여 오류를 적절히 처리할 수 있습니다.

정리

async와 await를 사용하면 JavaScript에서 비동기 코드를 쉽게 작성하고 관리할 수 있습니다. 이 기능을 활용하면 코드의 가독성이 향상되고, 비동기 프로그래밍이 훨씬 간단해집니다. 위의 예제를 시작으로, 자신만의 프로젝트에 async와 await를 적용해 보세요.