Bridge Components 설치는 각 플랫폼의 특성에 맞춰 진행됩니다.
웹 (Rails) 환경 설치
-
bin/importmap활용: Rails 디렉토리에서bin/importmap pin joi bridge_components명령어를 실행하여 Bridge Components를 설치합니다. 이 과정에서 Hotwire Native Bridge와 Stimulus도 함께 핀(pin)됩니다. -
Stimulus 컨트롤러 등록:
app/javascript/controllers/application.js파일에서@domeli/bridge-components패키지의 모든 컨트롤러를 임포트하고 애플리케이션에 로드하도록 설정합니다.
iOS 환경 설치
-
Xcode 패키지 의존성 추가: Xcode를 열고 ‘File’ > ‘Add Package Dependencies’를 선택합니다. GitHub 저장소
github.com/joazlotti/bridge-components를 검색하여 최신 버전(예: 8.3)을 추가합니다. -
앱 델리게이트 등록:
AppDelegate파일에 Bridge Components를 임포트하고, Hotwire Native가 아직 임포트되지 않았다면 함께 임포트합니다. 이후 라이브러리의 모든 Bridge Components를 등록합니다.
Android 환경 설치
-
저장소 추가:
build.gradle파일에 Jitpack을 위한 Maven 저장소를 추가하여 의존성 해결을 가능하게 합니다. -
라이브러리 추가: 앱의
build.gradle파일에 Hotwire Native 구현체 아래에com.github.JoeMaselotti:bridge-components:8.0.3와 같은 형식으로 Bridge Components 라이브러리 의존성을 추가합니다. -
Hotwire 설정: 애플리케이션 서브클래스에서 Hotwire가 Bridge Component JSON을 파싱할 수 있도록
x-kotlin-x-json-converter를 사용하도록 설정합니다. 마지막으로 라이브러리의 모든 Bridge Components를 Hotwire에 등록합니다.
데모: 네이티브 메뉴 전환
-
웹 메뉴 네이티브화: 웹 기반 드롭다운 메뉴를 네이티브 메뉴로 전환하기 위해
nav요소에data-controller="bridge-menu"를 추가하고, 각 링크에는data-bridge-menu-target="item"을 설정합니다. -
웹 메뉴 숨기기: Bridge 요소가 설치될 때 웹 기반 메뉴를 숨기기 위해
data-bridge-components속성을 활용하여 메뉴 컴포넌트를 등록하고 화면에 나타날 때 숨기도록 설정합니다. 이를 통해 네이티브 메뉴만 표시됩니다.