1. 비동기 프로그래밍이 필요한 이유
1.1 자바스크립트는 싱글스레드 언어
-
자바스크립트 엔진은 단 하나의 콜 스택(Call Stack)만 가진다.
- 한 번에 하나의 실행 컨텍스트만 실행할 수 있다.
- 동시에 두 개 이상의 함수를 실행할 수 없다.
📌 의미 → 시간이 오래 걸리는 작업이 실행되면 → 전체 프로그램이 멈추는(Blocking) 문제가 발생
1.2 비동기 프로그래밍의 목적
- 싱글 스레드 환경에서도:
- UI가 멈추지 않게 하고
- 여러 작업이 동시에 처리되는 것처럼 보이게 하기 위함
📌 핵심
→ 비동기 프로그래밍은 “병렬 실행”이 아니라 “기다리지 않는 실행 방식”이다.
2. 콜 스택(Call Stack)과 실행 컨텍스트
이벤트가 연속 발생하면 실행을 미루다가, 마지막 이벤트 이후 일정 시간 동안 추가 이벤트가 없을 때 한 번만 실행
Event Loop Diagram
JayTak
2.1 실행 컨텍스트와 콜 스택
- 함수 호출 → 실행 컨텍스트 생성
- 실행 컨텍스트 → 콜 스택에 push
- 실행 종료 → 콜 스택에서 pop
📌 핵심 규칙
→ 콜 스택이 비어야만 다음 작업을 실행할 수 있다.
3.2 싱글 스레드의 한계
- 콜 스택에 하나라도 실행 중인 컨텍스트가 있으면
- 다른 작업은 절대 실행되지 않는다
3. 자바스크립트 엔진과 브라우저의 역할 분담
3.1 자바스크립트 엔진의 역할
- 소스 코드 평가
- 실행 컨텍스트 생성
- 콜 스택 기반 코드 실행
3.2 브라우저(Web API)의 역할
- 타이머 관리 (
setTimeout) - HTTP 요청
- 이벤트 감지
- 태스크 큐 제공
- 이벤트 루프 제공
📌 핵심 통찰
→ 자바스크립트 엔진은 싱글 스레드지만, 실행 환경(브라우저)은 멀티 스레드다.
4. 태스크 큐(Task Queue)
4.1 태스크 큐의 역할
- 비동기 작업의 콜백 함수 대기 공간
- 예:
setTimeoutsetInterval- 이벤트 핸들러
📌 중요
→ 콜백 함수는 즉시 실행되지 않고 태스크 큐에서 실행 순서를 기다린다.
5. 이벤트 루프(Event Loop)
5.1 이벤트 루프의 역할
이벤트 루프는 반복적으로 다음을 확인한다:
- 콜 스택이 비어 있는가?
- 실행 가능한 콜백이 큐에 있는가?
5.2 실행 흐름
- 콜 스택이 비어 있으면
- 태스크 큐에서 FIFO 방식으로
- 콜백을 콜 스택으로 이동시켜 실행
📌 핵심 문장
→ 이벤트 루프는 “실행자”가 아니라 실행 순서를 관리하는 관리자다.