# 설치

## 패키지 매니저로 설치하기 <a href="#installing-with-a-package-manager" id="installing-with-a-package-manager"></a>

npm 패키지로 설치 가능합니다.&#x20;

{% tabs %}
{% tab title="npm" %}

```bash
npm install @wepin/pin-js
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @wepin/pin-js
```

{% endtab %}
{% endtabs %}

설치가 완료되면 앱 등록 후 할당받은 App ID와 App Key를 사용하여 아래와  같이 WepinPin 인스턴스를 초기화합니다. 이렇게 하면  위핀의 핀 패드를 사용할 수 있게 됩니다.

<pre class="language-javascript"><code class="lang-javascript"><strong>// 1. 패키지 import
</strong>import { WepinPin } from '@wepin/pin-js'
<strong>
</strong>// 2. 초기화
const wepinPin = new WepinPin({
  appKey: 'your-wepin-app-key',
})
</code></pre>

{% hint style="danger" %}
해당 패키지는 **클라이언트 사이드 렌더링(CSR: Client Side Rendering)** 환경에서만 동작합니다. 서버 사이드 렌더링(SSR: Server Side Rendering) 환경에서 이 패키지를 사용할 경우, CSR에서만 패키지를 불러올 수 있도록 설정이 필요합니다.

아래 코드를 참고하여 설정하세요:

```typescript
const initWepinPin = async () => {
   const { WepinPin } = await import('@wepin/pin-js');
   const wepinPin = new WepinPin({
       appKey: '',
   });
   await wepinPin.init();
}
```

{% endhint %}


---

# 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.wepin.io/widget-integration/web-javascript-sdk/pin-pad-library/installation.md?ask=<question>
```

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.