Promise와 함께 사용하는 웹 워커 기능 구현

13 Sep 2023

Promise

웹 워커(Worker)는 JavaScript에서 멀티 스레딩을 지원하기 위한 기술입니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. Promise는 비동기 작업의 결과를 다루기 위한 JavaScript 객체로, 웹 워커와 함께 사용하면 더욱 효과적인 비동기 처리를 할 수 있습니다.

웹 워커 기본 구성

웹 워커는 별도의 JavaScript 파일로 작성되어야 합니다. 다음은 웹 워커의 기본 구성입니다.

웹 워커 파일 생성: “worker.js”라는 파일을 생성하고 다음과 같이 내용을 작성합니다.

// worker.js
self.onmessage = function(event) {
  // 이벤트 메시지에서 데이터 추출
  const data = event.data;
  
  // 비동기 작업 수행
  // 작업이 완료되면 결과를 메인 스크립트로 전송
  self.postMessage("작업이 완료되었습니다.");
};

메인 스크립트에서 웹 워커 생성 및 데이터 전달: 메인 스크립트에서 웹 워커를 생성하고 데이터를 전달합니다.

// 메인 스크립트
// 웹 워커 생성
const worker = new Worker("worker.js");

// 웹 워커에 데이터 전달
worker.postMessage("작업을 시작합니다.");

// 웹 워커로부터 결과를 받아 처리
worker.onmessage = function(event) {
  const result = event.data;
  console.log(result); // 작업이 완료되었습니다.
};

Promise와 함께 사용하는 웹 워커

다음은 Promise와 함께 사용하는 웹 워커의 예시입니다.

// 웹 워커 파일에서 Promise 사용
// worker.js
self.onmessage = function(event) {
  const data = event.data;
  
  // Promise를 생성하여 비동기 작업을 수행
  const promise = new Promise(function(resolve, reject) {
    // 작업 수행
    // 성공 시 resolve 호출, 실패 시 reject 호출
    // 이 예시에서는 3초 후에 작업을 완료하고 결과를 전달
    setTimeout(function() {
      resolve("작업이 완료되었습니다.");
    }, 3000);
  });

  // Promise의 결과를 메인 스크립트로 전송
  promise.then(function(result) {
    self.postMessage(result);
  });
};

// Promise와 함께 사용하는 메인 스크립트
const worker = new Worker("worker.js");

worker.postMessage("작업을 시작합니다.");

worker.onmessage = function(event) {
  const result = event.data;
  console.log(result); // 작업이 완료되었습니다.
};

이 예시에서는 웹 워커 내에서 Promise를 사용하여 비동기 작업을 수행하고, 작업이 완료되면 resolve 함수를 호출하여 결과를 메인 스크립트로 전달합니다. 메인 스크립트에서는 웹 워커로부터 결과를 받아 처리하는 부분이 동일합니다.

웹 워커와 Promise를 함께 사용하면 비동기 작업을 좀 더 효율적으로 처리할 수 있으며, 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

#웹워커 #Promise