메인 콘텐츠로 건너뛰기

​
React - 사용자 인터페이스 구축을 위한 라이브러리

React는 현재 가장 인기 있는 UI 프레임워크 중 하나입니다. @injectivelabs 패키지와 암호화 지갑과 상호 작용하는 데 필요한 일부 폴리필로 React + Vite 빌더를 구성하는 것을 도와드리겠습니다.

​
1. React 설치

Vite 문서의 시작하기 가이드를 따르고 애플리케이션을 설정하세요. 
$ npm create vite@latest

​
2. @injectivelabs 패키지 설치

yarn을 사용하여 @injectivelabs 패키지를 설치할 수 있습니다. 
$ yarn add @injectivelabs/sdk-ts @injectivelabs/networks @injectivelabs/ts-types @injectivelabs/utils

## 지갑 연결이 필요한 경우
$ yarn add @injectivelabs/wallet-strategy
이것들은 injective-ts 모노레포에서 가장 일반적으로 사용되는 패키지입니다.

​
3. Vite 구성 및 폴리필 추가

먼저 필요한 폴리필 패키지와 buffer를 추가합니다
모든 암호화 관련 탈중앙화 애플리케이션의 주요 종속성 중 하나는 Buffer입니다. 프로젝트에 Buffer를 추가하려면 종속성으로 설치한 다음 전역/window 객체로 가져올 수 있습니다.예제 vite.config.ts는 아래에 공유됩니다.
$ yarn add @bangjelkoski/node-stdlib-browser
$ yarn add -D @bangjelkoski/vite-plugin-node-polyfills
$ yarn add buffer
마지막으로 main.tsx에서 파일 상단에 buffer를 가져오세요 
import { Buffer } from "buffer";

if (!window.Buffer) {
    window.Buffer = Buffer; // 선택 사항, Buffer가 전역이어야 하는 패키지용
}

​
4. 상태 관리 사용

React에는 다양한 상태 관리자가 있으므로 사용할 것을 선택하고 설치하세요. 타사 솔루션을 설치하지 않고도 상태 관리를 위해 내장된 Context API를 사용할 수 있습니다. 선호하는 타사 상태 관리자는 Redux와 Zustand입니다. 
$ yarn add zustand

​
5. vite.config.ts

마지막 단계는 이전에 설치한 node-polyfills를 사용하도록 Vite를 구성하는 것입니다. vite.config.ts를 열고 plugins 배열 내에 node-polyfills를 추가하세요. 구성은 다음과 같아야 합니다: 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "@bangjelkoski/vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills({ protocolImports: true })],
  define: {
    global: "globalThis",
  },
  resolve: {
    alias: {
      // 기타
      buffer: "buffer/",
    },
  },
  optimizeDeps: {
    include: ["buffer"],
  },
});

​
8. 앱 부팅

마지막으로 yarn dev를 사용하여 로컬에서 앱을 시작하거나 yarn build를 사용하여 프로덕션용으로 빌드하여 Netlify, Vercel 등과 같은 정적 페이지 호스팅에 배포할 수 있습니다.