배경

기존 통신 방식의 문제점

• 웹에서 앱으로 메시지를 전송할 때마다 다음과 같은 코드를 작성해야 했습니다

window.ReactNativeWebView.postMessage(
  JSON.stringify({
    type: MESSAGE_TYPES.OPEN_EXTERNAL_BROWSER,
    url,
  })
);

• 또한 메세지들을 웹에서 한 채널에서 모든 이벤트들을 핸들링 해야합니다.

const handleWebViewMessage = useCallback(
  (event: MessageEvent) => {
    const { type, data } = JSON.parse(event.data);

    if (type === MESSAGE_TYPES.AUTH_SUCCESS) {
      handleOAuthCallback()
    } else if (type === MESSAGE_TYPES.AUTH_ERROR) {
      ...
    }
  },
  [handleOAuthCallback]
);

window.addEventListener('message', handleWebViewMessage)

기존 방식의 한계

• window.ReactNativeWebView와 같은 플랫폼별 객체 직접 사용

• 동일한 패턴의 코드가 여러 컴포넌트에서 중복 발생

• 이벤트 이름 오타 시 컴파일 단계에서 감지 불가능

• 전달받는 payload의 타입을 런타임에서만 확인 가능

설계 목표

• 추상화: postMessage와 addEventListener 로직을 캡슐화

• 타입 안전성: TypeScript를 활용한 payload 타입 자동 추론

• 이벤트 기반 아키텍처: 이벤트 이름에 따른 콜백 함수 자동 실행

• 컴파일 시점 검증: 잘못된 이벤트명 사전 차단

• 중앙 집중 관리: 싱글톤 패턴을 통한 이벤트 핸들러 통합 관리

아키텍쳐 아이디어

• 프로그램에서 인터럽트 발생

• Vector Table에서 해당 인터럽트에 대응하는 ISR 탐색

• ISR 주소로 이동하여 인터럽트 처리 루틴 실행

1. addEventListener로 이벤트이름과 콜백 함수를 전달

2. WebBridge에서 이벤트를 globalEventListeners에 등록
1. globalEventListener는 Vector Table 역할

3. AppBridge의 send에서 이벤트이름에 해당하는곳에 payload전달

4. 한 채널에서 수행하기 위한 globalMessageHandler에서 이벤트 이름에 해당하는 콜백 함수 실행

실제 구현

• Bridge 레이어: 중앙에서 관리하는 bridge 레이어 생성, 공통된 API를 사용

• 싱글톤 패턴: 모든 컴포넌트가 동일한 Bridge 인스턴스에 접근하여 eventHandlers 공유

• Map 기반 이벤트 테이블: Vector Table 역할을 수행하는 Map 객체로 이벤트 핸들러 관리

• 클로저를 이용한 싱글톤 패턴으로 전역에서 하나의 Bridge 인스턴스만 생성 보장

export const createWebBridge = (() => {
  let bridgeInstance: BridgeInstance | null = null
  let isGlobalListenerRegistered = false
  
  // 이벤트 리스너들을 저장할 Map (Vector Table 역할)
    const globalEventListeners = new Map<
    string,
    ((
      event: PostMessageSchemaObject[keyof PostMessageSchemaObject]['payload'],
    ) => void)[]
  >()

  return () => {
    if (bridgeInstance) {
      return bridgeInstance // 기존 인스턴스 반환
    }
    
    bridgeInstance = createBridgeInstance() // 없으면 새 인스턴스 생성
    return bridgeInstance
  }
})()

• 단일 채널에서 모든 이벤트를 처리하는 중앙 핸들러

const globalMessageHandler = (event: MessageEvent) => {
  const message = handleMessage(event.data)
  if (message) {
    // Vector Table에서 해당 이벤트의 핸들러들 찾기
    const listeners = globalEventListeners.get(message.eventName)
    if (listeners) {
      // 해당하는 모든 핸들러 실행
      listeners.forEach((listener) => listener(message.payload))
    }
  }
}

• 제네릭 타입을 활용한 send, addEventListener 타입 안정성 확보

const send = <K extends keyof T>(
  eventName: K,
  payload: T[K]['payload'],
): void => {
  const message: PostMessageEvent<T> = { eventName, payload }
  window.ReactNativeWebView!.postMessage(JSON.stringify(message))
}

// 콜백 함수의 매개변수 타입이 자동 추론됨
const addEventListener = <K extends keyof T>(
  eventName: K,
  callback: (payload: T[K]['payload']) => void,
) => {
...

사용 예시

• 사용시에도 간단하게 다음과 같이 사용할 수 있습니다.

export const useBridgeEvent = <T extends keyof BridgeMessageSchema>(
  eventType: T,
  callback: (payload: BridgeMessageSchema[T]['payload']) => void,
  deps: DependencyList = [],
) => {
  const { bridge } = useBridge()

  useEffect(() => {
    const unsubscribe = bridge.addEventListener(eventType, callback)
    return () => unsubscribe()
  }, [eventType, callback, ...deps])
}

• 전달된 핸들러 콜백 함수는 payload 타입을 추론합니다.

// 로그아웃 브릿지 이벤트 핸들러
useBridgeEvent(
  POST_MESSAGE_EVENT.IMAGE_SELECTED,
	(payload) => {
	// payload를 ImageData 타입으로 자동 추론
  const newImages = data.imageDataList
    .filter(
      (imageData: BridgeImageData) =>
        imageData.base64 && imageData.createdAt && imageData.fileName,
    )
    .map((imageData: BridgeImageData) => ({
      fileName: imageData.fileName,
)

• 간단하게 postMessage를 추상화

bridge.send('OPEN_CAMERA', { message: 'Open camera' })

Before/After 비교

// Before: 기존 방식
const handleMessage = useCallback((event: MessageEvent) => {
  const { type, data } = JSON.parse(event.data);
  // 타입 추론 안됨, if-else 체인 필요
  if (type === 'AUTH_SUCCESS') {
    handleAuth(data); // data 타입 unknown
  } else if (type === 'CAMERA_RESULT') {
    handleCamera(data); // data 타입 unknown
  }
}, []);

// After: Bridge 사용
useBridgeEvent('CAMERA_SUCCESS', (payload) => {
  // payload 타입 자동 추론, 안전함
  console.log(payload.imageList) // 자동완성 지원
})

// Before: 매번 직접 JSON.stringify + 타입 정보 없음
window.ReactNativeWebView.postMessage(
  JSON.stringify({
    type: 'CAMERA_OPEN',
    data: { quality: 0.8, allowsEditing: true }
  })
);

// 타입 실수 가능
window.ReactNativeWebView.postMessage(
  JSON.stringify({
    type: 'CAMREA_OPEN', // 오타 발생 가능
    data: { quality: "high" } // 잘못된 타입
  })
);

// After: 타입 안전 + 간결함
bridge.send('CAMERA_OPEN', { 
  quality: 0.8, 
  allowsEditing: true 
});

// 컴파일 시점에 오류 발견
bridge.send('CAMREA_OPEN', payload); // 타입 에러
bridge.send('CAMERA_OPEN', { quality: "high" }); // 타입 에러

개선할 점과 회고

• 웹, 앱 타입을 공유하기 위해 package안에 있는 타입 파일 수정 필요
• 이건 웹 bridge, 앱 bridge를 공유하기 위한 장치가 필요할 것 같다.

• WeakMap?
• 이벤트명을 문자열로 key로 두고싶어서 Map선택
• 사실 Symbol로 해결할 수 있지 않았을까?
• WeakMap으로 하면 자동 메모리 정리 가능

• 싱글톤의 유명한 동시성 문제 고려 X
• 메세지큐나 세마포어로 해결?

• any타입 사용
• 이런식으로 any 타입을 사용하여 이벤트 리스너에서 타입 추론 어려움
• 잘못 전달해도 에러가 없다보니 undefined였던 경우가 많았다.

  const eventListeners = new Map<string, (event: any) => void>()

• 그래서 다음과 같은 방식으로 타입 업그레이드

const globalEventListeners = new Map<
  string,
  ((
    event: PostMessageSchemaObject[keyof PostMessageSchemaObject]['payload'],
  ) => void)[]
>()

결론