@makecode/event-manager

@makecode/event-manager는 웹뷰와 앱 간의 상태 정보 교환 및 이벤트 관리 기능을 제공하는 이벤트 버스 라이브러리입니다. 클라이언트 및 서버 환경 모두를 지원하며, CustomEvent 기반으로 작동합니다.

주요 기능

- 이벤트 등록, 해제 및 디스패치 기능 제공
- 웹뷰와 앱 간의 양방향 통신 지원
- Android 및 iOS 플랫폼 간의 유연한 연동 방식 지원
- Next.js와 같은 SSR 환경에서도 안전하게 사용 가능

설치

``bash
npm install @makecode/event-manager
`

사용법

$3

`typescript
import {
eventBusOn,
eventBusOff,
eventBusDispatch,
} from '@makecode/event-manager';

// 이벤트 핸들러
const eventHandler = event => {
console.log('Event received:', event.detail);
};

// 이벤트 리스너 등록
eventBusOn('testEvent', eventHandler);

// 이벤트 디스패치
eventBusDispatch('testEvent', { message: 'Hello from event bus!' });

// 이벤트 리스너 제거
eventBusOff('testEvent', eventHandler);
`

$3

앱 > 웹뷰 정보(데이터) 전달을 위한 전역 함수 정의

`typescript
import { appEventListener } from '@makecode/event-manager';

// 앱 이벤트 리스너 등록
appEventListener('deliverToTheWeb'); // window.deliverToTheWeb 이라는 함수 정의, 이를 통해 App 으로 부터 데이터 전달 받음

// 앱에서 호출 예시
window'deliverToTheWeb';
`

웹뷰 > 앱 정보(데이터) 전달

`typescript
import { webviewDispatch, APP_EVENT_TYPE } from '@makecode/event-manager';

const sendToApp = webviewDispatch('webkit'); // Android 의 경우 bridge 이름 변경 가능 (안드로이드 앱 개발 담당자와 약속된 브리지, window[bridge])
sendToApp('testMessage', { message: 'Hello from webview!' }); // Android 의 경우 window[bridge]['testMessage'] 함수로 호출됨
`

$3

SSR 환경에서는 typeof window를 확인하여 클라이언트 환경에서만 이벤트를 처리합니다.

`typescript
import { appEventListener } from '@makecode/event-manager';

if (typeof window !== 'undefined') {
// 앱 > 웹뷰 정보(데이터) 전달을 위한 정의
appEventListener('deliverToTheWeb');
}
`

`tsx
'use client';

import { useEffect, ComponentProps, useCallback } from 'react';
import {
eventBusOn,
eventBusOff,
eventBusDispatch,
} from '@lotte/event-manager';

import { EVENT_BUS } from '@/common/constant/event'; // 이벤트 이름 상수로 관리

export default function EventBus() {
const eventHandler = useCallback(({ detail }: any = {}) => {
console.log('EventBus', detail);
}, []);

useEffect(() => {
eventBusOff(EVENT_BUS.TEST, eventHandler);
eventBusOn(EVENT_BUS.TEST, eventHandler);
}, [eventHandler]);

const onClick: ComponentProps<'button'>['onClick'] = event => {
eventBusDispatch(EVENT_BUS.TEST, { data: 'TEST' });
};

return (
<>


EvnetBus Test

`typescript
setTimeout(() => {
// 앱에서 웹뷰로 콜백 실행
window[APP_EVENT_TYPE.TEST]?.('Test message from app!');
}, 3000);
`

API

$3

특정 이벤트 타입에 대해 리스너를 등록합니다.

- type: 이벤트 타입을 나타내는 문자열
- listener: 이벤트가 발생했을 때 실행될 콜백 함수
- options: 이벤트 리스너 옵션 (선택 사항)

$3

등록된 이벤트 리스너를 제거합니다.

- type: 이벤트 타입을 나타내는 문자열
- listener: 제거할 이벤트 리스너 콜백 함수
- options: 이벤트 리스너 옵션 (선택 사항)

$3

특정 이벤트를 실행합니다.

- type: 실행할 이벤트 타입을 나타내는 문자열
- payload: 이벤트와 함께 전달할 데이터 (선택 사항)

$3

앱에서 호출할 이벤트 리스너를 등록합니다.

- type: 등록할 이벤트 타입

$3

웹뷰에서 앱으로 데이터를 전송합니다.

- bridge: 웹뷰와 앱 간 통신에 사용할 브릿지 이름 (기본값: 'webkit')
- type: 전송할 이벤트 타입
- payload`: 앱으로 전송할 데이터