본문으로 건너뛰기

설치 (Installation)

Appify SDK를 프로젝트에 설치하는 방법입니다.

NPM / Yarn​

# npm
npm install @nolraunsoft/appify-sdk

# yarn
yarn add @nolraunsoft/appify-sdk

# pnpm
pnpm add @nolraunsoft/appify-sdk

CDN​

<script src="https://cdn.jsdelivr.net/npm/@nolraunsoft/appify-sdk@latest/dist/appify-sdk.min.js"></script>
<script>
  appify.initialize({ debug: true });
</script>

기본 사용법​

SDK는 싱글턴 패턴으로 설계되어, 어디서 import해도 동일한 인스턴스를 사용합니다.

import { appify } from '@nolraunsoft/appify-sdk';

// 초기화 (앱 시작 시 한 번만)
await appify.initialize({ debug: true });

// 이후 어디서든 바로 사용
const deviceInfo = await appify.device.getInfo();

React 예시​

Provider 설정 (권장)​

앱 전체에서 SDK를 사용하려면 Provider 패턴을 사용하세요.

"use client";

import { ReactNode, useEffect } from "react";
import { appify } from "@nolraunsoft/appify-sdk";

export function AppifyProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    appify.initialize({ debug: true });
  }, []);
  return <>{children}</>;
}
import { AppifyProvider } from "./providers/AppifyProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <AppifyProvider>{children}</AppifyProvider>
      </body>
    </html>
  );
}

페이지에서 사용​

Provider에서 초기화했으므로, 각 페이지에서는 바로 사용 가능합니다.

"use client";
import { appify } from "@nolraunsoft/appify-sdk";

export default function Home() {
  const handleClick = async () => {
    if (appify.isWebview) {
      const info = await appify.device.getInfo();
      console.log(info);
    }
  };

  return <button onClick={handleClick}>디바이스 정보</button>;
}

싱글턴 패턴​

SDK는 싱글턴으로 동작합니다:

  • 여러 파일에서 import해도 동일한 인스턴스 사용
  • initialize()를 여러 번 호출해도 최초 1회만 실행
  • window.appify로도 접근 가능 (브라우저 콘솔 디버깅 시 유용)
import { appify } from '@nolraunsoft/appify-sdk';

console.log(appify === window.appify); // true

CDN 사용​

빌드 도구 없이 HTML에서 직접 사용할 수도 있습니다.

IIFE (스크립트 태그)​

<script src="https://cdn.jsdelivr.net/npm/@nolraunsoft/appify-sdk@latest/dist/appify-sdk.min.js"></script>
<script>
  appify.initialize({ debug: true });
</script>

ESM (모듈)​

<script type="module">
  import { appify } from 'https://cdn.jsdelivr.net/npm/@nolraunsoft/appify-sdk@latest/dist/appify-sdk.esm.min.js';
  
  appify.initialize({ debug: true });
</script>

제공 파일​

파일용도
appify-sdk.jsIIFE (브라우저 전역)
appify-sdk.min.jsIIFE 압축 버전
appify-sdk.esm.jsES Module
appify-sdk.esm.min.jsES Module 압축 버전
appify-sdk.cjs.jsCommonJS (Node.js)