라이브러리

📦 파일 구조

자세한 설치 및 파일 다운로드는 배포 및 설치 가이드를 참고하세요.

🚀 사용 방법

1. 설치

배포 가이드에서 환경에 맞는 라이브러리를 설치하세요.

2. 초기화

// ES6 / TypeScript
import { getBridge } from '@nativebridge/core';

const bridge = getBridge();

⚙️ 초기화 옵션

const bridge = new WebBridge({
    debug: true,        // 디버그 로그 출력
    timeout: 10000,     // 타임아웃 (밀리초)
    retries: 3          // 재시도 횟수
});

🌐 프레임워크별 사용

Vue 3

// main.js 또는 App.vue
import WebBridge from './utils/web-bridge';

const bridge = new WebBridge({ debug: true });

// 전역으로 제공
app.provide('bridge', bridge);

React

// useBridge.js
import { useState } from 'react';
import WebBridge from './utils/web-bridge';

const bridge = new WebBridge({ debug: true });

export function useBridge() {
    return bridge;
}

Angular

// bridge.service.ts
import { Injectable } from '@angular/core';
import { getBridge } from '@nativebridge/core';

@Injectable({ providedIn: 'root' })
export class BridgeService {
    private bridge = getBridge();
    
    async getLocation() {
        return await this.bridge.getLocation();
    }
}

📁 파일 위치

라이브러리 파일들은 lib/ 폴더에 있습니다:

lib/
├── web-bridge.js          # Native WebView용
├── native-bridge-fcm.js   # Web Browser용
├── native-bridge.d.ts     # TypeScript 타입
├── package.json           # NPM 설정
├── README.md              # 라이브러리 문서
└── examples/              # 예제 파일들
    ├── vanilla-js.html
    ├── vue3-cdn.html
    ├── react-cdn.html
    ├── angular-cdn.html
    └── svelte-cdn.html

💡 예제 파일

각 프레임워크별 완전한 예제가 제공됩니다:

• Vanilla JS 예제 - 순수 JavaScript
• Vue 3 예제 - Composition API
• React 예제 - Hooks
• Angular 예제 - Service Pattern
• Svelte 예제 - 반응형

📚 API 메서드

전체 API 목록은 API 문서를 참고하세요.

주요 메서드:

• getLocation() - GPS 위치
• takePhoto() - 사진 촬영
• showNotification() - 푸시 알림
• saveData() / loadData() - 스토리지
• getDeviceInfo() - 디바이스 정보
• vibrate() - 진동
• 그 외 20+ 기능

라이브러리 사용법 상세 가이드 →