자바스크립트의 비동기 처리과정

싱글 스레드인 자바스크립트에서 어떻게 비동기 처리가 가능한지를 `setTimeout` 예제 하나로 끝까지 따라간 글이다. 3초 뒤에 실행되라고 지정한 콜백이 왜 3초 뒤에 실행되지 않는지를 스택·힙·이벤트 큐·이벤트 루프·브라우저 API 로 나눠 설명한다.

핵심 포인트

`setTimeout(goLunch, 3000)` 뒤에 5초 걸리는 `work()` 를 두면 "work완료" 가 먼저, "식사가시죠~" 가 나중에 찍힌다. 지연 시간을 0으로 줘도 같다.
비동기 처리를 새 스레드 생성으로 오해하기 쉬운데, 자바스크립트는 싱글 스레드라 스택이 하나뿐이다.
시간을 재는 일은 자바스크립트 엔진이 아니라 **브라우저가 대신 맡는다**. 엔진이 직접 재면 뒤 코드가 밀려 비동기가 성립하지 않는다.
지정 시간이 지나면 타임아웃 이벤트가 발생해 콜백이 이벤트 큐에 들어가고, 이벤트 루프가 **스택이 빈 순간에만** 꺼내 실행한다.
따라서 3초 뒤 정확히 실행시키려면 지연 시간을 조정할 게 아니라 `work()` 를 짧은 단위로 쪼개 스택을 비워 줘야 한다.

상세 정리

글의 출발점은 티몬 상품 운영시스템 화면을 개발하며 비동기 API 가 기대와 다르게 동작해 겪은 시행착오다.
실행 환경 구성: 스택은 메서드 호출마다 프레임이 쌓이는 곳, 힙은 객체 생성 시 메모리가 할당되는 곳으로 자바와 같지만, 싱글 스레드라 스택이 하나라는 점이 다르다.
이벤트 큐의 정의: 이벤트가 발생했을 때 수행할 콜백 함수를 대기시키는 곳이며, 대기 중인 콜백은 적절한 때가 되면 처리된다.
`setTimeout` 실행 순간의 상태를 그림으로 놓고, 이 시점에 스택 위에 무엇이 올라가 있는지부터 짚는다.
위임의 의미: 코드는 자바스크립트 모습이지만 실제 타이머 기능은 브라우저에 넘기고 엔진은 다음 코드를 계속 수행한다.
이벤트 루프의 두 단계: ① 이벤트 큐에 작업이 있는지 확인한다 ② 스택이 비었을 때 큐에서 꺼내 수행한다. 이 반복이 이벤트 루프다.
그래서 스택에 작업이 계속 있으면 큐의 콜백은 계속 대기하고, 결과적으로 의도한 시간에 실행되지 않을 수 있다.
예제 재해석: `goLunch` 는 3초 뒤 큐에 들어가지만 이벤트 루프가 `work` 종료 후에야 스택에 올릴 수 있어서 3초가 지나도 출력되지 않았다.
실무 함의로 대부분의 코드가 이벤트를 다루거나 비동기로 로직을 수행하므로, 이 과정을 이해하면 버그 원인을 예상하는 데 도움이 된다고 정리한다.