프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼 | 2024 당근 테크 밋업

Bridge

• 웹뷰 ↔ 네이티브 사이의 통신을 담당하는 모듈
• 웹뷰에서 필요한 OS 기능이 있거나 앱에 보관된 정보를 가져올 때 사용
  • OS 기능 - 햅틱 반응
  • 앱 정보 - 현재 로그인한 유저 정보

브릿지 사용하기 (당근)

• 내부 NPM 레지스트리에 배포되어있는 SDK를 통해 브릿지를 설치해 사용할 수 있음
  • Promise를 이용해 통신하는듯

import bridge from "my-bridge"

bridge.getUser().then(user => {
	console.log(user); // User
});

브릿지에 새로운 기능 추가하기 (당근)

과거(2021년)

• 네이티브 개발자, 웹뷰 개발자가 협의하여 인터페이스 구체화
• 웹뷰 개발자가 TypeScript SDK를 작성하고
• 웹뷰 개발자가 테스트용 웹뷰를 작성해 배포
• 네이티브 개발자가 테스트용 웹뷰를 받아 구현

현재

• SDK와 테스트용 웹뷰를 자동 생성

  • 인터페이스만 작성하고 명령어를 실행하면 SDK(라이브러리)를 자동 생성해주는 방식

• 개발자는 브릿지 레포의 스키마(JSON 형식)를 수정해 PR을 생성

• PR이 생성되면 프리뷰 브릿지 SDK와 테스트용 웹뷰가 생성되어 배포됨

  yarn add my-bridge@pr-7 // 프리뷰 브릿지 SDK
  

• PR의 스키마 변경사항을 가지고 프론트엔드 개발자와 네이티브 개발자는 코드 리뷰를 진행

• main 브랜치에 머지되면 정식 SDK와 테스트용 웹뷰가 배포됨

  yarn add my-bridge // 정식 브릿지 SDK
  

Framework