Web Workers

웹 브라우저의 멀티 스레딩 구현

JavaScript는 기본적으로 싱글 스레드(Single-threaded) 언어이므로, 복잡한 연산이나 대량의 데이터를 처리할 때 메인 스레드(UI 스레드)가 블로킹되어 화면이 멈추거나 버벅이는 현상이 발생합니다.

Web Workers API는 백그라운드 스레드를 생성하여 스크립트를 독립적으로 실행할 수 있게 해줍니다. 무거운 연산을 워커에 맡기고 UI는 끊김 없이 부드럽게 유지할 수 있습니다. 단, 워커 스레드는 DOM 요소에 직접 접근할 수 없으며 메인 스레드와 postMessage를 통해 데이터를 주고받아야 합니다.

// 메인 스크립트 (UI 스레드)
console.log("메인: 워커 스레드 생성 중...");
/*
const worker = new Worker('worker.js');

// 워커로 데이터 전송
worker.postMessage({ command: 'start', data: [1, 2, 3, 4, 5] });

// 워커로부터 결과 수신
worker.onmessage = function(event) {
  console.log("메인: 워커로부터 연산 결과 수신 ->", event.data.result);
};
*/

// 백그라운드 워커 스크립트 예시 (worker.js)
console.log(`
[worker.js 내부 코드 구조]
self.onmessage = function(event) {
  const { command, data } = event.data;
  
  if (command === 'start') {
    // 무거운 연산 시뮬레이션
    let sum = data.reduce((a, b) => a + b, 0);
    // 결과를 메인 스레드로 반환
    self.postMessage({ result: sum });
  }
};
`);