🏠 개발 초보도 🖥 전문가도 ❌ 누구나 이해하는 Promise와 async/await

---

🌐 비동기 처리란 무엇인가?

비동기 처리는
프로그램이 작업을 기다리지 않고 다음 작업을 바로 실행하는 방식입니다.

예시

• 커피 주문 후 기다리지 않고 동시에 토스트 굽기
• 데이터 요청 중 브라우저 UI는 계속 반응 유지

즉, 한 줄씩 순서대로 기다리는 동기 방식과 달리,
여러 작업을 효율적으로 처리할 수 있습니다.

---

🔍 Promise 개념과 동작 원리

1. Promise란?

Promise는
“미래에 완료될 작업을 약속하는 객체”입니다.

상태 3가지

• 대기 중(pending) → 아직 완료되지 않음
• 이행됨(fulfilled) → 성공
• 거부됨(rejected) → 실패

2. Promise 동작 방식

1. 비동기 작업 시작
2. 완료되면 resolve 호출 → then 실행
3. 실패하면 reject 호출 → catch 실행

3. 예시

• 서버에서 데이터 가져오기
• 이미지 로딩
• 파일 읽기

특징: 콜백 지옥 없이 체인형식으로 깔끔하게 처리 가능

---

🔧 async/await 개념과 동작 원리

1. async/await란?

async/await는
Promise를 더 직관적으로 순차 처리할 수 있게 만든 문법입니다.

• async → 함수가 Promise를 반환하도록 표시
• await → Promise가 완료될 때까지 기다림, 코드 읽기 쉽고 동기처럼 동작

2. 동작 예시

1. async 함수 실행
2. await로 비동기 작업 완료 기다림
3. 결과 반환 후 다음 줄 실행

특징: then, catch 체인 없이도 직관적인 순서대로 처리 가능

---

🏠 Promise vs async/await 비교

구분	Promise	async/await
가독성	체인형식, 길어질 수 있음	직관적, 동기 코드처럼 작성
에러 처리	catch로 처리	try/catch 사용 가능
순서 처리	then 체인	await 순서대로 처리
사용 용도	콜백 대체, 비동기 작업	동기처럼 직관적 처리, 반복 비동기

---

🔍 실제 사용 예

1. 데이터 요청

• REST API 호출 후 화면에 표시
• 여러 API 순차 호출

2. 파일 처리

• 이미지 업로드
• CSV, JSON 읽기

3. 타이머 / 대기

• 특정 시간 후 작업 수행
• 애니메이션, UI 업데이트

REST API, WebSocket 등과 함께 쓰면 실시간 데이터 처리 효율 극대화

---

🖥 개발자 관점 팁

• Promise → 복잡한 체인 작업에 유용
• async/await → 읽기 쉽고 유지보수 용이
• try/catch → 에러 처리 필수
• 병렬 작업 → Promise.all 활용 가능

---

❌ 주의할 점

• await는 함수 내에서만 사용 가능
• 무작정 await 사용 시 성능 저하 가능 → 병렬 처리 필요 시 Promise.all 사용
• 비동기 작업 실패 시 반드시 catch 또는 try/catch로 처리

---

🎯 결론

2025년 기준 비동기 처리의 핵심

• Promise → 비동기 작업 약속, then/catch로 결과 처리
• async/await → Promise 기반, 직관적 순차 처리 가능
• UI 반응 유지, 서버 요청, 파일 처리 등 현대 웹 개발에서 필수 기술

정리하면
“비동기 처리 = 기다리지 않고 효율적으로 작업 처리 → Promise와 async/await로 직관적 관리”