js
CHAPTER 15 / 34
읽기 약 2분
SYNTAX
async/await 해부
핵심 개념
async 함수는 항상 Promise를 반환합니다. await는 Promise가 완료될 때까지 함수 실행을 일시 중단합니다. try/catch로 async 함수의 에러를 처리합니다. async/await는 Promise 체인을 동기 코드처럼 읽기 좋게 작성하는 문법적 설탕입니다. await를 지우며 비동기 순서가 어떻게 깨지는지 확인하십시오.
코드 분석
<div id='async-log' style='font-family:monospace; padding:16px; background:#0d1117; color:#888; min-height:120px;'>대기중...</div>
<button onclick='executeAsync()' style='margin-top:8px; padding:10px 20px; background:#10b981; color:#080808; border:none; cursor:pointer; font-family:monospace; font-weight:bold;'>ASYNC EXECUTE</button>
<script>
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
async function executeAsync() {
const log = document.getElementById('async-log');
log.innerHTML = '';
try {
log.innerHTML += '<span style="color:#f59e0b">[1]</span> 데이터 요청 시작...<br>';
await delay(800);
log.innerHTML += '<span style="color:#f59e0b">[2]</span> 응답 분석 중...<br>';
await delay(800);
log.innerHTML += '<span style="color:#10b981">[3]</span> 결과 처리 중...<br>';
await delay(800);
log.innerHTML += '<span style="color:#22c55e">[COMPLETE]</span> 비동기 흐름 완료';
} catch(err) {
log.innerHTML += '<span style="color:#10b981">[ERROR]</span> ' + err.message;
}
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 JS 'async/await' 코드의 잠재적 버그와 메모리 누수·this 바인딩·비동기 경합 위험을 분석해서 프로덕션 수준으로 개선해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'async/await'를 실제 서비스에서 어떻게 쓰는지 구체적 사례 3개와 복사 가능한 코드를 초보자가 이해할 수 있게 보여줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 JS 'async/await' 관련 코드 전체의 실행 흐름을 분석하고 성능 병목과 최적화 방안을 우선순위로 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
'async/await'에서 개발자들이 가장 많이 하는 실수 Top 3을 솔직하게 알려주고 2026년 권장 패턴을 함께 알려줘.
⭐ 이것만 기억하세요
async/await 해부는 이 3가지만 확실히 잡으세요
1.Promise 체인이 길어지면 .then().then().then()이 반복돼서 콜백 지옥과 다를 바 없이 가독성이 나빠집니다
2.async 함수 안에서 await를 쓰면 Promise가 해결될 때까지 기다렸다가 결과값을 바로 변수에 담을 수 있습니다
3.다음 챕터에서 함수가 외부 변수를 기억하는 강력한 메커니즘인 클로저를 배웁니다
공유하기
진행도 15 / 34