자바스크립트 시각화로 프로미스를 이해해 볼까요?

프로미스의 기본 원리

프로미스는 새로운 비동기 작업을 만들 때 주로 사용됩니다. 기본적인 사용법은 다음과 같습니다.

new Promise((resolve, reject) => {
   // 비동기 작업 수행
});

이렇게 작성된 프로미스는 몇 가지 중요한 내부 상태를 가지게 됩니다. 이 내부 상태들은 프로미스가 어떤 단계에 있는지를 나타냅니다. 예를 들어, 작업이 완료되면 프로미스의 상태는 `fulfilled`로 바뀌고, 결과는 `resolved`됩니다. 반대로 작업이 실패하면 상태는 `rejected`가 되고, 결과는 `rejected`로 설정됩니다.

프로미스의 동작 과정

프로미스를 생성하면 아래와 같은 일들이 발생합니다:

프로미스 객체 생성: 프로미스 객체가 생성됩니다.

프로미스 내부 상태 초기화: 여러 내부 슬롯([PromiseState], [PromiseResult], [PromiseFulfillReactions], [PromiseRejectReactions])이 초기화됩니다.

비동기 작업 시작: 비동기 작업이 시작됩니다.

프로미스는 비동기 작업이 완료되면 `resolve` 또는 `reject`를 호출하여 상태를 변경합니다.

new Promise((resolve, reject) => {
   setTimeout(() => resolve("완료!"), 1000);
}).then(result => console.log(result));

위 코드에서 `setTimeout`은 1초 후에 `resolve`를 호출하여 프로미스 상태를 `fulfilled`로 바꿉니다. 그러면 `then` 핸들러가 호출되어 결과를 출력합니다.

프로미스 체이닝

프로미스의 가장 큰 장점 중 하나는 체이닝(chaining)입니다. 여러 개의 비동기 작업을 순차적으로 실행할 수 있습니다.

new Promise((resolve) => {
   resolve(1);
})
  .then(result => result * 2)
  .then(result => result * 2)
  .then(result => console.log(result));  // 4 출력

이 예제에서 각 `then` 핸들러는 이전 프로미스의 결과를 받아서 새로운 결과를 반환합니다. 이렇게 하면 비동기 작업을 단계적으로 처리할 수 있습니다.

프로미스를 활용한 이미지 처리 예제

좀 더 실용적인 예로, 이미지를 비동기적으로 로드하고, 후속 작업을 수행하는 예제를 살펴보겠습니다.

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

loadImage('image.jpg')
 .then(image => {
   console.log('이미지 로드 완료');
   return resizeImage(image);  // 가상의 이미지 크기 조정 함수
 })
 .then(image => {
   console.log('이미지 크기 조정 완료');
   return applyGrayscaleFilter(image);  // 가상의 흑백 필터 적용 함수
 })
 .then(image => {
   console.log('필터 적용 완료');
   return addWatermark(image);  // 가상의 워터마크 추가 함수
 })
 .then(image => {
   console.log('모든 작업 완료');
 });

이 예제에서는 이미지를 비동기적으로 로드하고, 일련의 후속 작업(크기 조정, 필터 적용, 워터마크 추가)을 차례로 수행합니다. 각각의 작업은 프로미스로 반환되어, 체이닝을 통해 순차적으로 실행됩니다.

결론

프로미스는 자바스크립트에서 비동기 작업을 처리하는 강력한 도구입니다. 복잡한 비동기 작업을 순차적으로 처리할 수 있고, 오류 처리도 용이합니다. 비동기 작업을 효율적으로 관리하고 싶다면 프로미스의 개념을 꼭 이해해야 합니다. 프로미스의 기본 개념을 숙지하고 나면, 비동기 코드를 더 읽기 쉽고 유지보수하기 쉽게 작성할 수 있습니다.