자바스크립트에서 비동기적인 작업을 다루는데에는 두 가지 주요한 기법이 있다. 하나는 Promise를 이용하는 방법이고, 다른 하나는 async/await를 이용하는 방법이다. 이 두 가지 기법은 서로 관련이 있으며, 함께 사용하여 코드를 더욱 간결하고 가독성있게 작성할 수 있다.

Promise

Promise는 비동기적인 작업을 처리하기 위한 객체로, 콜백 지옥(callback hell)을 피하고자 등장했다. Promise는 성공(resolve) 또는 실패(reject) 상태를 가지며, 비동기 작업이 완료되면 해당 상태를 반환한다.

Promise를 사용하면 비동기 작업을 순차적으로 처리할 수 있는데, then 메소드를 이용하여 다음 작업을 연결할 수 있다. 예를 들어, 서버로부터 데이터를 가져오는 비동기적인 작업을 Promise로 처리할 수 있다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'John Doe' };
      resolve(data);
    }, 2000);
  });
}

// Promise를 사용하여 데이터를 가져옴
fetchData()
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예제에서는 fetchData 함수가 Promise를 반환하고 있다. 이 Promise는 2초 후에 데이터 객체를 resolve하게 되어 있다. 그리고 then 메소드를 사용하여 데이터를 처리하거나 catch 메소드를 사용하여 에러를 처리할 수 있다.

async/await

async/await는 ES2017(ES8)에서 도입된 문법으로 Promise를 더 쉽게 다룰 수 있게 해준다. async 함수 내부에서는 비동기적인 작업을 동기적으로 작성할 수 있다.

async/await를 사용하면 Promise를 체인으로 연결하는 것보다 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있다. 다음은 async/await를 이용하여 위와 동일한 작업을 수행하는 예제이다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'John Doe' };
      resolve(data);
    }, 2000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

// async/await를 사용하여 데이터를 가져옴
getData();

위 예제에서는 getData 함수가 async 키워드로 정의되어 있으며, 내부에서 fetchData 함수를 await 키워드와 함께 호출하고 있다. 이렇게 하면 fetchData 함수가 Promise를 반환하는 순간까지 실행을 일시 중지하고, 데이터를 받아온 후에 이어서 실행된다.

Promise와 async/await의 관계

async/await는 실제로 Promise를 기반으로 동작하기 때문에 두 기법은 연관성이 있다. async 함수 내부에서 await 키워드를 사용하여 Promise가 해결(resolve)될 때까지 기다리는 것이 가능하다.

Promise를 사용할 때는 then 메소드 연쇄를 이용하여 다음 작업을 처리하지만, async/await를 사용하면 순차적으로 작성된 코드처럼 읽기 쉽게 작성할 수 있다.

async/await를 사용하면 비동기 작업을 동기적으로 처리하는 것처럼 보이지만, 실제로는 Promise 체인으로 변환되어 비동기 작업을 처리한다. 따라서, async/await를 이용하면 코드를 더욱 간결하고 가독성있게 작성할 수 있다.

결론

자바스크립트에서 비동기 작업을 다룰 때, Promise와 async/await는 유용한 도구이다. Promise를 이용하여 비동기 작업을 처리하고, async/await를 이용하여 코드를 간결하게 작성할 수 있다. 둘 사이에는 관련성이 있으며, 함께 사용하면 더욱 효율적으로 비동기 작업을 처리할 수 있다.