웹 워커는 메인 스레드와 별개의 백그라운드 스레드에서 JavaScript를 실행하는 API입니다. 무거운 연산을 워커에서 처리하면 UI가 블로킹되지 않아 사용자 경험이 향상됩니다. 워커는 DOM에 직접 접근할 수 없으며,
postMessage를 통해 메인 스레드와 통신합니다.01 · Concept
웹 워커 (Web Worker)
웹 워커는 메인 스레드와 별도의 백그라운드 스레드에서 스크립트를 실행할 수 있게 해주는 API입니다.
JavaScript는 기본적으로 싱글 스레드입니다. 무거운 연산이 메인 스레드에서 실행되면 UI가 멈추게 됩니다. Web Worker를 사용하면 별도 스레드에서 연산을 수행하여 UI 응답성을 유지할 수 있습니다. postMessage를 통해 메인 스레드와 데이터를 주고받습니다.
02 · Interactive Demo
메인 스레드 vs 워커 스레드 비교
같은 연산을 메인 스레드와 워커에서 실행하여 UI 블로킹 여부를 비교하세요.
Thread Diagram
Main ThreadIDLE
UI 렌더링, 이벤트 처리, DOM 조작
UI Responsiveness
0
카운터 (50ms)
대기 중
// 메인 스레드에서 피보나치 계산
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
fibonacci(38); // UI가 멈춤!03 · Code Example
코드 예시
실제 코드로 동작 원리를 확인하세요.
// worker.js
self.onmessage = function(event) {
const { type, data } = event.data;
if (type === 'heavy-calc') {
// 무거운 계산을 워커에서 수행
const result = data.reduce((sum, n) => {
for (let i = 0; i < 1000000; i++) { sum += Math.sqrt(n); }
return sum;
}, 0);
self.postMessage({ type: 'result', data: result });
}
};
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ type: 'heavy-calc', data: [1, 2, 3, 4, 5] });
worker.onmessage = (e) => console.log('결과:', e.data);
worker.onerror = (e) => console.error('에러:', e.message);04 · Interview Point
면접 핵심 질문
postMessage()로 메시지를 전송하고,onmessage 이벤트로 수신합니다. 데이터는 기본적으로 구조화된 복제(Structured Clone) 방식으로 복사되어 전달됩니다. 대용량 데이터의 경우 Transferable Objects(ArrayBuffer 등)를 사용하면 복사 없이 소유권을 이전하여 성능을 높일 수 있습니다.Dedicated Worker는 생성한 스크립트에서만 사용 가능한 1:1 전용 워커입니다. Shared Worker는 같은 origin의 여러 탭/윈도우에서 공유할 수 있어 탭 간 통신에 유용합니다. Service Worker는 네트워크 프록시 역할을 하며, 오프라인 캐싱, 푸시 알림, 백그라운드 동기화를 지원합니다. 페이지와 독립적인 생명주기를 가집니다.