비동기

비동기(Asynchronous) 는 작업이 끝날 때까지 기다리지 않고 다음 작업을 진행하는 방식입니다.

동기 vs 비동기

동기 (Synchronous)

작업1 완료 → 작업2 시작 → 작업2 완료 → 작업3 시작
(앞에 작업 끝날 때까지 기다림)

비동기 (Asynchronous)

작업1 시작 → 작업2 시작 → 작업3 시작
         ↓
(나중에 끝나는 순서대로 결과 받음)

일상 비유

상황동기비동기
카페커피 나올 때까지 줄 서서 기다림진동벨 받고 자리 가서 앉아있음
음식 주문음식 나올 때까지 카운터 앞에 서 있음주문 후 다른 일 하다가 나오면 받음

JavaScript 예시

동기

console.log("1");
console.log("2");
console.log("3");
// 결과: 1 → 2 → 3

비동기

console.log("1");
setTimeout(() => console.log("2"), 1000);  // 1초 후 실행
console.log("3");
// 결과: 1 → 3 → 2

왜 필요한가?

// 동기로 처리하면?
const data = fetch서버요청();  // 3초 걸림
console.log("다음 작업");      // 3초 기다려야 실행됨
// → 화면이 3초 동안 멈춤 (프리징)

// 비동기로 처리하면?
fetch서버요청().then(data => 처리());  // 요청 보내놓고
console.log("다음 작업");              // 바로 실행
// → 화면 안 멈춤

비동기 처리 방법 3가지

// 1. 콜백
getData(function(result) {
    console.log(result);
});

// 2. Promise
getData()
    .then(result => console.log(result));

// 3. async/await
const result = await getData();
console.log(result);

한줄 요약

비동기 = 기다리지 않고 다음 작업 진행, 결과는 나중에 받음

CSLOG에서 보기