채팅상담 시 상담원이 보는 화면을 개발하고 있는 중에 아래와 같은 요구사항이 존재

• 어느 채팅상담 페이지에 있더라도, 특정 버튼을 클릭 시 상담메인 페이지로 라우팅 후, 고객정보를 새로운 탭UI로 띄운다.
• 이 때 상담메인 페이지가 브라우저 상에서 여러 탭일 경우, 회원정보가 모든 브라우저에서 동기화되어야 한다.

처음 생각한 방식

<aside> 💡

버튼 클릭 시 커스텀한 이벤트를 만들어서 전파를 하고, 해당 이벤트를 감지하면 되지 않을까?

</aside>

//커스텀한 이벤트를 만들고, 감지하자
//요런 느낌으로 구현하면 될 거 같았음.
const customEvent = new CustomEvent('custom-click', { 
    bubbles: true,
    detail: 채팅상담중인사용자의정보
});

//버튼 클릭 시 핸들러
const handleButtonClick = () => {
   dispatchEvent(customeEvent);
}

//최상단에서 이벤트 감지

const 사용자의정보를_받아서_상담메인_탭에_추가하는_함수 = (data:사용자의정보) => {}

useEffect(() => {
   window.addEventListener("custom-click",사용자의정보를_받아서_상담메인_탭에_추가하는_함수))
},[])

해당 방식의 문제점

브라우저의 여러 탭에서 같은 상담메인페이지를 열어둔 경우 사용자가 보고 있는 페이지에서만 동작함.

브라우저의 탭은 최상위 브라우징 컨텍스트로 각 탭은 자체 Document, Window, History, FrameTree, 자바스크립트 글로벌 객체를 가진다.

<aside> 💡

window.addEventListener는 여러 탭에 걸쳐 동작하지 않는 이유는 브라우저의 기본 보안 모델 때문. 각 탭은 별도의 실행 환경(context)에서 작동하기 때문

브라우저에서 각 탭은 독립된 윈도우 객체를 가지며,

이벤트 리스너는 해당 윈도우 객체에만 바인딩됩니다.

따라서 한 탭에서 등록한 이벤트 리스너는 다른 탭에서는 감지되지 않습니다.

</aside>

<aside> 💡

• 암묵적 공유가 없다: 탭은 서로의 힙에 손댈 수 없다. 공유를 원하면 반드시 저장소나 메시징 같은 “명시적 채널”을 열어야 한다.
• 세션 단위 상태: sessionStorage, 페이지 내부 상태, window.name 등은 본질적으로 탭 한정.

위에서 언급한 "명시적 채널"을 사용한다면 통신이 가능하며 이는 대표적으로 로컬 스토리지, BroadcastChannel, postMessage 등이 있다.

</aside>

이 과정에서 BroadCastChannel을 알게 되었고, 해당 API를 이용해서 구현하기로 결정

BroadCastChannel을 통해 상담메인의 여러 탭들간 동기화를 시켜주고자 했음

BroadCastChannel

BroadcastChannel API란 동일한 origin의 브라우징 맥락(창, 탭, 프레임, iframe, …) 간 데이터 통신을 가능하게 하는 기술