JavaScript의 WebWorker

 

JavaScript Web Worker는 웹 애플리케이션에서 백그라운드 스레드에서 동작하는 스크립트 작업을 처리하기 위한 기술입니다. 이를 통해 병렬 처리를 통한 성능 향상과 웹 애플리케이션의 반응성 향상을 달성할 수 있습니다.

Web Worker는 브라우저의 주 스레드와 독립적으로 실행되는 백그라운드 스레드입니다. 이 스레드는 웹 애플리케이션과는 별도로 실행되므로 메인 스레드의 작업과는 분리되어 있습니다. 이로 인해 Web Worker는 CPU 집약적인 작업이나 긴 시간이 걸리는 작업을 처리하는 데 적합합니다.

Web Worker를 사용하기 위해서는 다음과 같은 단계를 따릅니다:

1. 워커 스크립트 파일 생성: 웹 워커로 실행할 JavaScript 코드를 포함하는 별도의 스크립트 파일을 생성합니다.
2. 워커 객체 생성: new Worker() 생성자를 사용하여 워커 객체를 생성하고, 워커 스크립트 파일의 경로를 전달합니다.
3. 메인 스레드와의 메시지 교환: postMessage() 메서드를 사용하여 메인 스레드와 워커 스레드 사이에서 메시지를 교환합니다. 워커 스레드는 onmessage 이벤트 핸들러를 사용하여 메시지를 수신하고 처리합니다.
4. 워커 스크립트 실행: 워커 객체의 onmessage 이벤트 핸들러에서 수신된 메시지를 처리하고 결과를 계산합니다. 결과는 다시 postMessage()를 사용하여 메인 스레드로 전달됩니다.
5. 워커 종료: 작업이 완료되면 close() 메서드를 호출하여 워커를 종료합니다.

아래는 Web Worker를 사용한 간단한 예제입니다:

예제)

main.js

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

worker.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};

worker.postMessage('Hello from main thread!');

worker.js

self.onmessage = function(event) {
  console.log('Received message from main thread:', event.data);
  
  const result = event.data.toUpperCase();
  
  self.postMessage(result);
};

 

위 예제에서 main.js는 메인 스레드에서 실행되는 코드이고, worker.js는 워커 스레드에서 실행되는 코드입니다.

1. main.js 파일:
   • const worker = new Worker('worker.js');: 워커 객체를 생성합니다. 워커 스크립트 파일인 worker.js를 인자로 전달하여 워커를 생성합니다.
   • worker.onmessage: 워커에서 전달된 메시지를 수신하기 위한 이벤트 핸들러입니다. 워커로부터 메시지가 도착하면 실행됩니다.
   • worker.postMessage('Hello from main thread!');: 메인 스레드에서 워커로 메시지를 전송합니다. 문자열 'Hello from main thread!'가 워커로 전달됩니다.
2. worker.js 파일:
   • self.onmessage: 메인 스레드로부터 전달된 메시지를 수신하기 위한 이벤트 핸들러입니다. 메인 스레드로부터 메시지가 도착하면 실행됩니다.
   • const result = event.data.toUpperCase();: 메시지로부터 전달된 데이터를 대문자로 변환하여 result 변수에 저장합니다.
   • self.postMessage(result);: 워커에서 메인 스레드로 결과를 전달합니다. result 변수에 저장된 결과가 메인 스레드로 전송됩니다.

따라서, 메인 스레드에서 'Hello from main thread!'라는 메시지를 워커로 전달하면 워커는 이를 대문자로 변환한 후 메인 스레드로 다시 전달합니다. 메인 스레드에서는 워커로부터 받은 결과를 콘솔에 출력합니다.