react-native-coucon-sdk
React Native Coucon SDK
@boostbrothers/react-native-coucon-sdk — Coucon SAS(Security Authentication Service) 인증 엔진을 React Native에서 사용하는 TurboModule 기반 SDK.
When to Apply
Reference this skill when:
- Coucon SAS 인증을 구현할 때
- TurboModule 기반 네이티브 모듈 연동 시
- NativeEventEmitter 이벤트 기반 비동기 패턴 사용 시
Architecture
앱 (React Native)
↓ initialize() / run()
↓ addOnSASRunCompletedListener()
CouconSdk (TurboModule)
↓ TurboModuleRegistry
iOS/Android 네이티브 SAS 엔진
↓ 이벤트 방출
NativeEventEmitter (onSASRunCompleted)
↓ { index, outString }
앱
⚠️ CRITICAL: 리스너 등록 순서
반드시 리스너를 먼저 등록한 후 run()을 호출하세요.
run()은 즉시 반환되지만 결과는onSASRunCompleted이벤트로 비동기 전달됩니다. 리스너 없이 run()을 호출하면 결과를 받을 수 없습니다.
API Reference
initialize()
SAS 엔진을 초기화합니다. 앱 시작 시 한 번 호출.
import { CouconSdk } from '@boostbrothers/react-native-coucon-sdk';
await CouconSdk.initialize();
addOnSASRunCompletedListener(callback)
SAS 실행 완료 이벤트 리스너를 등록합니다.
const subscription = CouconSdk.addOnSASRunCompletedListener(
({ index, outString }) => {
console.log(`SAS 완료 - index: ${index}, result: ${outString}`);
}
);
// 컴포넌트 언마운트 시 정리
return () => subscription.remove();
run(index, input)
SAS 엔진을 실행합니다. 결과는 이벤트로 비동기 전달.
// ⚠️ 반드시 리스너 등록 후 호출!
CouconSdk.run(0, 'input-string');
Complete Usage Example
import { useEffect } from 'react';
import { CouconSdk } from '@boostbrothers/react-native-coucon-sdk';
function useCouconAuth() {
useEffect(() => {
// 1. 초기화
CouconSdk.initialize();
// 2. 리스너 등록 (run보다 먼저!)
const subscription = CouconSdk.addOnSASRunCompletedListener(
({ index, outString }) => {
// 4. 결과 수신
handleAuthResult(index, outString);
}
);
// 3. 실행
CouconSdk.run(0, 'auth-input');
return () => subscription.remove();
}, []);
}
Event Structure
onSASRunCompleted 이벤트 데이터:
| Field | Type | Description |
|---|---|---|
| index | number | run()에 전달한 인덱스 값 |
| outString | string | SAS 엔진 처리 결과 문자열 |
Troubleshooting
리스너에 이벤트가 오지 않음: run() 호출 전에 리스너를 등록했는지 확인. 비동기 초기화 완료 후 run() 호출.
TurboModule 로드 실패: React Native New Architecture 설정 확인. android/gradle.properties에 newArchEnabled=true.
initialize() 실패: 네이티브 SAS 엔진 라이브러리가 프로젝트에 올바르게 링크되었는지 확인.
이벤트 중복 수신: subscription.remove()로 이전 리스너를 정리했는지 확인. useEffect cleanup에서 remove() 호출.
Platform Support
| Platform | Support |
|---|---|
| iOS | ✅ |
| Android | ✅ |
| Web | ❌ |
More from boostbrothers/agent-skills-fe
prd-workflow
PRD generation and acceptance test workflow for product development. Use when creating PRDs from JIRA/Confluence/Figma data, generating UI/UX acceptance test checklists, or uploading test documents to Confluence.
19vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use
13vercel-react-best-practices
React, React Native, and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/React Native/Next.js code to ensure optimal performance patterns. Includes framework-specific solutions (Next.js, Vite, CRA) and library alternatives (SWR vs React Query, Jotai). Triggers on tasks involving React components, Next.js pages, React Native apps, data fetching, bundle optimization, or performance improvements.
11vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
11web-design-guidelines
Web design and accessibility guidelines for modern web applications. Use when creating, reviewing, or refactoring UI components to ensure best practices for styling, animations, accessibility, and color contrast.
9figma-ddocdoc-app
ddocdoc-app(React Native) 디자인 시스템 피그마-코드 매핑 가이드. 피그마 컴포넌트를 React Native(NativeWind) 코드로 변환할 때, 컬러 토큰 사용법과 컴포넌트 매핑 규칙을 참조.
7