🏠 개발 초보도 🖥 전문가도 ❌ 누구나 이해하는 Promise와 async/await
🌐 비동기 처리란 무엇인가?
비동기 처리는
프로그램이 작업을 기다리지 않고 다음 작업을 바로 실행하는 방식입니다.
예시
- 커피 주문 후 기다리지 않고 동시에 토스트 굽기
- 데이터 요청 중 브라우저 UI는 계속 반응 유지
즉, 한 줄씩 순서대로 기다리는 동기 방식과 달리,
여러 작업을 효율적으로 처리할 수 있습니다.
🔍 Promise 개념과 동작 원리
1. Promise란?
Promise는
“미래에 완료될 작업을 약속하는 객체”입니다.
상태 3가지
- 대기 중(pending) → 아직 완료되지 않음
- 이행됨(fulfilled) → 성공
- 거부됨(rejected) → 실패
2. Promise 동작 방식
- 비동기 작업 시작
- 완료되면 resolve 호출 → then 실행
- 실패하면 reject 호출 → catch 실행
3. 예시
- 서버에서 데이터 가져오기
- 이미지 로딩
- 파일 읽기
특징: 콜백 지옥 없이 체인형식으로 깔끔하게 처리 가능
🔧 async/await 개념과 동작 원리
1. async/await란?
async/await는
Promise를 더 직관적으로 순차 처리할 수 있게 만든 문법입니다.
- async → 함수가 Promise를 반환하도록 표시
- await → Promise가 완료될 때까지 기다림, 코드 읽기 쉽고 동기처럼 동작
2. 동작 예시
- async 함수 실행
- await로 비동기 작업 완료 기다림
- 결과 반환 후 다음 줄 실행
특징: 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로 직관적 관리”