N개의 탭, 단 하나의 웹소켓: SharedWorker

1. SharedWorker vs Dedicated Worker

Dedicated Worker는 생성한 탭에만 종속되지만 SharedWorker는 같은 오리진의 여러 탭·iframe이 동일 인스턴스를 공유합니다. 탭이 연결될 때 `connect` 이벤트가 발생하고 MessagePort를 통해 통신합니다. 탭이 모두 닫히면 SharedWorker도 종료됩니다.

핵심 용어

2. WebSocket 단일화 패턴

SharedWorker 내부에서 WebSocket을 하나만 생성하고, 탭이 추가될 때마다 MessagePort를 ports 배열에 저장합니다. WebSocket 메시지가 도착하면 모든 포트에 브로드캐스트합니다. 탭이 닫힐 때는 포트를 배열에서 제거하고 모든 탭이 닫히면 WebSocket을 닫아 리소스를 해제합니다.

핵심 용어

3. BroadcastChannel과의 차이

BroadcastChannel은 탭 간 단순 메시지 전달에 적합하지만 SharedWorker는 공유 상태와 연결을 유지할 수 있습니다. WebSocket처럼 지속적 연결이 필요한 경우 SharedWorker가 더 적합하고, 단순 이벤트 알림은 BroadcastChannel로 충분합니다.

핵심 용어

Q1. SharedWorker와 Dedicated Worker의 차이는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "SharedWorker와 Dedicated Worker의 차이는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 가장 큰 차이는 '공유 범위'입니다. Dedicated Worker는 생성한 스크립트(탭)에만 연결되지만 SharedWorker는 같은 오리진의 모든 탭이 동일 인스턴스를 공유합니다. 이를 활용하면 탭 간 상태·연결을 공유할 수 있습니다.

Q2. 멀티탭에서 WebSocket 연결을 공유해야 하는 이유는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "멀티탭에서 WebSocket 연결을 공유해야 하는 이유는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 탭마다 독립 WebSocket을 맺으면 서버 연결 수가 탭 수만큼 늘어나 서버 부하가 증가하고, 각 탭이 다른 시점에 메시지를 받아 데이터 불일치가 생깁니다. SharedWorker로 단일화하면 이 두 문제를 동시에 해결할 수 있습니다.

Q3. SharedWorker의 생명주기는 어떻게 관리되나요?

힌트

[감점 답변] 정의만 반복하거나 "SharedWorker의 생명주기는 어떻게 관리되나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] SharedWorker는 연결된 탭이 하나라도 있으면 살아있고, 모든 탭이 닫히면 종료됩니다. 명시적으로 `port.close()`를 호출하거나 탭이 닫히면 포트가 닫힙니다. Worker 내부에서는 `port.onmessage`가 설정된 포트만 alive로 간주하므로, 포트 목록을 정확히 관리해야 WebSocket 해제 시점을 올바르게 파악할 수 있습니다.