라이브러리

📦 파일 구조

🚀 사용 방법

1. CDN (가장 간단)

<script src="./flutter-bridge.js"></script>
<script>
    const bridge = new FlutterBridge();
</script>

2. ES6 모듈

import FlutterBridge from './flutter-bridge.js';

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

3. CommonJS

const FlutterBridge = require('./flutter-bridge.js');

const bridge = new FlutterBridge();

4. TypeScript

import FlutterBridge from './flutter-bridge';

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

// 타입 지원으로 자동완성!

⚙️ 초기화 옵션

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

🌐 프레임워크별 사용

Vue 3

// main.js 또는 App.vue
import FlutterBridge from './utils/flutter-bridge';

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

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

React

// useBridge.js
import { useState } from 'react';
import FlutterBridge from './utils/flutter-bridge';

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

export function useBridge() {
    return bridge;
}

Angular

// bridge.service.ts
import { Injectable } from '@angular/core';
import FlutterBridge from './utils/flutter-bridge';

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

📁 파일 위치

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

lib/
├── flutter-bridge.js      # UMD 번들
├── flutter-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+ 기능

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