한 문장 정의
async / await는 “시간이 걸리는 작업의 결과를 기다려야 할 때” 사용합니다.
1️⃣ 자바스크립트의 기본 문제부터
자바스크립트는 기본적으로 비동기 언어입니다.
console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");출력:
A
C
B👉 기다려주지 않습니다.
2️⃣ 그럼 “기다려야 하는 작업”이 뭐냐?
대표 예시 (프로젝트에서 99%)
- 서버 요청 (로그인, 데이터 조회)
- 파일 업로드 / 다운로드
- 토큰 검사
- 외부 API 호출
- 위치 / 권한 요청
- DB / Firebase / Storage
➡️ 결과가 오기 전에는 다음 작업을 하면 안 되는 것들
3️⃣ async / await는 무엇을 하는가?
✔ async
“이 함수 안에는 기다려야 할 작업이 있다”
✔ await
“이 줄의 작업이 끝날 때까지 기다려라”
4️⃣ 기본 형태 (이 구조를 외우면 됩니다)
async function example() {
const result = await something();
console.log(result);
}5️⃣ 로그인 예제로 정확히 이해하기
❌ await 없이 (문제 있음)
function login() {
const res = fetch("/login");
console.log(res); // Promise
}👉 아직 결과 안 옴
👉 Promise 객체만 출력
✅ async / await 사용
async function login() {
const res = await fetch("/login");
const data = await res.json();
console.log(data);
}👉 서버 응답을 받은 뒤 실행
6️⃣ async / await + try-catch는 세트
왜?
await로 기다리는 동안 실패할 수 있기 때문
async function login() {
try {
const res = await fetch("/login");
const data = await res.json();
return data;
} catch (error) {
alert("서버 오류");
}
}💡 비동기 함수의 에러 처리는 try-catch로만 잡힌다
7️⃣ 언제 쓰고, 언제 안 쓰나 (핵심 표)
| 상황 | async/await |
|---|---|
| 서버 요청 | ✅ |
| 외부 API | ✅ |
| 파일 업로드 | ✅ |
| 토큰 검사 | ✅ |
| 계산 | ❌ |
| 배열 map/filter | ❌ |
| includes / if | ❌ |
| 즉시 결과 나오는 함수 | ❌ |
8️⃣ await는 아무 데서나 못 씀 (중요)
// ❌ 에러
const data = await fetch(url);👉 반드시 async 함수 안에서만 사용
async function getData() {
const data = await fetch(url);
}9️⃣ 그럼 이런 질문이 생김 (정상임)
“그냥 then 쓰면 안 돼?”
가능은 하지만…
fetch(url)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));vs
try {
const res = await fetch(url);
const data = await res.json();
} catch {}👉 실무에서는 async/await가 압도적으로 선호
- 읽기 쉬움
- 디버깅 쉬움
- try-catch 가능
🔟 로그인 흐름으로 한 번에 정리
async function handleLogin(id, pw) {
try {
const res = await fetch("/login", { method: "POST" });
if (!res.ok) {
return "아이디 또는 비밀번호 오류"; // 정상 흐름
}
const user = await res.json(); // 기다려야 함
saveUser(user);
} catch {
alert("네트워크 오류"); // 비정상 흐름
}
}🔚 딱 한 문장으로 기억하세요
“결과를 기다려야 하면 async / await”
그리고
- 사용자 실수 →
if - 시스템 실패 →
try-catch - 시간이 걸림 →
async/await
YOLO