동일 컨텍스트 간 상태 공유 (2)

이번 글에서는 Broadcast Channel API를 사용해 동일 컨텍스트 간 상태를 공유하는 방법을 알아보겠습니다. 이 API 를 활용하면 동일한 출처의 여러 창, 탭 또는 프레임 사이에서 데이터를 효율적으로 공유할 수 있습니다.

Broadcast Channel API

Broadcast Channel API는 동일한 출처의 다른 창, 탭 또는 프레임 간에 메시지를 교환할 수 있는 API입니다.

아래 예제를 통해 Broadcast Channel API 의 기본 사용법를 살펴보겠습니다.

사전 준비로, 현재 페이지를 두 개 이상 열어주세요.
열린 페이지 중, 아무 페이지에서 아래 버튼을 클릭해보시기 바랍니다.

모든 페이지에서 이 텍스트가 변경될 것 입니다...

버튼을 눌렀을때 다른 페이지에서도 메시지가 “Hello, world! Hello, Broadcast Channel!”로 변경되는 것을 확인할 수 있습니다.

BroadcastChannelExample.tsx

export function BroadcastChannelExample() {
	const channelName = "test_channel";
	const defaultMessage = "모든 페이지에서 이 텍스트가 변경될 것 입니다...";
 
	const [message, setMessage] = useState(defaultMessage);
 
	useEffect(() => {
		const bc = new BroadcastChannel(channelName);
		bc.onmessage = (event) => setMessage(event.data);
		return () => {
			bc.close();
		};
	}, []);
 
	const handleClick = () => {
		const bc = new BroadcastChannel(channelName);
		bc.postMessage("Hello, world! Hello, Broadcast Channel!");
		bc.close();
	};
 
	return (
		<>
			<div>{message}</div>
			<button onClick={handleClick}>이 버튼을 눌러보세요!</button>
		</>
	);
}

특징

동일 출저 (origin)의 다른 창, 탭 또는 프레임 간에 메시지를 교환할 수 있습니다.
WebSocket 과 달리 서버를 거치지 않고 브라우저 내부에서만 통신이 이루어집니다.
브라우저에서 제공하는 API로, 별도의 라이브러리나 패키지를 설치할 필요가 없습니다.

장점

구현이 간단하고 효율적입니다.
서버 요청이 필요 없어 네트워크 지연이 발생하지 않습니다.
브라우저 간 상태 공유가 가능하므로, 통합된 사용자 경험(UX)을 제공할 수 있습니다.

사용법

Broadcast Channel API는 세 가지 주요 기능을 제공합니다.

BroadcastChannel(): 새로운 Broadcast Channel을 생성합니다.
postMessage(): 다른 창, 탭 또는 프레임에 메시지를 보냅니다.
onmessage: 다른 창, 탭 또는 프레임에서 메시지를 수신할 때 실행할 이벤트 핸들러를 설정합니다.

동작 원리

Broadcast Channel API의 동작 과정을 간단히 설명하면 다음과 같습니다.

브라우저에서 동일 출저의 다른 창, 탭 또는 프레임 간에 메시지를 교환할 수 있도록 Broadcast Channel 을 생성합니다.
메시지를 보내는 창, 탭 또는 프레임에서 postMessage() 를 호출하면 해당 메시지가 채널을 통해 전파됩니다.
메시지를 수신하는 창, 탭 또는 프레임에서는 onmessage 이벤트 핸들러를 설정해 메시지를 수신하고 처리합니다.

+------------------+          +------------------+
|  Tab A           |          |  Tab B           |
|                  |   --->   |                  |
| postMessage()    |          | onmessage()      |
+------------------+          +------------------+

제한 사항

지원 브라우저 제한: 최신 브라우저는 대부분 지원하지만, 구형 브라우저에서는 동작하지 않을 수 있습니다. (Can I use | Broadcast Channel)에서 브라우저 호환성을 확인할 수 있습니다.
동일 출저 정책: 이 API 는 동일한 도메인에서만 동작하며, 서로 다른 도메인 간에는 사용할 수 없습니다.
보안 이슈: Broadcast Channel을 사용하면 사용자의 정보가 다른 탭에서 노출됩니다. 전송된 메시지는 암호화되지 않으므로, 민감한 정보를 전송하지 않도록 주의해야 합니다.

결론

Broadcast Channel API는 동일 출처의 여러 창, 탭, 또는 프레임 간에 데이터를 실시간으로 공유할 수 있는 간단하고 강력한 도구입니다. 서버를 거치지 않기 때문에 구현이 간편하고 효율적이며, 사용자 경험(UX)을 개선하는 데 유용합니다.

다만, 지원 브라우저와 동일 출저 정책, 보안 이슈에 주의해야 합니다.

다음 글에서는 Broadcast Channel API를 활용한 실전 예제를 소개하겠습니다. 이를 통해 드라이브 업로드 상태 동기화와 같은 실제 사례에서 API 를 활용하는 방법을 살펴보겠습니다.

동일 컨텍스트 간 상태 공유 (1)Vue.js