워커(Worker)는 브라우저 안에서 메인 자바스크립트 실행 흐름(=메인 스레드)과는 분리된 별도의 스레드에서 코드를 실행할 수 있도록 해주는 기능

🎯 워커란?

• 웹 API 중 하나
• 별도의 쓰레드에서 실행
• 메인 코드와는 postMessage / onmessage 로 데이터 주고받음
• DOM 접근 ❌ (그래픽/UI 수정은 못함)
• 자바스크립트 코드만 실행 가능

🧱 워커의 주요 종류

1. Web Worker

• 일반적인 워커.
• 무거운 연산, 데이터 파싱, 이미지 처리 등 메인 스레드를 막지 않도록 분리해서 실행.
• 다른 탭과는 통신 ❌
• postMessage()로 메인 스레드와만 통신 가능.

const worker = new Worker("worker.js");
worker.postMessage({ some: "data" });

worker.onmessage = (e) => {
  console.log("워커로부터 응답:", e.data);
};

2. Shared Worker

• 여러 탭(또는 iframe)에서 하나의 워커를 공유할 수 있음.
• 브라우저 탭 간 상태 공유나 메시지 전달 가능 🔥
• 탭 간 통신 + 로직 공유를 동시에 처리하고 싶을 때 유용.

// main.js
const worker = new SharedWorker("shared-worker.js");
worker.port.start();

worker.port.onmessage = (e) => {
  console.log("다른 탭에서 메시지:", e.data);
};

worker.port.postMessage("안녕!");