[책] 자바스크립트 코드 레시피 278 - 212일차

백그라운드에서 스크립트 작업하기

• 부하가 큰 처리를 실행하고 싶을 때

구문

new Worker(파일주소)

설명

자바스크립트는 메인 스레드로 동작하여, 부하가 큰 작업을 실행하면 처리 작업 중에는 조작이 불가능합니다. 자바스크립트 처리가 UI를 담당하는 메인 스레드를 멈추게 하기 때문입니다. 웹 워커(Web Worker)를 사용하면 이 문제를 해결할 수 있습니다. 웹 워커는 메인 스레드의 자바스크립트와 분리되어 실행되며, 부하가 큰 계산 작업 등을 처리할 때 유용합니다. 웹 워커는 메인 스크립트와 스레드가 다르므로 DOM 조작이 불가능하며, 페이지가 열려 있을 때만 실행된다는 점에 주의합시다. 웹 워커와 메인 스레드는 postMessage()를 사용해 메시지를 전송하고, onmessage 이벤트 핸들러로 데이터를 반환하며, 해당 데이터는 onmessage 이벤트 data 속성에 보관됩니다.

실습

index.html

<div class="wrap">
  <input type="number" value="1" id="numA"> +
  <input type="number" value="2" id="numB"> =
  <span class="result"></span>
</div>
<button>계산하기</button>

---

스크립트 파일 2개 생성하여 작업합니다.
script.js

const numA = document.querySelector('#numA');
const numB = document.querySelector('#numB');
const result = document.querySelector('.result');
const btn = document.querySelector('button');
const worker = new Worker('212_worker.js');

btn.addEventListener('click', () => {
  worker.postMessage([Number(numA.value), Number(numB.value)]);
  console.log('[메인스크립트] worker로 데이터 전송');
});

worker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('[메인스크립트] worker에서 메시지 가져오기');
}

---

script.js

onmessage = (e) => {
  console.log('[worker] 메인스크립트의 데이터 가져오기');
  const result = e.data[0] + e.data[1];
  console.log('[worker] 메인스크립트의 데이터 전송');
  postMessage(result);
}