빠른 시작

이 빠른 시작 가이드로 5-10분 안에 NetFUNNEL 4 React Native Agent를 시작하세요.

이 가이드에서 할 수 있는 것

• 코드 기반 통합: 버튼/API 레벨에서 정확한 타이밍으로 트래픽 제어

통합 방법 선택

통합 방법을 비교하고 사용 사례에 가장 적합한 접근 방식을 찾으려면 통합 방법 개요를 참조하세요.

---

사전 요구사항

• NetFUNNEL 콘솔 액세스
• React Native 프로젝트
• JavaScript/TypeScript 기본 지식

샘플 프로젝트

연습용 기본 프로젝트가 필요하신가요? 샘플 프로젝트를 확인하세요.

---

1단계: Client ID 가져오기

1. NetFUNNEL 콘솔로 이동
2. 우측 상단의 프로필 아이콘 클릭
3. 통합 자격 증명 (Integration Credentials) 메뉴 선택
4. Client ID 복사

---

2단계: 설치 및 초기화

패키지 설치

npm install netfunnel-rn-agent

초기화

App.js 또는 App.tsx에서 NetFUNNEL을 초기화합니다:

import Netfunnel from 'netfunnel-rn-agent';

// 앱 시작 시 초기화
Netfunnel.initialize({
  clientId: 'your-client-id'  // 1단계에서 가져온 Client ID
});

WebView 컴포넌트 추가

App.js 또는 App.tsx에서 Netfunnel.WebViewComponent를 추가합니다:

import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Netfunnel from 'netfunnel-rn-agent';

export default function App() {
  return (
    <View>
      <NavigationContainer>
        {/* Your app navigation */}
      </NavigationContainer>
      <Netfunnel.WebViewComponent />
    </View>
  );
}

---

3단계: 통합 방법 선택

기본 제어

최적 용도: 버튼 클릭, API 호출, 단일 단계 작업

1. 콘솔에서 세그먼트 생성:

   • Projects → Segment → Create Segment로 이동
   • Basic Control 선택
   • Limited Inflow를 0으로 설정 (테스트용)

2. 코드에 추가:

import Netfunnel from 'netfunnel-rn-agent';

function handleButtonPress() {
  Netfunnel.nfStart(
    "{{PROJECT_KEY}}",  // 콘솔에서 가져온 프로젝트 키
    "{{SEGMENT_KEY}}",  // 콘솔에서 가져온 세그먼트 키
    function(response) {
      nfCallback(response);
    }
  );
}

function nfCallback(response) {
  const { status, statusCode, message } = response;
  switch(status) {
    case 'Success':
      // 진입 또는 우회 응답을 받은 경우
      // 기존 서비스 로직 실행
      break;
    case 'Error':
      // 시스템 에러 발생 시
      // 일반적으로 Success와 동일하게 처리
      break;
    case 'NetworkError':
      // 네트워크 에러 발생 시
      // 재시도 또는 알림 처리
      break;
  }
}

// 작업 완료 후 키 반납
function handleActionComplete() {
  Netfunnel.nfStop(
    "{{PROJECT_KEY}}",
    "{{SEGMENT_KEY}}"
  );
}

구간 제어

최적 용도: 결제 프로세스, 다단계 프로세스

1. 콘솔에서 세그먼트 생성 (기본 제어와 동일)
2. 코드에 추가:

// 구간 시작
Netfunnel.nfStartSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}",
  function(response) {
    nfCallback(response);
  }
);

// 구간 종료 (전체 프로세스 완료 시)
Netfunnel.nfStopSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}"
);

---

4단계: 테스트

1. Limited Inflow를 0으로 설정하고 대기실이 올바르게 표시되는지 확인
2. Limited Inflow를 1로 설정 (즉시 진입해야 함)
3. Network 탭에서 키 반납 확인 (ts.wseq?opcode=5004 HTTP 200)

---

도움이 필요하신가요?

• 문제 해결: 일반적인 문제 및 해결 방법
• 브라우저 콘솔에서 NetFUNNEL 로그 확인 (printLog: true 설정)
• 콘솔의 프로젝트/세그먼트 키가 정확히 일치하는지 확인