> For the complete documentation index, see [llms.txt](https://docs.wepin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wepin.io/widget-integration/web-javascript-sdk/login-library/installation.md).

# 설치

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

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

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

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

{% endtab %}

{% tab title="yarn" %}

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

{% endtab %}
{% endtabs %}

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

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

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

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

```javascript
const initWepinLogin = async () => {
    const { WepinLogin } = await import('@wepin/login-js');
    const wepinLogin = new WepinLogin({
        appKey: '',
        appId: '',
    });
    await wepinLogin.init({
        defaultLanguage: 'ko',
    });
}
```

{% endhint %}