21.3. 프로그램언어 자바스크립트(JavaScript)의 이벤트 루프와 프로미스(Promise)

by

프로그램언어 자바스크립트(JavaScript)에서의 프로미스의 개념

프로미스(Promise)는 자바스크립트에서 비동기 작업을 보다 간편하게 다룰 수 있도록 도와주는 객체입니다. 비동기 작업은 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있는 것을 말합니다. 프로미스는 성공 또는 실패와 같은 비동기 작업의 최종 완료 또는 실패 결과를 나타내는 객체이며, 성공 시에는 결과 값을 전달하고 실패 시에는 에러를 전달합니다.

프로미스는 주로 비동기 작업을 수행하는 함수에서 사용되며, 다음과 같은 세 가지 상태를 가집니다:

  • Pending(대기): 비동기 작업이 아직 완료되지 않은 상태
  • Fulfilled(이행): 비동기 작업이 성공적으로 완료된 상태
  • Rejected(거부): 비동기 작업이 실패한 상태

프로미스는 다음과 같이 생성할 수 있습니다:


// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true;  if (success) {
    // 작업이 성공하면 resolve 호출
    resolve('Success!');
  } else {
    // 작업이 실패하면 reject 호출
    reject('Error!');
  }
});

프로미스를 사용하면 then() 및 catch() 메서드를 통해 성공 또는 실패 시의 처리를 할 수 있습니다. then()은 성공 시의 처리를, catch()는 실패 시의 처리를 담당합니다.


// 프로미스 사용
myPromise.then((result) => {
  console.log(result); // 성공 시 'Success!' 출력
}).catch((error) => {
  console.error(error); // 실패 시 'Error!' 출력
});

프로미스를 활용하면 콜백 지옥(callback hell)을 피하고 비동기 작업을 보다 효율적으로 다룰 수 있습니다. 프로미스 체이닝을 통해 여러 개의 비동기 작업을 순차적 또는 병렬로 처리할 수 있으며, async/await와 함께 사용하여 코드를 더욱 가독성 있게 작성할 수 있습니다.

프로그램언어 자바스크립트(JavaScript)에서의 프로미스의 생성과 실행

프로미스(Promise)는 자바스크립트에서 비동기 작업을 보다 간편하게 다룰 수 있도록 도와주는 객체입니다. 프로미스를 생성하고 실행하는 방법을 알아보겠습니다.

프로미스를 생성할 때는 Promise 객체를 사용하며, Promise 생성자 함수는 콜백 함수를 인자로 받습니다. 콜백 함수는 resolve와 reject 두 개의 매개변수를 가지며, 비동기 작업이 성공했을 때는 resolve를 호출하고, 실패했을 때는 reject를 호출합니다.

아래는 간단한 예제 코드입니다. 1초 후에 성공하는 프로미스를 생성하고, 해당 프로미스가 성공했을 때와 실패했을 때의 처리를 정의하였습니다.


// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const isSuccess = true;
    if (isSuccess) {
      resolve("Success!");
    } else {
      reject("Error!");
    }
  }, 1000);
});// 프로미스 실행
myPromise
  .then((result) => {
    console.log(result); // Success!
  })
  .catch((error) => {
    console.error(error);
  });

위 코드에서는 1초 후에 resolve 함수가 호출되어 “Success!”가 출력됩니다. 만약 reject 함수가 호출되면 catch 메소드가 실행되어 에러를 출력합니다. 프로미스를 통해 비동기 작업을 보다 효율적으로 다룰 수 있습니다.

프로그램언어 자바스크립트(JavaScript)에서의 프로미스와 이벤트 루프의 상관관계

프로미스(Promise)와 이벤트 루프(Event Loop)는 자바스크립트에서 비동기 처리를 다룰 때 중요한 개념입니다.

프로미스는 비동기 작업의 결과를 나타내는 객체로, 작업이 성공적으로 완료되었는지 또는 실패했는지를 나타내는 상태와 결과 값을 가집니다. 프로미스는 성공 시에는 resolve 콜백을 호출하고, 실패 시에는 reject 콜백을 호출합니다.

이벤트 루프는 자바스크립트의 실행 모델 중 하나로, 콜 스택(Call Stack), 백그라운드(Background), 태스크 큐(Task Queue)로 구성되어 있습니다. 이벤트 루프는 콜 스택이 비어있을 때 태스크 큐에 있는 작업을 순서대로 콜 스택으로 이동시켜 실행합니다.

프로미스와 이벤트 루프는 함께 사용되어 비동기 작업을 효율적으로 처리할 수 있습니다. 아래는 프로미스와 이벤트 루프를 함께 사용하는 예제 코드입니다.


// 프로미스를 사용하여 비동기 작업을 처리하는 함수
function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('작업 완료!'); // 비동기 작업 성공 시 resolve 호출
    }, 2000);
  });
}// 비동기 작업을 호출하고 결과를 출력하는 함수
function getResult() {
  asyncFunction().then((result) => {
    console.log(result); // 작업 완료!
  });
}// getResult 함수 호출
getResult();

프로그램언어 자바스크립트(JavaScript)에서의 프로미스를 활용한 비동기 처리 방법

프로그램언어 자바스크립트(JavaScript)에서의 프로미스를 활용한 비동기 처리는 비동기 작업을 보다 효율적으로 다룰 수 있는 방법입니다. 프로미스는 비동기 작업이 완료되었을 때 결과값이나 실패 이유를 처리할 수 있는 객체입니다. 이를 통해 콜백 지옥(callback hell)을 피하고 코드를 보다 구조적으로 작성할 수 있습니다.

프로미스는 세 가지 상태를 가집니다: 대기(pending), 이행(fulfilled), 거부(rejected). 대기 상태에서 시작하여 비동기 작업이 성공하면 이행 상태가 되고, 실패하면 거부 상태가 됩니다.

프로미스를 생성하는 가장 일반적인 방법은 Promise 생성자를 사용하는 것입니다. Promise 생성자는 함수를 인자로 받고, 그 함수는 resolve와 reject라는 두 개의 콜백 함수를 인자로 받습니다. resolve 함수는 성공 시 호출되고, reject 함수는 실패 시 호출됩니다.


// 예제코드
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true;  if (success) {
    resolve('작업 성공');
  } else {
    reject('작업 실패');
  }
});

프로미스를 이용하여 비동기 작업을 처리할 때는 then과 catch 메서드를 사용합니다. then 메서드는 프로미스가 이행됐을 때 호출되며, catch 메서드는 프로미스가 거부됐을 때 호출됩니다.


// 예제코드
myPromise
  .then((result) => {
    console.log(result); // 작업 성공
  })
  .catch((error) => {
    console.error(error); // 작업 실패
  });

또한, 프로미스를 연결하여 여러 개의 비동기 작업을 순차적으로 처리할 수도 있습니다. 이를 위해 then 메서드 안에서 새로운 프로미스를 반환하는 방식을 사용합니다.


// 예제코드
const firstPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('첫 번째 작업 완료');
  }, 1000);
});const secondPromise = firstPromise.then((result) => {
  console.log(result); // 첫 번째 작업 완료
  return '두 번째 작업 완료';
});secondPromise.then((result) => {
  console.log(result); // 두 번째 작업 완료
});

프로그램언어 자바스크립트(JavaScript)에서의 프로미스의 장단점 예시

프로미스(Promise)는 자바스크립트에서 비동기 작업을 보다 효율적으로 다룰 수 있게 해주는 객체입니다. 프로미스의 장단점을 살펴보겠습니다.

프로미스의 장점:

1. 가독성: 콜백 지옥을 방지하고 비동기 코드를 보다 구조적으로 작성할 수 있습니다.

2. 에러 핸들링: .catch()를 통해 에러를 쉽게 처리할 수 있습니다.

3. 연쇄적인 비동기 작업: 여러 개의 비동기 작업을 연결하여 순차적 또는 병렬로 실행할 수 있습니다.

4. 코드 재사용성: 프로미스를 활용하여 여러 곳에서 동일한 비동기 로직을 재사용할 수 있습니다.

프로미스의 단점:

1. 콜백 지옥 대신 프로미스 지옥: 프로미스를 연속적으로 체이닝하다 보면 가독성이 떨어질 수 있습니다.

2. 예외 처리의 한계: 비동기 작업 중 발생한 예외를 처리하기 어려울 수 있습니다.

프로미스 예제 코드:


// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('작업 성공');
    } else {
      reject('작업 실패');
    }
  }, 2000);
});// 프로미스 사용
myPromise
  .then((result) => {
    console.log(result); // 작업 성공
  })
  .catch((error) => {
    console.error(error); // 작업 실패
});

Leave a Comment