[JavaScript] 커스텀 Promise로 비동기 동작 이해하기

안녕하세요.

오늘은 비동기 작업이 무엇인지 이해하고, 커스텀 Promise를 구현해보겠습니다.

 

1. 비동기란 무엇인가?

동기(Synchronous)와 비동기(Asynchronous)의 차이

• 동기:
  • 작업이 순차적으로 실행됩니다. 하나의 작업이 끝날 때까지 다음 작업은 대기합니다.
  • 모든 작업이 완료될 때까지 프로그램의 실행이 멈춰 있을 수 있습니다.
• 비동기:
  • 작업이 병렬적으로 실행됩니다. 하나의 작업이 진행되는 동안 다른 작업도 실행됩니다.
  • 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기)이 프로그램을 멈추지 않게 처리합니다.

비동기의 필요성

비동기는 다음과 같은 상황에서 유용합니다:

1. 사용자 경험 개선: 시간이 오래 걸리는 작업(서버 요청, 이미지 로드 등)이 진행되는 동안 사용자와의 상호작용(UI 클릭 등)을 유지할 수 있습니다.
2. 효율성: CPU를 차단하지 않고 다른 작업을 병렬로 처리할 수 있습니다.

동기 예제

console.log("작업 시작");

// 3초 동안 멈추는 작업 (동기적 코드)
const startTime = Date.now();
while (Date.now() - startTime < 3000) {
  // 3초 동안 멈춤
}

console.log("작업 완료");

결과 : 프로그램이 3초 동안 멈춘 뒤 "작업 완료"가 출력됩니다. 사용자는 아무것도 할 수 없는 상태가 됩니다.

 

비동기 예제

console.log("작업 시작");

// 3초 후에 실행되는 작업 (비동기적 코드)
setTimeout(() => {
  console.log("작업 완료");
}, 3000);

console.log("다른 작업 실행 중...");

결과:

1. "작업 시작"이 즉시 출력됩니다.
2. "다른 작업 실행 중..."이 바로 출력됩니다.
3. 3초 후 "작업 완료"가 출력됩니다.

비동기의 장점: setTimeout은 비동기로 실행되므로, 다른 작업을 중단하지 않고 병렬로 처리합니다.

 

2. Promise란 무엇인가?

Promise의 정의

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 작업이 완료된 시점에 결과 값을 제공하거나, 실패한 이유를 알려줍니다.

Promise의 주요 상태

1. Pending: 작업이 아직 완료되지 않은 상태.
2. Fulfilled: 작업이 성공적으로 완료된 상태.
3. Rejected: 작업이 실패한 상태.

Promise의 기본 사용 예제

const examplePromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 작업 결과 시뮬레이션
    if (success) {
      resolve("작업 성공!");
    } else {
      reject("작업 실패!");
    }
  }, 2000);
});

// Promise 사용
examplePromise
  .then((result) => {
    console.log(result); // 성공 메시지 출력
  })
  .catch((error) => {
    console.error(error); // 실패 메시지 출력
  })
  .finally(() => {
    console.log("작업 종료");
  });

 

3. 커스텀 Promise 구현하기

Promise의 동작을 더 잘 이해하기 위해, 직접 커스텀 Promise를 만들어 봅시다.

구현 목표

• 2초 후에 작업이 성공하거나 실패하도록 비동기 작업을 시뮬레이션.
• resolve와 reject를 사용해 Promise의 상태를 변경.

function customAsyncTask(success) {
  return new Promise((resolve, reject) => {
    console.log("작업 시작...");

    setTimeout(() => {
      if (success) {
        resolve("작업 성공!");
      } else {
        reject("작업 실패!");
      }
    }, 2000); // 2초 후 작업 결과 반환
  });
}

// 커스텀 Promise 실행
customAsyncTask(true) // true로 성공 시뮬레이션
  .then((result) => {
    console.log(result); // 성공 메시지 출력
  })
  .catch((error) => {
    console.error(error); // 실패 메시지 출력
  })
  .finally(() => {
    console.log("작업 종료");
  });

Promise의 동작 흐름

1. Pending: customAsyncTask 함수가 호출되면 Promise가 Pending 상태가 됩니다.
2. Fulfilled: resolve가 호출되면 작업이 성공(Fulfilled) 상태로 바뀌고 .then에서 처리됩니다.
3. Rejected: reject가 호출되면 작업이 실패(Rejected) 상태로 바뀌고 .catch에서 처리됩니다.