Web Worker란?

Web Worker는 웹 컨텐츠를 위해서 Background Thread 에서 스크립트를 실행할 간편한 방법을 제공합니다. Worker Thread는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 출처 - https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Using_web_workers

자바스크립트는 Single Thread로 작동하지만, 브라우저는 그렇지 않다.

따라서 브라우저에서 처리되는 네트워크 통신이나 I/O는 서로 다른 Thread에서 작동한다.

여기서 Web Worker를 통해 브라우저의 렌더링을 담당하는 Main Thread를 방해하지 않고 별도의 Thread를 생성하여 자바스크립트를 실행할 수 있다.

Web Worker 주의점

Web Worker는 위에서도 말했듯이 Main Thread와는 별개의 Thread를 가진다.

따라서, Worker Thread는 Main Thread가 가지는 전역 스코프와는 다른 스코프를 가지게 된다.

어떻게 다른지 로그를 남겨 확인해보자.

<aside> 💡 self는 전역 스코프 객체에 접근하는 키워드이다. https://geundung.dev/101

</aside>

// worker를 호출하는 컴포넌트
// components/Callee.tsx
import SimpleWorker from 'workers/simple.worker';

const Callee = () => {
	
	useEffect(() => {
		const simpleWorker = new SimpleWorker();
		
		simpleWorker.postMessage('call worker');

		console.log('Main Thread의 self', self);
	}, []);
}

// worker
// simple.worker.ts
self.addEventListener('message', (e) => {
		console.log('Worker Thread의 self', self);
});

Main Thread의 전역 스코프 객체는 Window 객체이다.

Worker Thread의 전역 스코프 객체는 DedicatedWorkerGlobalScope 객체이다.

이제 주의할 점이 나오는데, Web Worker(**Worker Thread)**의 스코프에서는 할 수 없는 것들이 몇가지 있다.