Promise 비동기 해부

핵심 개념

Promise는 비동기 작업의 완료/실패를 나타내는 객체입니다. pending → fulfilled/rejected 세 가지 상태를 가집니다. .then()은 성공 처리, .catch()는 에러 처리, .finally()는 항상 실행입니다. Promise.all()은 모든 프로미스가 완료될 때, Promise.race()는 가장 빠른 것이 완료될 때 반환합니다. .then 체인을 지우며 비동기 흐름이 끊기는 것을 확인하십시오.

코드 분석

JS📋 코드 (27줄)

<div id='promise-log' style='font-family:monospace; padding:16px; background:#0d1117; color:#888; min-height:100px;'>Promise 실행 대기중...</div>
<button onclick='runPromise()' style='margin-top:8px; padding:10px 20px; background:#10b981; color:#080808; border:none; cursor:pointer; font-family:monospace; font-weight:bold;'>EXECUTE PROMISE</button>
<script>
  function runPromise() {
    const log = document.getElementById('promise-log');
    log.innerHTML = '<span style="color:#f59e0b">[PENDING]</span> 비동기 작업 시작...';

    const mission = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.3;
        if (success) resolve('TARGET ELIMINATED');
        else reject('MISSION FAILED');
      }, 1500);
    });

    mission
      .then(result => {
        log.innerHTML += '<br><span style="color:#22c55e">[FULFILLED]</span> ' + result;
      })
      .catch(err => {
        log.innerHTML += '<br><span style="color:#10b981">[REJECTED]</span> ' + err;
      })
      .finally(() => {
        log.innerHTML += '<br><span style="color:#888">[FINALLY]</span> 작전 종료';
      });
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS 'Promise 비동기' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Promise 비동기'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS 'Promise 비동기' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'Promise 비동기'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

Promise 비동기 해부는 이 3가지만 확실히 잡으세요

1.콜백만으로 비동기를 처리하면 중첩이 깊어져서(콜백 지옥) 코드 흐름을 따라가기 어렵습니다

2.Promise는 pending → fulfilled 또는 rejected 상태를 거치며, .then()과 .catch()로 성공과 실패를 분리 처리합니다

3.다음 챕터에서 Promise를 동기 코드처럼 읽을 수 있게 하는 async/await를 배웁니다

💬 이 챕터 질문 보기

JS · CH.14 — 질문하거나 답변을 확인하세요

→

진행도 14 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)