자바스크립트는 비동기적인 작업을 다루기 위해 callback 함수를 사용하여 오랫동안 개발되었습니다. 그러나 callback을 활용한 코드는 복잡하고 가독성이 낮은 경향이 있습니다. 이에 대한 대안으로 등장한 Promise는 코드의 가독성을 향상시켜주었지만 여전히 복잡한 구조를 가지고 있습니다.

async/await는 ES2017(ECMAScript 8)에 도입된 개념으로, 비동기 코드를 더 직관적이고 동기적으로 작성할 수 있게 해줍니다. 이를 이용하면 비동기 작업을 처리할 때 코드의 구조와 가독성을 향상시킬 수 있습니다.

async 함수

async 함수는 항상 Promise를 반환하는 함수입니다. 이 함수는 내부에서 비동기 작업을 처리하고 해당 작업이 완료될 때까지 기다린 다음 결과를 resolve하여 Promise를 반환합니다.

아래는 async 함수의 예시입니다.

async function fetchUserDetails(userId) {
  const userResponse = await fetch(`https://api.example.com/users/${userId}`);
  const user = await userResponse.json();
  return user;
}

// 사용 방법
fetchUserDetails(1)
  .then(user => console.log(user))
  .catch(error => console.error(error));

위의 예시에서 fetchUserDetails 함수는 Promise를 반환하는 async 함수입니다. 함수 내부에서 비동기 작업인 fetch를 이용하여 서버에서 사용자 정보를 가져옵니다. await 키워드를 이용하여 fetch 작업이 완료될 때까지 기다린 다음, 결과를 userResponse 변수에 할당합니다. json() 메서드를 이용하여 응답을 파싱하여 user 변수에 할당한 후, user를 반환합니다.

await 키워드

await 키워드는 async 함수 내부에서만 사용할 수 있습니다. await는 Promise가 완료될 때까지 함수의 실행을 일시 중단하고, Promise의 결과 값을 반환합니다. 이를 통해 비동기 작업의 완료를 기다리고, 그 결과를 변수에 할당하거나 다른 처리를 수행할 수 있습니다.

async function fetchUserDetails(userId) {
  const userResponse = await fetch(`https://api.example.com/users/${userId}`);
  const user = await userResponse.json();
  return user;
}

위의 예시에서 await 키워드는 fetch 메서드가 완료될 때까지 함수의 실행을 중단합니다. 이후 서버로부터 가져온 응답을 파싱하여 user에 할당하고, 이를 반환합니다.

오류 처리

async/await를 사용하여 비동기 작업을 처리할 때는 오류 처리를 위해 try-catch 구문을 사용할 수 있습니다. async 함수 내부에서 오류가 발생하면 catch 구문으로 예외를 처리할 수 있습니다.

아래는 오류 처리 예시입니다.

async function fetchUserDetails(userId) {
  try {
    const userResponse = await fetch(`https://api.example.com/users/${userId}`);
    const user = await userResponse.json();
    return user;
  } catch (error) {
    console.error("Error fetching user details:", error);
    throw error;
  }
}

위의 예시에서 try 블록 내부에서 비동기 작업을 수행하고, 오류가 발생하면 catch 블록으로 예외를 처리합니다. 이를 통해 오류가 발생했을 때 적절히 예외 처리를 할 수 있습니다.

결론

async/await는 자바스크립트에서 비동기 작업을 처리하기 위한 강력한 패턴입니다. 이를 사용하면 코드의 가독성을 향상시키고, 비동기 작업의 결괏값을 간편하게 다룰 수 있습니다. 프론트엔드 개발에서 자주 사용되는 비동기 작업에 async/await를 적용하여 생산성을 높이고 더 효율적인 코드를 작성할 수 있습니다.