동기 vs 비동기 프로그래밍 (개념)
만약 식당에 점원(스레드)이 딱 1명인데, 주방에서 요리가 완성될 때까지 점원이 가만히 서서 기다린다면 식당은 망할 것입니다. 점원은 주문만 주방에 넣고(비동기 호출), 바로 다음 손님의 주문을 받아야 합니다.
동기(Sync) vs 비동기(Async) 처리
동기 (Synchronous)
앞의 작업이 끝날 때까지 뒤의 작업은 "멈춰서 대기"합니다.
서버에서 데이터를 받아오는데 5초가 걸린다면 브라우저 화면이 5초간 완전히 얼어버립니다.
비동기 (Asynchronous)
오래 걸리는 작업은 백그라운드에 던져놓고(주문 진동벨 발급), 다른 일을 먼저 처리합니다.
완료 알림이 울리면 그때 결과를 가져옵니다.
// 자바스크립트는 일꾼(스레드)이 1명이라 위에서 아래로 동기(Sync)적으로 코드를 읽습니다.
console.log("1. 카페에서 커피 주문하기");
// setTimeout은 대표적인 비동기(Async) 함수입니다.
// 브라우저 백그라운드에게 "3초 타이머 맞춰놔!" 지시만 던져놓고, 기다리지 않고 바로 밑으로 내려갑니다!
setTimeout(() => {
console.log("3. 주문하신 커피 나왔습니다!"); // 3초 뒤에 실행
}, 3000);
console.log("2. 자리에 앉아서 스마트폰 보기");
// 출력 순서: 1 -> 2 -> (3초 멍때리기) -> 3