html5
CHAPTER 24 / 33
읽기 약 2분
FUNCTION
백그라운드 일꾼: Web Workers
핵심 개념
엄청 복잡하고 힘든 계산을 할 때, 화면이 멈추지 않도록 뒤에서 몰래 일하는 비서 같은 친구예요.
코드 분석
<p>백그라운드에서 숫자를 셉니다:</p>
<button onclick='startWorker()'>카운트 시작</button>
<button onclick='stopWorker()'>중지</button>
<div id='result'>0</div>
<script>
var w;
function startWorker() {
if (typeof(Worker) !== 'undefined') {
if (typeof(w) == 'undefined') {
w = new Worker(URL.createObjectURL(new Blob(['var i=0; function c(){i++; postMessage(i); setTimeout(c, 500);} c();'], {type: 'text/javascript'})));
}
w.onmessage = function(event) {
document.getElementById('result').innerHTML = event.data;
};
} else {
alert('Web Worker를 지원하지 않는 브라우저입니다.');
}
}
function stopWorker() {
if(w) {
w.terminate();
w = undefined;
}
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Web Worker 코드의 postMessage 직렬화 비용, Transferable Objects 미사용, 메모리 누수를 찾아 프로덕션 수준으로 개선해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
Web Workers로 무거운 이미지 필터, 큰 JSON 파싱, 암호화 작업 3개를 메인 스레드 분리 실전 코드로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Worker 사용 코드 전체를 분석해서 메인 스레드 차단 시간, 메시지 오버헤드, 메모리 사용량을 종합 점검해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년에 Web Workers vs SharedArrayBuffer vs WebAssembly가 각각 어떤 영역에 살아남았는지 실무 트렌드를 솔직히 알려줘.
⭐ 이것만 기억하세요
백그라운드 일꾼: Web Workers는 이 3가지만 확실히 잡으세요
1.무거운 계산을 메인 스레드에서 실행하면 UI가 멈추고 사용자는 버튼 클릭조차 할 수 없습니다
2.Web Worker는 별도 스레드에서 JS를 실행하고, postMessage로 메인 스레드와 데이터를 주고받습니다
3.다음 챕터에서 서버와 실시간 양방향 통신을 여는 WebSocket을 배웁니다
공유하기
진행도 24 / 33