Web Worker란 무엇인가?

Web Worker 개념

Web Worker는 웹 애플리케이션에서 메인 스레드와 별도로 백그라운드에서 자바스크립트 코드를 실행할 수 있는 방법을 제공합니다. 이를 통해 CPU 집약적인 작업을 메인 스레드의 렌더링이나 사용자 인터페이스(UI) 처리에 영향을 주지 않고 수행할 수 있습니다.

웹 브라우저의 자바스크립트는 기본적으로 단일 스레드로 동작합니다. 이로 인해 무거운 계산 작업이나 데이터 처리 로직이 실행될 경우 페이지가 멈추거나 느려지는 현상이 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Web Worker를 사용합니다.

---

Web Worker의 주요 특징

1. 백그라운드 작업 처리: 무거운 연산이나 대용량 데이터 처리 작업을 백그라운드에서 실행하여 UI의 부드러운 동작 유지
2. 멀티스레드 지원: 메인 스레드와 별도의 스레드에서 코드가 실행됨
3. 비동기 메시지 통신: postMessage()와 onmessage 이벤트 리스너를 통해 메인 스레드와 데이터를 주고받을 수 있음
4. DOM 접근 불가: Web Worker는 브라우저의 DOM에 직접 접근할 수 없음 (렌더링 관련 작업은 메인 스레드에서 처리해야 함)

---

Web Worker 기본 사용법

1. Worker 파일 생성

먼저 worker.js라는 파일을 만듭니다.

// worker.js
self.onmessage = function(event) {
    const receivedData = event.data;
    const result = receivedData * 2; // 받은 값을 2배로 처리
    self.postMessage(result); // 결과를 메인 스레드로 반환
};

• self는 워커 자체를 가리키며, onmessage 이벤트 리스너를 통해 메인 스레드로부터 메시지를 수신합니다.
• postMessage()를 통해 메인 스레드로 처리된 데이터를 다시 전달합니다.

2. 메인 스레드에서 Worker 사용

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log('Worker로부터 받은 결과:', event.data);
};

worker.postMessage(10); // Worker로 값 전달

• new Worker('worker.js')로 워커 인스턴스를 생성합니다.
• postMessage(10)을 사용해 worker.js로 데이터를 보냅니다.
• worker.onmessage를 통해 백그라운드에서 처리된 결과를 수신합니다.

---

Web Worker의 실제 활용 예제

대규모 데이터 처리

예를 들어, 대규모 배열에서 소수를 찾는 작업은 CPU 부하가 큰 작업입니다. 이 작업을 Web Worker로 처리해 보겠습니다.

1. Worker 파일 (primeWorker.js)

self.onmessage = function(event) {
    const maxNumber = event.data;
    const primeNumbers = [];

    function isPrime(number) {
        if (number < 2) return false;
        for (let i = 2; i <= Math.sqrt(number); i++) {
            if (number % i === 0) return false;
        }
        return true;
    }

    for (let i = 2; i <= maxNumber; i++) {
        if (isPrime(i)) {
            primeNumbers.push(i);
        }
    }

    self.postMessage(primeNumbers);
};

2. 메인 스레드

const primeWorker = new Worker('primeWorker.js');

primeWorker.onmessage = function(event) {
    console.log('찾은 소수 목록:', event.data);
};

primeWorker.postMessage(100000); // 10만까지의 소수 찾기 요청

이렇게 하면 메인 스레드가 멈추지 않고 사용자 인터페이스가 부드럽게 유지됩니다.

---

Web Worker의 한계와 주의사항

1. DOM 접근 불가: Web Worker는 DOM 요소를 직접 조작할 수 없습니다. DOM 업데이트는 반드시 메인 스레드에서 처리해야 합니다.
2. 파일 경로 제한: Worker는 동일 출처 정책(same-origin policy)을 따르므로 다른 도메인의 스크립트는 로드할 수 없습니다.
3. 비용이 큰 초기화: Worker 생성에는 비용이 들기 때문에 너무 많은 워커를 생성하는 것은 오히려 성능을 저하시킬 수 있습니다.
4. 복잡한 데이터 전송: 데이터는 직렬화되어 전송되므로 대용량 데이터를 빈번히 주고받으면 성능 저하가 발생할 수 있습니다.

---

Shared Worker와 Service Worker

• Shared Worker: 여러 탭이나 윈도우에서 공유할 수 있는 워커입니다. 예를 들어 여러 탭에서 동일한 데이터 소스를 공유해야 할 때 유용합니다.
• Service Worker: 오프라인 캐시 관리, 푸시 알림 등 브라우저와 네트워크 간의 프록시 역할을 수행하는 워커입니다.

---

Web Worker와 멀티스레딩의 차이점

Web Worker는 자바스크립트에서 제한적으로 제공되는 멀티스레딩 기능과 유사하지만, 진정한 멀티스레딩과는 다소 차이가 있습니다. Web Worker는 메인 스레드와 별도의 스레드에서 동작하지만, 스레드 간의 직접적인 메모리 공유는 불가능하며 오직 메시지 기반 통신으로만 데이터를 주고받을 수 있습니다.

---

결론

Web Worker는 자바스크립트의 싱글 스레드 한계를 극복하고, 무거운 작업을 효율적으로 처리할 수 있는 강력한 도구입니다. 특히 대규모 데이터 처리, 이미지 처리, 암호화 작업 등 CPU 집약적인 작업을 수행할 때 매우 유용합니다. 다만 DOM 접근 불가, 초기화 비용 등 한계점을 잘 이해하고 사용해야 합니다.