Web Workers

Web Workers는 JavaScript 코드를 백그라운드 스레드에서 실행할 수 있게 해주는 Web API입니다. 이를 통해 무거운 연산을 별도 스레드에서 처리하여, 메인 스레드(UI 스레드)가 차단되거나 느려지지 않도록 합니다.

메인 스레드와 워커 스레드는 메시지 패싱(message passing) 시스템을 통해 데이터를 주고받으며, 데이터는 공유되지 않고 복사되어 전달됩니다. 이는 race condition을 방지합니다.

해당 개념이 필요한 이유

• UI 블로킹 방지: 복잡한 계산, 대용량 데이터 처리, 이미지/비디오 인코딩 등 무거운 작업을 메인 스레드에서 실행하면 UI가 멈추거나 버벅거립니다. Web Workers를 사용하면 UI가 끊김 없이 부드럽게 동작합니다
• 멀티 코어 활용: 현대 CPU는 여러 코어를 가지고 있지만, JavaScript는 기본적으로 싱글 스레드입니다. Web Workers를 사용하면 여러 코어를 활용하여 병렬 처리가 가능합니다
• 사용자 경험 개선: 긴 작업 중에도 사용자가 페이지를 스크롤하거나 버튼을 클릭할 수 있어, 반응성이 뛰어난 애플리케이션을 만들 수 있습니다

AS-IS: 메인 스레드에서 무거운 작업 실행

// 메인 스레드가 차단됨
function calculatePrimes(max) {
  const primes = [];
  for (let i = 2; i < max; i++) {
    let isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}
 
// UI가 멈춤 (계산이 끝날 때까지)
const result = calculatePrimes(100000);
console.log(result);

sequenceDiagram
    autonumber
    participant User
    participant MainThread as Main Thread<br/>(UI + 계산)

    User->>MainThread: 버튼 클릭 (무거운 계산 시작)
    Note over MainThread: 계산 중...<br/>UI 블로킹!
    User->>MainThread: 스크롤 시도
    Note over User: ❌ UI 반응 없음
    Note over MainThread: 계산 완료
    MainThread->>User: 결과 표시

TO-BE: Web Workers로 분리

// main.js - 메인 스레드
const worker = new Worker('worker.js');
 
worker.postMessage({ max: 100000 });
 
worker.onmessage = function(event) {
  console.log('계산 완료:', event.data);
};
 
// UI는 계속 반응함

// worker.js - 워커 스레드
onmessage = function(event) {
  const { max } = event.data;
 
  const primes = calculatePrimes(max);
 
  postMessage(primes);
};
 
function calculatePrimes(max) {
  const primes = [];
  for (let i = 2; i < max; i++) {
    let isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}

sequenceDiagram
    autonumber
    participant User
    participant MainThread as Main Thread<br/>(UI)
    participant Worker as Worker Thread<br/>(계산)

    User->>MainThread: 버튼 클릭
    MainThread->>Worker: postMessage({ max: 100000 })
    Note over Worker: 계산 중...
    User->>MainThread: 스크롤 시도
    Note over User: ✅ UI 정상 반응
    Note over Worker: 계산 완료
    Worker->>MainThread: postMessage(result)
    MainThread->>User: 결과 표시

Web Workers의 종류

종류	설명	사용 사례
Dedicated Workers	단일 스크립트에서만 사용. 가장 일반적인 형태	특정 페이지의 백그라운드 작업
Shared Workers	여러 창, 탭, iframe에서 공유 가능. 같은 도메인 필요	여러 탭 간 데이터 공유, 중앙 집중식 처리
Service Workers	앱-브라우저-네트워크 사이의 프록시 역할. 오프라인 지원, 푸시 알림	PWA, 오프라인 경험, 백그라운드 동기화

Dedicated Worker 사용법

Worker 생성 및 메시지 전송

메인 스레드 (main.js)

// 1. Worker 생성
const worker = new Worker('worker.js');
 
// 2. 워커에게 메시지 전송
worker.postMessage({
  command: 'start',
  data: [1, 2, 3, 4, 5]
});
 
// 3. 워커로부터 메시지 수신
worker.onmessage = function(event) {
  console.log('워커 결과:', event.data);
  // event.data = { status: 'complete', result: 15 }
};
 
// 4. 에러 처리
worker.onerror = function(error) {
  console.error('워커 에러:', error.message);
  console.error('파일:', error.filename);
  console.error('라인:', error.lineno);
};
 
// 5. 워커 종료
worker.terminate();

워커 스레드 (worker.js)

// 메인 스레드로부터 메시지 수신
onmessage = function(event) {
  const { command, data } = event.data;
 
  if (command === 'start') {
    // 무거운 작업 수행
    const sum = data.reduce((acc, val) => acc + val, 0);
 
    // 메인 스레드로 결과 전송
    postMessage({
      status: 'complete',
      result: sum
    });
  }
};
 
// 워커 자체 종료
// close();

addEventListener를 사용한 방법

// 메인 스레드
const worker = new Worker('worker.js');
 
worker.addEventListener('message', function(event) {
  console.log('메시지 수신:', event.data);
});
 
worker.addEventListener('error', function(error) {
  console.error('에러 발생:', error);
});
 
worker.postMessage('Hello Worker');

// 워커 스레드
addEventListener('message', function(event) {
  console.log('메인 스레드로부터:', event.data);
  postMessage('Hello Main Thread');
});

Worker의 주요 특징 4가지

1. 메시지 패싱 시스템

메인 스레드와 워커 스레드는 직접적인 데이터 공유 없이 postMessage()와 onmessage를 통해 통신합니다. 데이터는 복사되어 전달되므로 race condition이 발생하지 않습니다.

// 메인 스레드
const data = { numbers: [1, 2, 3] };
worker.postMessage(data);
 
// 원본 수정해도 워커에게 영향 없음
data.numbers.push(4);

// 워커 스레드
onmessage = function(event) {
  const receivedData = event.data;
  // receivedData.numbers = [1, 2, 3] (복사본)
 
  receivedData.numbers.push(10);
  postMessage(receivedData);
};

메시지 흐름:

Main Thread              Worker Thread
    |                        |
    |--- postMessage() ----->|
    |                    onmessage
    |                  [Process]
    |<-- postMessage() -------|
  onmessage                   |

2. Worker Scope와 제한 사항

Worker는 별도의 전역 스코프를 가지며, 메인 스레드의 일부 API에 접근할 수 없습니다.

❌ Worker에서 사용 불가능한 것

• DOM 조작: document, window, parent 접근 불가
• DOM API: alert(), confirm(), prompt()
• 일부 Window 메서드/속성

// ❌ Worker에서 불가능
onmessage = function(event) {
  document.getElementById('result').textContent = 'Done'; // 에러!
  alert('Finished'); // 에러!
};

✅ Worker에서 사용 가능한 것

• 표준 JavaScript: String, Array, Object, JSON, Math
• 타이머: setTimeout(), setInterval()
• 네트워크 요청: fetch(), XMLHttpRequest
• WebSockets
• importScripts(): 외부 스크립트 로딩

// ✅ Worker에서 가능
onmessage = async function(event) {
  // fetch 사용 가능
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
 
  // JSON 처리 가능
  const processed = JSON.stringify(data);
 
  postMessage(processed);
};

Worker Global Scope 종류

Scope	설명
DedicatedWorkerGlobalScope	Dedicated Worker의 전역 스코프
SharedWorkerGlobalScope	Shared Worker의 전역 스코프
ServiceWorkerGlobalScope	Service Worker의 전역 스코프
WorkerGlobalScope	모든 워커가 상속하는 기본 스코프

3. importScripts()로 외부 스크립트 로딩

Worker 내부에서 여러 JavaScript 파일을 로드할 수 있습니다.

// worker.js
importScripts('utils.js', 'math-helpers.js', 'data-processor.js');
 
// 이제 로드된 파일의 함수들을 사용 가능
onmessage = function(event) {
  const result = calculateSum(event.data); // utils.js에서 정의
  postMessage(result);
};

특징:

• 동기적으로 로드됨 (순서대로 실행)
• 여러 파일을 한 번에 로드 가능
• 로드 실패 시 워커가 종료됨

4. 워커에서 워커 생성 가능

Worker는 새로운 워커를 생성할 수 있습니다. 단, **같은 origin(출처)**에 있어야 합니다.

// worker.js
onmessage = function(event) {
  // 서브 워커 생성
  const subWorker = new Worker('sub-worker.js');
 
  subWorker.postMessage(event.data);
 
  subWorker.onmessage = function(subEvent) {
    // 메인 스레드로 결과 전달
    postMessage(subEvent.data);
  };
};

실제 사용 사례

1. 이미지 처리

// main.js
const worker = new Worker('image-processor.js');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
 
// 이미지 데이터 가져오기
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
worker.postMessage({
  command: 'process',
  imageData: imageData
});
 
worker.onmessage = function(event) {
  // 처리된 이미지 데이터로 캔버스 업데이트
  ctx.putImageData(event.data.imageData, 0, 0);
};

// image-processor.js
onmessage = function(event) {
  const { command, imageData } = event.data;
 
  if (command === 'process') {
    const data = imageData.data;
 
    // 그레이스케일 변환 (무거운 작업)
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg;     // Red
      data[i + 1] = avg; // Green
      data[i + 2] = avg; // Blue
    }
 
    postMessage({ imageData: imageData });
  }
};

2. 대용량 JSON 파싱

// main.js
const worker = new Worker('json-parser.js');
 
fetch('large-data.json')
  .then(response => response.text())
  .then(jsonString => {
    worker.postMessage({ json: jsonString });
  });
 
worker.onmessage = function(event) {
  const parsedData = event.data;
  console.log('파싱 완료:', parsedData);
  updateUI(parsedData);
};

// json-parser.js
onmessage = function(event) {
  const { json } = event.data;
 
  // 대용량 JSON 파싱 (메인 스레드 블로킹 없음)
  const parsed = JSON.parse(json);
 
  // 추가 처리
  const processed = parsed.items.map(item => ({
    id: item.id,
    name: item.name,
    processed: true
  }));
 
  postMessage(processed);
};

3. 실시간 데이터 분석

// main.js
const worker = new Worker('analytics.js');
 
// 주기적으로 데이터 전송
setInterval(() => {
  const sensorData = readSensorData();
  worker.postMessage({ data: sensorData });
}, 100);
 
worker.onmessage = function(event) {
  const { analysis } = event.data;
  updateDashboard(analysis);
};

// analytics.js
let dataBuffer = [];
 
onmessage = function(event) {
  dataBuffer.push(event.data.data);
 
  if (dataBuffer.length >= 10) {
    // 통계 분석
    const avg = dataBuffer.reduce((a, b) => a + b, 0) / dataBuffer.length;
    const max = Math.max(...dataBuffer);
    const min = Math.min(...dataBuffer);
 
    postMessage({
      analysis: { avg, max, min }
    });
 
    dataBuffer = [];
  }
};

4. 암호화/복호화

// main.js
const worker = new Worker('crypto-worker.js');
 
worker.postMessage({
  command: 'encrypt',
  text: 'Sensitive data',
  key: 'secret-key'
});
 
worker.onmessage = function(event) {
  console.log('암호화 완료:', event.data.encrypted);
};

// crypto-worker.js
importScripts('crypto-lib.js'); // 외부 암호화 라이브러리
 
onmessage = function(event) {
  const { command, text, key } = event.data;
 
  if (command === 'encrypt') {
    const encrypted = performEncryption(text, key);
    postMessage({ encrypted: encrypted });
  }
};

에러 처리 및 디버깅

에러 핸들러

// 메인 스레드
worker.onerror = function(error) {
  console.error('워커 에러 발생');
  console.error('메시지:', error.message);
  console.error('파일:', error.filename);
  console.error('라인 번호:', error.lineno);
 
  // 에러 복구 로직
  worker.terminate();
  worker = new Worker('worker.js'); // 재시작
};

Worker 종료

// 메인 스레드에서 종료
worker.terminate();
console.log('워커 종료됨');
 
// 워커가 종료되면 더 이상 메시지를 받을 수 없음

// 워커 스레드 내부에서 자체 종료
onmessage = function(event) {
  if (event.data.command === 'shutdown') {
    close(); // 워커 자체 종료
  }
};

참고 문서

• MDN - Web Workers API
• MDN - Using Web Workers
• HTML Specification - Workers