노트

Promise

Promise

프론트엔드#js · 연결된 개념 9개

쉽게 말하면

Promise는 카페에서 주문하고 받는 진동벨 같은 거예요. 음료가 나올 때까지 줄에 서 있지 않고 다른 일을 하다가, 벨이 울리면 성공(음료)이나 실패(품절) 결과를 받아 다음 일을 이어 가요.

비유의 한계 진동벨과 달리 Promise는 만드는 순간 이미 일이 시작돼요. executor는 생성할 때 동기적으로 돌고, 상태는 pending에서 fulfilled나 rejected로 딱 한 번만 바뀌어요.

Promise는 비동기 작업이 나중에 성공하거나 실패할 결과를 나타내는 객체다(ECMAScript 2015, ES2015). 콜백을 중첩하는 대신 .then() 체인이나 async/await로 비동기 흐름을 순서대로 쓸 수 있게 해 준다.

  • 상태는 pending에서 fulfilled(성공) 또는 rejected(실패) 중 하나로 한 번만 바뀐다
  • new Promise(executor)의 executor는 생성하는 순간 동기적으로 실행된다. then을 붙이기 전에 이미 돈다
  • then은 새 Promise를 반환해서 체이닝이 된다. catch는 실패를, finally는 결과와 상관없는 정리(로딩 해제 등)를 맡는다
  • resolve를 끝내 부르지 않으면 영원히 pending이다. 그래도 스레드나 CPU(Central Processing Unit)를 붙잡지는 않는다. 상태를 가진 객체 하나가 남을 뿐이고, 참조가 없으면 GC(Garbage Collection) 대상이 된다
  • await는 스레드를 멈추지 않는다. 현재 async 함수의 남은 부분만 멈춰 두고, Promise가 끝나면 마이크로태스크(Microtask)로 이어서 실행한다. 그동안 다른 코드는 계속 돈다(이벤트 루프)
  • async/await는 Promise 위의 문법이다. async function f() { return 1 }은 Promise.resolve(1)을 반환하는 것과 같다
API(Application Programming Interface)끝나는 조건
Promise.all모두 성공(하나라도 실패하면 즉시 실패)
Promise.allSettled모두 끝남(성공·실패 결과 배열)
Promise.race가장 먼저 끝난 것(타임아웃 구현)
Promise.any가장 먼저 성공한 것

React에서 Promise를 렌더 중에 읽는 방법은 use()로 Promise 읽기, 파이썬의 비슷한 함정은 asyncio 태스크 예외가 조용히 사라지는 문제에 있다.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 최종 일관성

    최종 일관성(eventual consistency)은 "지금 당장은 저장소마다 값이 다를 수 있지만, 새 변경이 멈추면 결국 같아진다"는 보장이다. 원본 DB와 검색 색인·캐시·다른 서비스처럼 물리적으로 분리된 저장소를 한 트랜잭션으로 묶을 수 없을 때 받아들이는 일관성 모델(consistency model)이다.

  • React Testing Library

    React Testing Library(RTL)는 컴포넌트를 jsdom 같은 테스트용 DOM(Document Object Model) 환경에 렌더하고, 사용자가 실제로 쓰는 방식으로 요소를 찾고 조작하게 해 주는 테스트 도구다. 내부 구현(state, 메서드)이 아니라 화면에 보이는 동작을 검증하라는 철학을 강하게 가진 라이브러리다.

  • useActionState와 폼 액션

    React 19에서는 <form action={함수}>에 함수를 바로 넘길 수 있고, useActionState가 그 액션의 대기 상태와 마지막 결과를 한 훅으로 관리한다. useState + onSubmit + 로딩 플래그로 짜던 패턴을 대체한다.

  • 디바운스

    디바운스(Debounce)는 짧은 간격으로 이어지는 호출을 한 묶음으로 보고, 호출이 멈춘 뒤 정해진 시간이 지나면 한 번만 실행하는 기법이다. 입력처럼 잦게 일어나는 이벤트에 무거운 작업(결과 필터링, 추천어 요청)이 붙을 때 쓴다.

보기 옵션