메인 콘텐츠로 건너뛰기

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

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

1. React 설치

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

2. @injectivelabs 패키지 설치

yarn을 사용하여 @injectivelabs 패키지를 설치할 수 있습니다.
이것들은 injective-ts 모노레포에서 가장 일반적으로 사용되는 패키지입니다.

3. Vite 구성 및 폴리필 추가

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

4. 상태 관리 사용

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

5. vite.config.ts

마지막 단계는 이전에 설치한 node-polyfills를 사용하도록 Vite를 구성하는 것입니다. vite.config.ts를 열고 plugins 배열 내에 node-polyfills를 추가하세요. 구성은 다음과 같아야 합니다:

8. 앱 부팅

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