[JavaScript 심화] 동기와 비동기

자바스크립트는 기본적으로 "단일 스레드" 언어임
즉, 한 번에 하나의 작업만 순서대로 처리할 수 있음

하지만 실제 웹 환경에서는 서버 요청, 타이머, 파일 읽기처럼 시간이 오래 걸리는 작업을 효율적으로 처리해야 하므로
이런 경우에 "비동기" 방식을 사용함

---

1. 동기란?

여러 개의 작업이 있을 때, 순서대로 한 번에 하나씩 실행되는 방식.
앞의 코드가 끝나야 다음 코드가 실행됨

console.log(1);
console.log(2);
console.log(3);

// 1
// 2
// 3

• 한 줄씩 순차적으로 실행
• 이전 코드가 완료되기 전엔 다음 코드가 실행되지 않음
• 예시: 계산, 변수 선언, 일반 함수 실행 등

---

2. 비동기란?

여러 개의 작업이 있을 때, 순서대로 기다리지 않고
백그라운드(Web APIs)에서 실행하고 나중에 결과를 가져오는 방식

console.log(4);
setTimeout(() => {
  console.log(5);
}, 3000);
console.log(6);

// 4
// 6
// (3초 후) 5

• `setTimeout`은 브라우저가 제공하는 Web API 영역에서 실행됨
• 자바스크립트 엔진(Call Stack)은 `setTimeout`함수를 Web API로 넘기고 바로 다음 줄(`console.log(6)`)을 실행함
• 3초가 지나면 Web API가 `console.log(5)` 콜백을 이밴트 큐로 보낸 뒤, Call Stack이 비었을 때 다시 실행됨.

---

3. 동작 원리 (이벤트 루프의 흐름)

비동기 코드를 실행할 수 있게 해주는 핵심 구조는 이벤트 루프(Event Loop)임

Call Stack → Web API → Event Queue → Call Stack

구성요소 역할

구성 요소	역할
Call Stack	자바스크립트가 코드를 실행하는 메인 공간
Web API	브라우저가 제공하는 비동기 실행 공간 (예: setTimeout, fetch, DOM 이벤트 등)
Event Queue	완료된 비동기 콜백을 대기시키는 공간
Event Loop	Call Stack이 비면 Queue에서 하나씩 꺼내 실행시키는 관리자

---

뭐 요정도로 정리하고 다음에 비동기에 관해서 더 공부해보겠음