📘

React SDK 11.13.0 이상 버전에서만 지원합니다.

디버깅 용도로만 사용하는 것을 권장합니다.

사용자 식별자를 확인하고 A/B 테스트, 기능플래그에 강제할당 하는 방법을 설명합니다.

아래의 의존성을 추가합니다.

// [email protected] 이상일 경우
npm install @hackler/[email protected]

// [email protected] 미만일 경우
npm install @hackler/[email protected]

// [email protected] 이상일 경우
yarn add @hackler/[email protected]

// [email protected] 미만일 경우
yarn add @hackler/[email protected]

사용자 탐색 설정

• devTool 에 "@hackler/javascript-devtools" 에서 import한 HackleDevTools를 넣어주세요. (필수 *)
• autoOpenDevTool을 true로 설정할 경우 showUserExplorer을 호출하지 않아도 자동으로 사용자 탐색 창이 나타납니다. (기본 값은 false 입니다.)

기존 Hackle Client를 초기화하는 코드에 아래와 같이 옵션을 추가합니다.

import { createInstance } from "@hackler/react-sdk";
import HackleDevTools from "@hackler/javascript-devtools"

const config = {
  devTool: HackleDevTools,
  autoOpenDevTool: false,
};

// YOUR_BROWSER_SDK_KEY로 초기화
const hackleClient = createInstance(YOUR_BROWSER_SDK_KEY, config);

// 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
hackleClient.showUserExplorer()

// 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
hackleClient.hideUserExplorer()

❗️

Production에서는 autoOpenDevTool 옵션을 false 로 설정하세요.

autoOpenDevTool을 true로 설정할 경우 자동으로 사용자 탐색 창이 나타납니다.

사용자 탐색 창을 나타내고 싶은 시점에 hackleClient.showUserExplorer을 호출하는 식으로 사용하시는 것을 권장합니다.

사용자 탐색 창

화면 하단에 핵클 로고 버튼이 표시됩니다. 버튼 클릭시 설정 화면으로 진입 할 수 있습니다.

사용자 식별자 확인하기

화면 상단에서 사용자 식별자를 확인 및 복사 할 수 있습니다.

사용자 강제할당

• 화면하단에서 A/B 테스트, 기능플래그의 분배 결과를 확인할 수 있습니다.
• SelectBox 클릭 시 특정 그룹으로 강제할당 할 수 있습니다.
• Reset 버튼 클릭 시 강제할당이 해제됩니다.
• Reset all 버튼 클릭시 모든 강제할당이 해제됩니다.
• 브라우저에서 강제할당한 경우 해당 브라우저에서 분배하는 경우에만 적용됩니다. (대시보드 테스트기기에 등록되지 않습니다)
• 강제할당이 적용되지 않는경우 브라우저를 새로고침 해주세요.