# 사용자 탐색
{% hint style="info" %}
**디버깅 용도로만 사용하는 것을 권장합니다.**
{% endhint %}
사용자 식별자를 확인하고 A/B 테스트, 기능플래그에 강제할당 하는 방법을 설명합니다.
아래의 의존성을 추가합니다.
{% tabs %}
{% tab title="npm" %}
```shell
// react-sdk@11.21.0 이상일 경우
npm install @hackler/javascript-devtools@1.0.2
// react-sdk@11.21.0 미만일 경우
npm install @hackler/javascript-devtools@1.0.1
```
{% endtab %}
{% tab title="yarn" %}
```shell
// react-sdk@11.21.0 이상일 경우
yarn add @hackler/javascript-devtools@1.0.2
// react-sdk@11.21.0 미만일 경우
yarn add @hackler/javascript-devtools@1.0.1
```
{% endtab %}
{% endtabs %}
react-sdk 버전
javascript-devtools 버전
11.13.0 <= version < 11.21.0
1.0.1
11.21.0 <= version
1.0.2
### 사용자 탐색 설정
키
기능
기본값
지원
devTool
사용자 탐색을 사용할 수 있도록 합니다.
undefined
11.13.0+
autoOpenDevTool
사용자 탐색 버튼이 자동으로 나타나도록 하는 옵션입니다.
false
11.13.0+
* `devTool` 에 `"@hackler/javascript-devtools"` 에서 import한 `HackleDevTools`를 넣어주세요. **(필수\*)**
* `autoOpenDevTool`을 `true`로 설정할 경우 `showUserExplorer`을 호출하지 않아도 자동으로 사용자 탐색 창이 나타납니다. (기본 값은 `false` 입니다.)
기존 Hackle Client를 초기화하는 코드에 아래와 같이 옵션을 추가합니다.
```javascript
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()
```
{% hint style="danger" %}
Production에서는 `autoOpenDevTool` 옵션을 `false` 로 설정하세요.
autoOpenDevTool을 true로 설정할 경우 자동으로 사용자 탐색 창이 나타납니다.
사용자 탐색 창을 나타내고 싶은 시점에 `hackleClient.showUserExplorer`을 호출하는 식으로 사용하시는 것을 권장합니다.
{% endhint %}
### 사용자 탐색 창
화면 하단에 핵클 로고 버튼이 표시됩니다. 버튼 클릭시 설정 화면으로 진입 할 수 있습니다.
## 사용자 식별자 확인하기
화면 상단에서 사용자 식별자를 확인 및 복사 할 수 있습니다.
## 사용자 강제할당
* 화면하단에서 A/B 테스트, 기능플래그의 분배 결과를 확인할 수 있습니다.
* SelectBox 클릭 시 특정 그룹으로 강제할당 할 수 있습니다.
* `Reset` 버튼 클릭 시 강제할당이 해제됩니다.
* `Reset all` 버튼 클릭시 모든 강제할당이 해제됩니다.
* 브라우저에서 강제할당한 경우 해당 브라우저에서 분배하는 경우에만 적용됩니다. (대시보드 테스트기기에 등록되지 않습니다)
* 강제할당이 적용되지 않는경우 브라우저를 새로고침 해주세요.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.hackle.io/development-guide/react/react-user-explorer.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.