본문으로 건너뛰기
버전: 4.6.1

Web/JavaScript 에이전트

개요​

JavaScript 에이전트는 웹 애플리케이션에 NetFUNNEL 4 트래픽 제어 기능을 제공하는 클라이언트 측 SDK입니다. 웹 페이지에 직접 통합되어 대기열 관리 및 대기실 기능을 구현하며, 서버 부하를 분산하고 트래픽이 많은 기간 동안 안정적인 사용자 경험을 보장합니다.

주요 기능​

  • 클라이언트 측 SDK: 간단한 JavaScript API 호출로 웹 페이지에 직접 통합
  • 두 가지 통합 방법: URL 트리거 통합(코드 없음)과 코드 기반 통합(정밀 제어) 중 선택
  • 유연한 제어: 페이지 수준 보호를 위한 URL 트리거, 버튼/API 수준 제어를 위한 코드 기반
  • 네이티브 대기실: 사용자 정의 UI 옵션이 있는 WebView 기반 대기실 템플릿
  • 실시간 대기열 업데이트: 실시간 대기열 위치, 대기 시간 및 진행 정보 수신
  • 네트워크 복구: 네트워크 문제로부터 자동 복구하여 사용자 경험 유지
  • 강력한 오류 처리: 스마트 오류 처리 전략을 갖춘 포괄적인 콜백 시스템
  • 경량 SDK: 바닐라 JavaScript 지원으로 최소한의 종속성
  • 크로스 브라우저 호환성: 모든 최신 브라우저 및 프레임워크에서 작동

시스템 요구 사항​

  • 브라우저: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
  • JavaScript: ES6+ 지원 필요
  • 프레임워크: React, Vue, Angular, 바닐라 JavaScript 등과 호환
  • HTTPS: 프로덕션 환경에서 필요

호환 환경​

  • 웹 애플리케이션: 단일 페이지 애플리케이션(SPA), 다중 페이지 애플리케이션(MPA), 프로그레시브 웹 앱(PWA)
  • 프레임워크: React, Vue.js, Angular, Next.js, Nuxt.js 및 바닐라 JavaScript
  • 모든 웹 플랫폼: 데스크톱 브라우저, 모바일 브라우저, 임베디드 웹뷰

작동 방식​

JavaScript SDK는 웹 애플리케이션과 원활하게 통합됩니다:

  1. SDK 초기화: NetFUNNEL 스크립트를 포함하고 구성으로 초기화
  2. 통합 선택: URL 트리거 통합(자동) 또는 코드 기반 통합(수동 제어) 사용
  3. WebView 대기실: SDK가 WebView 기반 대기실 표시(기본 템플릿 또는 사용자 정의 UI)
  4. 사용자 경험: 웹사이트 디자인 및 흐름과의 원활한 통합

통합 방법 예제​

URL 트리거 통합 흐름:

사용자가 URL 방문 → 자동 확인 → 대기실(필요한 경우) → 원본 페이지

코드 기반 통합 흐름:

사용자 작업 → nfStart() → 대기실 → onSuccess() → 사용자 진행 → nfStop()

통합 방법​

1. URL 트리거 통합​

  • 최적 용도: 페이지 수준 보호, 랜딩 페이지, 프로모션
  • 설정: 콘솔에서 트리거 규칙 구성(코드 변경 없음)
  • 사용자 경험: 대기실로 자동 리디렉션 후 대상 페이지로 반환
  • 제어 수준: 페이지 기반 트래픽 제어

2. 코드 기반 통합​

  • 최적 용도: 버튼 클릭, API 호출, 정밀 제어
  • 설정: JavaScript 코드에서 NetFUNNEL 함수 호출
  • 사용자 경험: 현재 화면에 모달 대기실
  • 제어 수준: 작업 기반 트래픽 제어

중요한 제한 사항​

모바일 앱 고려 사항
  • 네이티브 모바일 앱: 이 SDK는 네이티브 모바일 앱 환경(Android/iOS 네이티브 코드)에서 작동하지 않습니다
  • 네이티브 모바일 앱: 네이티브 모바일 앱 트래픽 제어의 경우 대신 Android 에이전트 또는 iOS 에이전트를 사용하세요

시작하기​

JavaScript 에이전트를 빠르게 시작하려면 빠른 시작 가이드를 참조하세요.

연습 프로젝트 사용 가능

연습할 기본 프로젝트가 필요하신가요? NetFUNNEL JavaScript 에이전트 통합 연습을 위해 준비된 웹 애플리케이션(바닐라 JavaScript MPA) 템플릿을 포함한 샘플 프로젝트를 확인하세요.

문서​

핵심 문서​

구현 가이드​

관련 콘텐츠​