WebViewKit

개요

RN·Flutter WebView 안에서 화면 전환과 뒤로가기가 브라우저 기본값과 달라 매 프로젝트마다 같은 코드를 반복 작성했습니다. Stack Router·History 관리·WebView Bridge(RN·Flutter)를 pnpm 모노레포로 묶어 @ahnseungchan/webviewkit으로 배포했습니다.

핵심 성과

• Stack Router: push · pop · back · depth 관리
• WebView Bridge: RN postMessage + Flutter JavaScript Channel
• History API 동기화로 브라우저 history와 앱 스택을 일치
• pnpm workspace 모노레포 (packages/core + packages/browser 데모)
• Jest 기반 유닛 테스트 · npm public 배포 v1.3.0

왜 만들었는지

케어마인더·리케어랩·골드앤컴퍼니 세 회사에서 WebView 라우팅 코드를 매번 새로 짰습니다. postMessage 인터페이스, history 동기화, 스택 depth 관리가 모두 제각각이었고, 재사용 가능한 패키지로 추출해야 한다는 판단에 만들었습니다.

모노레포 구조

packages/core: Stack Router, WebView Bridge(RN·Flutter), History API, TypeScript 타입을 포함합니다. packages/browser: Vite + React 기반 데모 앱으로 실시간 동작을 확인합니다. tsup으로 ESM/CJS 듀얼 빌드하고 npm에 배포합니다.

테스트 · 배포

Jest로 스택 전환·back 처리·엣지 케이스를 고정합니다. pnpm build → jest → npm publish --access public 파이프라인을 루트에서 한 번에 실행합니다. CHANGELOG에 버전별 변경 이력을 남깁니다.

화면

아래는 README·공개 자료에 있는 화면입니다.