자바스크립트 비동기 처리 async/await 이해하기

자바스크립트의 비동기 처리: async/await 소개

자바스크립트는 단일 스레드 기반의 언어로, 비동기적으로 처리를 해야 할 필요성이 자주 발생합니다. 이때 많은 개발자들이 경험하는 어려움이 바로 비동기 코드의 가독성과 관리입니다. 이러한 문제를 해결하기 위해 자바스크립트에서 도입된 문법이 바로 async/await입니다. 이 문법은 비동기 작업을 동기적으로 작성할 수 있도록 해주어, 보다 간결하고 이해하기 쉬운 코드를 작성할 수 있게 도와줍니다.

async와 await의 기본 개념

먼저, async 키워드는 비동기 함수를 선언하는 데 사용됩니다. async로 선언된 함수는 언제나 Promise 객체를 반환하는 특징을 가지고 있습니다. 예를 들어, 아래와 같은 방식으로 async 함수를 만드는 것이 가능합니다:

async function fetchData() {
 // 비동기 로직
}

위와 같은 함수를 호출하면, 결과적으로 Promise 객체가 반환됩니다. 만약 이 함수에서 반환하는 것이 Promise가 아닌 다른 값이라 하더라도, 이는 자동으로 Promise.resolve()를 통해 감싸져 Promise로 변환됩니다.

이와 더불어 await 키워드는 비동기 작업의 완료를 기다리는 데 사용됩니다. await는 반드시 async 함수 내부에서만 사용해야 하며, 이 키워드를 만나게 되면 해당 Promise가 해결될 때까지 코드의 실행이 일시 중지됩니다. 다음은 await의 사용 예시입니다:

async function getData() {
 const response = await fetch(url);
 // 데이터 요청 완료
}

에러 처리와 async/await

async/await의 또 다른 장점 중 하나는 에러 처리가 매우 간단하다는 것입니다. try…catch 문을 사용하여 동기적인 에러와 비동기적인 에러 모두를 처리할 수 있습니다. 예를 들어:

async function handleErrors(shouldThrow) {
 try {
  if (shouldThrow) throw new Error("Synchronous error");
  await someAsyncFunction();
 } catch (err) {
  console.error(Error encountered: ${err.message});
 }
}

await와 return의 차이점

async/await를 사용할 때, return 키워드와 await 키워드의 조합에 주의해야 합니다. 예를 들어, await 없이 Promise를 반환할 경우, 오류가 호출자의 범위로 이동하게 됩니다. 그러므로 로컬에서 에러를 처리하고 싶다면 await를 사용해야 합니다:

async function example() {
 return await somePromiseFunction(); // 로컬에서 처리
}

비동기 순차 실행의 안티패턴

요즘 많은 개발자들이 비동기 처리를 위해 Array.forEach()와 async/await를 함께 사용하려는 시도를 하고 있습니다. 하지만 이와 같은 방식은 의도한 대로 작동하지 않는 안티패턴이므로 주의해야 합니다. forEach는 비동기 함수를 기다려 주지 않기 때문에, 다음과 같은 코드는 예기치 않은 순서로 결과를 출력하게 될 것입니다:

const items = [1, 2, 3];
items.forEach(async item => {
 const result = await doSomethingAsync(item);
 console.log(result);
});

해결책으로는 for…of 루프를 사용하거나 Promise.all()을 활용하여 비동기 작업의 순서를 적절하게 조정할 수 있습니다. 예를 들면:

for (const item of items) {
 const result = await doSomethingAsync(item);
 console.log(result);
}

콜백 패턴에서 async/await로의 전환

비동기 작업을 처리하는 기존의 콜백 패턴은 종종 ‘콜백 지옥’이라고 불리며, 이는 코드의 가독성을 떨어뜨리고 유지보수를 힘들게 하는 원인이 됩니다. 이때 async/await를 사용하여 코드 구조를 보다 간결하게 만들 수 있습니다:

async function loginUser(id, password) {
 const user = await new Promise((resolve, reject) => {
  setTimeout(() => {
   if (id === "user" && password === "1234") {
    resolve("Login successful!");
   } else {
    reject("Login failed.");
   }
  }, 1000);
 });
 console.log(user);
}

결론

async/await는 자바스크립트의 비동기 처리를 한층 더 간편하고 직관적으로 만들어주는 문법입니다. 이를 통해 개발자들은 복잡한 비동기 로직을 보다 쉽게 다룰 수 있으며, 코드의 가독성 또한 크게 개선됩니다. 앞으로 자바스크립트 개발을 진행하시면서 async/await 문법을 활용하여 효율적이고 깔끔한 코드를 작성해보시길 권장합니다.

자주 찾는 질문 Q&A