JavaScript 동작 원리 - 버퍼, 스레드, 콜스택, 이벤트 루프

1. 버퍼 (Buffer)

버퍼란?

데이터를 임시로 저장해두는 공간이다.
데이터를 보내는 쪽과 받는 쪽의 속도 차이가 있을 때, 중간에서 데이터를 모아두었다가 한꺼번에 전달하는 역할을 한다.

동작 원리

[데이터] → (조금씩 꺼내서 버퍼로 보냄) → [버퍼] → (버퍼가 채워지면 전송) → [데이터 처리]

버퍼의 위치

버퍼는 보내는 쪽과 받는 쪽 모두에 있을 수 있다.

종류	설명	예시
송신 버퍼	데이터를 모아서 한꺼번에 전송	프린터로 문서 보낼 때
수신 버퍼	빠르게 들어오는 데이터를 받아두고 처리	유튜브 영상 미리 받아두기

버퍼의 목적은 속도 차이 해결이다.

속도가 다른 두 지점 사이 어디든 필요하면 버퍼가 생긴다.

예시

• 유튜브: 서버에서 영상 데이터를 미리 받아 버퍼에 저장 → 끊김 없이 재생 (재생 바보다 빨간 바가 앞서가는 이유)
• 프린터: 문서를 버퍼에 저장 후 프린터 속도에 맞춰 전송
• 음악 스트리밍: 네트워크가 불안정해도 끊기지 않게 미리 저장

---

2. 프로세스 & 스레드

프로세스 (Process)

실행 중인 프로그램 하나. (예: 크롬 브라우저, 카카오톡)

스레드 (Thread)

프로세스 안에서 실제로 일을 처리하는 단위.

컴퓨터
└── 프로세스 (실행 중인 프로그램)
    ├── 스레드 1
    ├── 스레드 2
    └── 스레드 3

싱글 스레드 vs 멀티 스레드

	싱글 스레드	멀티 스레드
프로세스당 스레드 수	1개	여러 개
구조	단순함	복잡함
속도	상대적으로 느림	빠름
단점	-	동시에 같은 데이터 접근 시 충돌 가능 (동시성 문제)

싱글 스레드 ≠ 싱글 프로세스

싱글 스레드는 "프로세스 하나당 스레드가 하나"라는 의미이지, 프로세스 자체가 하나라는 뜻은 아니다.

프로세스 A └── 스레드 1개
프로세스 B └── 스레드 1개
프로세스 C └── 스레드 1개

→ 싱글 스레드 프로세스를 여러 개 띄울 수 있다. (ex. Node.js)

멀티 스레드 + 멀티 프로세스

프로세스 여러 개를 띄우고, 각 프로세스가 멀티 스레드면 수십 개의 스레드가 동시에 존재할 수 있다.

프로세스 A ├── 스레드 1 ├── 스레드 2 └── 스레드 3
프로세스 B ├── 스레드 1 ├── 스레드 2 └── 스레드 3

단, 프로세스끼리는 독립적이라 서로의 데이터를 직접 공유할 수 없다.

ex. 크롬 브라우저

크롬은 탭마다 별도의 프로세스를 띄우고, 각 프로세스 안에 여러 스레드가 있다.
→ 탭 하나가 뻗어도 다른 탭이 멀쩡한 이유!

---

3. 콜스택 & 이벤트 루프 (JavaScript)

콜스택 (Call Stack)

자바스크립트 코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 스택 구조.

• 함수 호출 시 → 스택에 추가(push)
• 함수 실행 완료 시 → 스택에서 제거(pop)

이벤트 루프 (Event Loop)

콜스택과 콜백 큐(태스크 큐)를 모니터링하면서 비동기 작업을 관리한다.
콜스택이 비어있을 때 콜백 큐의 작업을 콜스택으로 이동시킨다.

setTimeout은 정확하지 않다

setTimeout(fn, 1000)의 실제 의미는

"1초 후에 실행해줘"
→ "콜스택이 비었을 때, 1초는 지났으면 실행해줘"

콜스택이 바쁘면 콜백 큐는 그냥 밀려서 늦게 실행된다.

setTimeout(() => console.log("타임아웃!"), 1000);

// 3초 걸리는 무거운 작업
for (let i = 0; i < 10000000000; i++) {}

console.log("반복문 끝");

// 실행 결과:
// 1초 지남 → 콜백 큐에서 대기 중...
// 3초 지남 → "반복문 끝" 출력 (콜스택 비워짐)
//           → 그제서야 "타임아웃!" 출력 ← 1초가 아닌 3초 후!

결론

• setTimeout은 "최소 N초"를 보장할 뿐, 정확한 시간을 보장하지 않는다.
• 이것은 자바스크립트가 싱글 스레드이기 때문에 생기는 근본적인 한계다.