자바스크립트 내부 동작 , 이벤트 루프

좋습니다. 이건 브라우저 내부 동작과 이벤트 루프에 대한 아주 근본적인 질문이에요. 결론부터 말씀드리면:

브라우저의 네트워크 I/O 엔진이 readyState 변경을 감지하고, 이벤트 큐에 해당 콜백을 등록하여 실행합니다.

---

✅ 1. 브라우저는 네트워크 I/O 작업을 백그라운드에서 실행

const xhr = new XMLHttpRequest();
xhr.open("GET", "/data.json");
xhr.send();

이렇게 하면, 브라우저는 내부적으로 다음과 같은 작업을 합니다:

• 네트워크 요청을 백그라운드 스레드(ex. libcurl, OS TCP stack)를 통해 보냄

• main JS 스레드는 계속 돌아감 (비동기)

---

✅ 2. 네트워크 상태가 바뀔 때마다 readyState가 변함

요청이 아래 단계를 거칠 때마다 readyState 값이 자동으로 변합니다:

상태	readyState	의미
0 → 1	OPENED	open() 호출
1 → 2	HEADERS_RECEIVED	응답 헤더 수신
2 → 3	LOADING	데이터 수신 중
3 → 4	DONE	모든 응답 수신 완료

---

✅ 3. 브라우저가 이벤트를 감지하는 방법: "Native Event Source"

• XMLHttpRequest는 C++로 구현된 브라우저의 네이티브 객체입니다.

• 내부적으로 readyState가 변경되면, 브라우저는 이벤트를 Event Queue에 등록합니다.

┌──────────────┐
│ Browser I/O  │ ← 백그라운드에서 네트워크 처리
└────┬─────────┘
     │ readyState 변경 발생!
     ↓
┌────────────────────────────┐
│ JS 이벤트 큐에 콜백 등록  │ xhr.onreadystatechange
└────────────────────────────┘
     ↓
 JS Event Loop에 의해 실행됨

---

✅ 4. 실행은 JS의 이벤트 루프가 담당

브라우저의 Event Loop는:

• 콜 스택이 비면

• 이벤트 큐에 있는 onreadystatechange 콜백을 실행시킵니다.

---

✅ 실제로 브라우저는 이렇게 구현되어 있음

Chromium 소스 코드 예시 (의미적 정리):

void XMLHttpRequest::ChangeReadyState(int newState) {
    this->readyState = newState;
    if (onreadystatechange is set) {
        enqueueTask(EventQueue, [this] { this->onreadystatechange(); });
    }
}

---

✅ 한 줄 요약

브라우저는 readyState가 바뀔 때마다 내부적으로 이를 감지하고, 이벤트 큐에 onreadystatechange를 등록한 뒤, JS 이벤트 루프가 실행합니다.

즉, JS가 "폴링"하는 게 아니라 브라우저의 네이티브 코드가 감지 → 등록 → 실행 구조예요.