[Web] Web Worker 웹 워커

안녕하세요.

오늘은 웹 워커에 대해서 알아보도록 하겠습니다.

 

Javascript는 싱글 스레드로 동작하지만, 저희는 Web API와 Event Loop를 통해 멀티 스레드인 것 처럼 편리하게 사용하고 있습니다.

그런데 여기서 Web API를 사용하지 않고 시간이 많이 걸리는 작업은 어떻게 처리할 수 있을까? 하는 의문이 생깁니다.

이 문제를 해결할 수 있는 것이 바로 웹 워커입니다.

🔸 Web Worker란?

메인 스레드와 분리된 별도의 스레드에서 스크립트 연산을 수행할 수 있는 기술입니다.

웹 워커를 사용하면 메인 스레드가 멈추거나 느려지지 않고 동작할 수 있는 장점이 있습니다.

🔸 Web Worker 사용 이유

Web API의 일부 함수는 이미 멀티 스레드로 처리가 되는 것이 있습니다. 하지만 사용자가 직접 데이터를 처리하는 부분은 싱글 스레드에서 동작하므로 데이터 처리가 많아질수록 병목 현상이 생기게 됩니다.

이 병목 현상을 해결하기 위해 웹 워커를 사용할 수 있습니다.

🔸 Web Worker 사용 방법

웹 워커는 new Woker로 생성할 수 있으며, 메인 스레드와 웹 워커는 메시지 방식으로 통신하며 데이터를 주고 받습니다. 

 

worker.js

var n = 'done';
// 
// 많은 시간이 소요되는 작업을 수행
//
postMessage(n);

 

main.js

if( window.Worker ) {
    var worker = new Worker('worker.js');
    worker.onmessage = (event) => {
        console.log(event.data);
        // 'done'
        worker.terminate();
    };
}

 

1. 메인 스레드에서 new Worker('worker.js')로 워커 스레드를 만든다.

2. 메인 스레드에서 worker.onmessage에 worker의 메시지를 전달받기 위한 이벤들 핸들러를 등록한다.

3. 워커 스레드에서 worker.js 작업을 처리한 후, postMessage로 데이터를 메인 스레드로 전달한다.

4. worker.terminate로 워커 스레드를 종료한다.

 

 

주의할 점

1. 메인 스레드와 워커 스레드에서 주고 받는 데이터는 공유되는 것이 아니기 때문에, 복사하여 전달해야합니다.

2. 워커 스레드에서 에러가 발생하면 메인 스레드까지 전파되지 않습니다. 필요할 경우, onerror 메서드를 이용하여 ErrorEvent를 수신할 수 있습니다.

3. 웹 워커는 메인 스레드의 window와는 다른 global scope에서 동작합니다. 그래서 DOM을 직접 조작할 수 없고, window의 일부 메서드와 속성은 사용할 수 없습니다.

4. 메인 스레드와 웹 워커 간 데이터 전송 시에는 비용이 발생합니다. 따라서 웹 워커를 사용하는 것이 더 빠를 것인지에 대해 판단하고 사용해야 합니다.

 

🔸 Web Worker 종류

1. Dedicated Worker

2. Shared Worker

 

Dedicated Worker

 : DedicatedWorkerGlobalScope을 가지며, Worker를 생성한 스크립트에서만 접근할 수 있음.

   

Shared Worker

 : SahredWorkerGlobalScope을 가지며, 여러 스크립트(window, worker, iframe)에서 접근 가능함.

 

 

오늘은 웹 워커에 대해서 알아보았습니다. 프론트에서 복잡한 계산이 필요한 경우에 유용하게 사용할 수 있을 것 같습니다. 

틀린 내용이나 고칠 점이 있으면 댓글 남겨주세요.

 

감사합니다!

 

 

출처 

https://tech.kakao.com/2021/09/02/web-worker/

https://pks2974.medium.com/web-worker-간단-정리하기-4ec90055aa4d