[JS] 🤙 Promise 뿌시기

이번에 토스 코테를 한번 보게 되었는데, 문제중에 Promise를 핸들링 해야하는 문제가 있었다. 나는 분명히 비동기 처리를 이제는 완벽하게 핸들링 할 수 있겠다고 생각했는데, 막상 Promise객체로 된 문제를 풀다보니 생각처럼 되지 않았다..... ( 이걸 못해,, 답답했다. )
그래서 초심으로 돌아가서 Promise를 부셔버려야겠다고 생각해서 이번 포스팅을 작성하는 것이다.

🤙Promise

💡JavaScript에서 Promise는 비동기 처리의 표준 객체다.

하지만 then과 catch 정도만 쓰고 넘어가거나, async/await로 감싸서 "동기처럼" 보이게만 쓴다.
그렇게 넘어가면 면접, 코테, 실무 디버깅에서 반드시 한 번은 크게 당한다. (마치 나처럼,,,)

1️⃣ Promise의 기본 구조

Promise는 다음 3가지 상태(state)를 가진다.

상태	의미	전환 가능성
pending	대기 중	fulfilled 또는 rejected로 전환
fulfilled	이행됨(성공)	상태 고정
rejected	거부됨(실패)	상태 고정

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (/* 성공 */) {
    resolve("성공 데이터");
  } else {
    reject(new Error("실패 이유"));
  }
});

🚨 한 번 상태가 바뀌면 다시 변경 불가 (Immutable)

---

2️⃣ 실행 순서

console.log(1);

Promise.resolve().then(() => console.log(2));

console.log(3);

위 코드의 실행 순서는 1 → 3 → 2 순으로 실행되는데 이를 이해하려면 Call Stack, Microtask Queue, Macrotask Queue 를 알아야 한다.

🧺 스택, 큐

Promise의 동작을 이해하기 위한 세가지 개념

이름	역할	예시
Call Stack (호출 스택)	지금 실행 중인 코드의 목록	동기 코드 실행
Microtask Queue (마이크로태스크 큐)	Promise의 .then 콜백 같은, 아주 빠르게 실행해야 하는 작업 대기열	Promise.resolve().then(...)
Macrotask Queue (매크로태스크 큐)	setTimeout, setInterval처럼 다음 턴에 실행할 작업 대기열	setTimeout(..., 0)

Call Stack (호출 스택)

• 함수가 실행될 때 쌓이고, 실행이 끝나면 빠진다.
• 동기 코드가 이 스택에 쌓였다가 하나씩 실행됨.
• 스택이 비어야만 다음 작업(큐에서 대기 중인 들)을 실행할 수 있다.

function a() { console.log("A"); }
function b() { a(); }
b();
// Call Stack: b() → a() → 콘솔 출력

Microtask Queue (마이크로태스크 큐)

• Promise의 .then/.catch/.finally 콜백이 여기에 들어간다.
• 현재 실행 중인 동기 코드(Call Stack)가 모두 끝나면 다음번으로 실행.
• 같은 큐 안에서 새 작업이 추가되면, 큐가 빌 때까지 계속 실행.

💡 그래서 위의 코드에서 실행순서가 1 → 3 → 2가 됐던 것이다.

Macrotask Queue (매크로태스크 큐)

• setTimeout, setInterval같은 작업이 들어간다.
  ✅ 동기 코드 → 마이크로태스크 전부 → 매크로태스크 순서로 실행.

console.log(1);

setTimeout(() => console.log(2), 0);

console.log(3);
// 실행 순서: 1 → 3 → 2

각 스택과 큐에 대해서는 추후에 블로그로 더 자세하게 작성 예정

Promise에서 이 순서가 중요한 이유

Promise는 마이크로태스크 큐를 사용하기 때문에, setTimeout보다 항상 먼저 실행된다는 것을 잊으면 안된다.

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
// 출력: promise → timeout

✅ 핵심

• Call Stack: 지금 실행 중인 코드
• Microtask Queue: Promise 콜백 대기열 → 동기 코드 끝나자마자 처리
• Macrotask Queue: setTimeout 등 → 한 턴 끝날 때마다 1개씩 처리
• Promise가 setTimeout보다 먼저 실행되는 이유는 마이크로태스크 우선 처리 규칙 때문

---

3️⃣ Promise 체이닝

💡 then은 새로운 Promise를 반환한다.

Promise.resolve(1)
  .then(value => value + 1)
  .then(value => value * 2)
  .then(console.log); // 4

• 각 then은 새로운 Promise를 만들어 반환
• 이전 then의 반환값이 다음 then의 콜백 인자로 전달됨
• return에 Promise를 넣으면 그 Promise가 resolve된 값이 다음 then으로 넘어감

4️⃣ 에러 처리

기본 에러 처리

Promise.reject("에러 발생")
  .then(res => console.log(res))
  .catch(err => console.error("에러:", err))
  .finally(() => console.log("항상 실행"));

• catch는 이전 체인에서 발생한 모든 에러를 잡는다.
• finally는 성공/실패와 무관하게 실행된다.

then에서의 에러

Promise.resolve()
  .then(() => {
    throw new Error("문제 발생!");
  })
  .catch(err => console.error(err.message)); // "문제 발생!"

then 내부에서 예외 발생 → 자동으로 reject 상태로 전환

---

5️⃣ Promise 메서드 정리

Promise.all

💡 모든 Promise가 성공해야 완료
💡 하나라도 실패하면 즉시 reject

Promise.all([
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
]).then(console.log); // [1, 2, 3]

Promise.allSettled

💡 성공/실패 상관없이 모든 Promise가 끝날 때까지 기다림

Promise.allSettled([
  Promise.resolve("OK"),
  Promise.reject("Fail")
]).then(console.log);

Promise.race

💡 가장 먼저 settled된 Promise의 결과 반환

Promise.race([
  new Promise(res => setTimeout(() => res("A"), 100)),
  new Promise(res => setTimeout(() => res("B"), 50)),
]).then(console.log); // "B"

Promise.any

💡 가장 먼저 성공한 Promise 반환
💡 전부 실패하면 AggregateError 발생

---

⚠️ Promise 주의점

• resolve와 reject 둘 다 호출하지 않으면 pending 상태로 영원히 머묾
• then 안에서 return 안 하면 undefined가 넘어감
• async 함수 내부에서 throw 하면 자동 reject
• await는 try/catch로 감싸야 안전