노트

Promise

Promise

프런트엔드#js · 연결된 개념 8개

쉽게 말하면

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, 메서드)이 아니라 화면에 보이는 동작을 검증하라는 철학을 강하게 가진 라이브러리다.

  • 우선순위 큐

    원소마다 우선순위가 있고, 들어온 순서와 상관없이 우선순위가 가장 높은 것부터 꺼내는 추상 자료형(Abstract Data Type, ADT). 같은 우선순위끼리의 순서는 보장하지 않는다. 응급실 대기 순서가 좋은 비유다.

  • TanStack Query

    TanStack Query(구 React Query)는 서버에서 가져온 데이터를 캐시하고, 오래된 데이터를 다시 가져오고, 로딩·에러 상태를 관리해 주는 비동기 상태 관리자다. 데이터 요청 함수 자체가 아니라 그 결과의 생명주기를 맡는다.

  • Vue 3와 React 대응표

    React에 익숙한 개발자가 Vue 3(Composition API, script setup)를 빠르게 읽을 수 있게 짝지어 본 표. 가장 큰 차이는 Vue는 반응성(Reactivity)을 자동으로 추적해서 의존성 배열(Dependency Array)이 없다는 점이다.

보기 옵션