비동기 작업은 웹 개발에서 매우 중요한 부분입니다. 자바스크립트에서는 비동기 작업을 처리하기 위해 프로미스(Promise)라는 개념을 제공합니다. 프로미스는 비동기 작업의 결과를 다루는데 사용되며, 콜백 지옥(callback hell)을 피할 수 있는 방법을 제공합니다.

프로미스란?

프로미스는 자바스크립트에서 비동기 작업의 결과를 다루기 위한 객체입니다. 프로미스는 두 가지 상태를 가질 수 있습니다.

• 대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다.
• 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
• 거부(rejected): 비동기 작업이 실패한 상태입니다.

프로미스는 대기 상태에서 시작하여 비동기 작업이 완료되면 이행 상태로 변화하게 됩니다. 만약 비동기 작업이 실패하면 거부 상태로 변화하게 됩니다.

프로미스 사용하기

프로미스를 사용하여 비동기 작업을 처리하는 방법은 다음과 같습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공적인 경우 resolve() 호출
  // 실패한 경우 reject() 호출
});

promise
  .then(result => {
    // 비동기 작업이 성공적으로 완료된 경우 실행되는 코드
  })
  .catch(error => {
    // 비동기 작업이 실패한 경우 실행되는 코드
  });

먼저 new Promise()를 사용하여 프로미스 객체를 생성합니다. 생성한 프로미스 객체의 인자로 콜백 함수를 전달합니다. 콜백 함수는 비동기 작업을 수행하고 완료된 경우 resolve()를 호출하여 성공을 알리거나, 실패한 경우 reject()를 호출하여 실패를 알립니다.

그리고 생성한 프로미스 객체의 .then() 메서드를 사용하여 성공 콜백 함수를 등록합니다. 성공 콜백 함수는 비동기 작업이 성공적으로 완료된 경우 호출됩니다. 또한 .catch() 메서드를 사용하여 실패 콜백 함수를 등록할 수도 있습니다.

예제

아래는 프로미스를 사용하여 비동기 작업을 처리하는 예제입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

위 예제에서 fetchData() 함수는 2초 후에 비동기 작업이 완료되는 것을 모방하고 있습니다. 이후 .then() 메서드를 사용하여 비동기 작업이 성공한 경우 console.log()로 데이터를 출력하고, .catch() 메서드를 사용하여 비동기 작업이 실패한 경우 console.error()로 에러를 출력하고 있습니다.

결론

프로미스를 사용하여 비동기 작업을 처리할 수 있습니다. 프로미스는 콜백 지옥(callback hell)을 피할 수 있는 방법을 제공하며, 비동기 작업의 결과를 다루기 위한 유용한 도구입니다. 프로미스를 잘 활용하여 코드를 깔끔하게 작성할 수 있도록 노력해야 합니다.

더 자세한 내용은 MDN web docs를 참고하세요.