Moait
홈인기 피드모든 블로그모든 태그
홈인기 피드모든 블로그모든 태그

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다

여기어때 favicon여기어때·Frontend·
TypeScriptReactJavaScript
2026년 08월 11일0

AI 요약

이 글은 AI가 요약했어요. 정확한 내용은 꼭 원문을 확인해 주세요!

핵심 요약

여기어때가 앱-웹 간 브릿지 체계를 단일 파일로 관리하는 구조를 도입해, iOS/Android/Web 환경에서 공통으로 호출 가능한 설계를 구현했습니다.

구현 방법

  • 앱-웹 공용 브릿지(appBridge)를 한 번만 등록하도록 모듈 스코프에 초기화 플래그를 두었습니다.
  • iOS의 window.webkit.messageHandlers.postMessage와 안드로이드의 네이티브 호출 규약 차이를 한 래퍼로 통일 관리했습니다.
  • 요청-응답 흐름은 비동기로 설계하고, 응답은 전역 함수로 받아 Promise로 처리하도록 구성했습니다.

주요 결과

  • 웹에서도 앱 전용 기능을 호출해도 안전하게 동작하는 구조를 확보했습니다.
  • 초기화 중복 방지로 브릿지 초기화가 한 번만 수행되며, 환경 변화에 따른 유지보수가 용이해졌습니다.

연관 피드

%가 높을수록 이 글과 비슷할 가능성이 높아요!
No Image
79%

항공 프론트엔드 구축기 (4/10): “앱이냐”와 “좁냐”는 다른 질문이다

여기어때 favicon여기어때·2026년 08월 07일
No Image
79%

항공 프론트엔드 구축기 (1/10): 웹, 모바일웹, 웹뷰를 코드 한 벌로

여기어때 favicon여기어때·2026년 08월 07일
No Image
74%

항공 프론트엔드 구축기 (6/10): 컨테이너를 둘로 쪼개지 않았다

여기어때 favicon여기어때·2026년 08월 07일