BroadcastChannel API란?

https://micro-frontends.org/

현재 저희 회사에서는 마이크로 프론트엔드 아키텍처를 도입해 웹 애플리케이션을 개발하고 있습니다. 이 도입은 아직 1년이 채 되지 않은 과도기적인 상황이라 개발적인 이슈들이 존재하는데, 그중 하나를 "이렇게 개선할 수 있지 않을까?"에 대한 고민을 적어보겠습니다.

 

- remote app: 컴포넌트를 제공하는 앱

- host app: 컴포넌트를 사용하는 앱

그 중에서도 주요 이슈 중 하나는 host app에서 remote app으로 세션 상태나 API 헤더 초기화 등을 어떻게 처리할 것인가였습니다. 현재는 prop을 통해 세션 키와 유저 정보 같은 global state를 컴포넌트로 전달 후, remote app에서 자체적인 부트스트랩(예: API 헤더 초기화, 상태 재가공 등)을 처리하는 방식을 사용하고 있습니다.

호스트 및 원격 앱에서 세션 상태 처리

 

이러한 방식을 사용하면서 컴포넌트를 가져올 때마다 감싸주는 과정이 필요해지고, 세션 키를 직접 넘기는 방식도 좋은 방법이 아니라고 생각됩니다. 또한 중복되는 초기화 로직들이 쌓이면서(+ 신규 remote app들이 생길 때마다) 유지보수가 어려워지고, 신규 입사자들에게는 높은 러닝 커브를 요구하게 되었습니다. 이러한 복잡성은 때로는 정상적으로 동작하지 않는 이슈를 야기하기도 하였습니다.. 😂

 

이 문제를 해결하기 위해 최근에 BroadcastChannel API를 알게 되었고, 이를 적용해 보려고 합니다.

---

 

BroadcastChannel API란?

BroadcastChannel API는 웹 애플리케이션 내에서 동일한 출처(같은 도메인)를 공유하는 여러 브라우저 탭, 윈도우, iframe, 또는 웹 워커 간의 데이터를 실시간으로 쉽게 교환할 수 있도록 해주는 기능을 제공합니다. 기본적으로 이 API는 실시간 정보 공유나 상태 동기화가 필요한 경우에 유용하며, 웹 애플리케이션에서 발생하는 변경 사항을 여러 사용자 인터페이스에 일관되게 반영할 수 있게 합니다.

예를 들어, 사용자가 한 탭에서 로그인하면 다른 탭에서도 즉시 로그인 상태로 업데이트됩니다. 이렇게 동기화된 상태는 사용자 경험을 향상시키고, 각 탭의 상태를 항상 최신 상태로 유지할 수 있게 합니다. 이처럼 BroadcastChannel은 브라우저 간 통신을 지원하지만, 네트워크 서버를 거치지 않고 클라이언트 간에 직접 데이터가 교환되므로 네트워크 부하가 줄어들고, 빠르게 데이터 동기화를 처리할 수 있는 장점이 있습니다.

 

기본 사용법

간단한 코드 예제로 BroadcastChannel API의 기본 사용법을 설명드리겠습니다:

// BroadcastChannel 생성
const channel = new BroadcastChannel('my_channel');

// 메시지 보내기
channel.postMessage('Hello, world!');

// 메시지 수신
channel.onmessage = (event) => {
    console.log('Received:', event.data);
};

// 채널 닫기
channel.close();

위 코드에서 'my_channel'이라는 이름의 채널을 생성하고, 'Hello, world!'라는 메시지를 다른 브라우저 탭으로 전송합니다. 수신된 메시지는 onmessage 이벤트 핸들러를 통해 콘솔에 출력되며, 이를 통해 데이터가 정상적으로 송수신됨을 확인할 수 있습니다. 채널이 더 이상 필요 없을 경우에는 channel.close()를 호출하여 자원을 해제할 수 있습니다.

 

위 예제에서 두 번째 탭에서 데이터를 변경할 때, 분리된 탭, 새 창 등 같은 도메인에 페이지에서 데이터가 업데이트된 것을 알 수 있습니다.

 

BroadcastChannel API vs. window.postMessage

BroadcastChannel API는 window.postMessage와 기능이 유사해 보일 수 있지만, 근본적인 차이점이 있습니다. window.postMessage는 특정 iframe 또는 윈도우 간의 메시지를 전달하는 데 사용되며, 서로 다른 출처를 가지고 있을 때도 통신이 가능합니다. 반면, BroadcastChannel API는 동일 출처에 속하는 모든 브라우저 탭 간 데이터를 공유하도록 설계되었습니다. 즉, BroadcastChannel은 동일 도메인 내의 모든 탭에 동시에 메시지를 보내는 데 최적화된 반면, window.postMessage는 특정 대상에 메시지를 전송합니다.

 

결론

BroadcastChannel API는 여러 탭으로 나뉘어 있는 웹 애플리케이션에서 상태를 동기화하고 데이터를 일관되게 유지하는 데 유용한 도구입니다. 현재 저희 프로젝트에서 경험하고 있는 복잡한 상태 관리 문제를 완화하는 데 도움이 될 수 있을 것으로 기대하고 있습니다. 특히, remote와 host 간의 복잡한 prop 전달 구조를 단순화하고, 코드 중복을 줄이며, 새로운 개발자들의 러닝 커브를 낮추는 데 긍정적인 영향을 줄 수 있을 것입니다.

다음 글에서는 micro app간에 정보를 넘겨주고 받는 것을 테스트해보고 실제 적용이 가능할지 실험해 보겠습니다!