infrablockchain-docs
ko
ko
  • 인프라블록체인
    • 배우기
      • 아키텍처
        • 아키텍처
        • 네트워크 참여자
        • 파라체인
          • 시스템 파라체인
      • 프로토콜
        • 시스템 토큰
        • 트랜잭션 수수료
        • Proof of Transaction
      • Substrate
        • 배우기
          • 기초 지식
            • 암호학
            • 블록체인 기본 개념
            • 합의
            • 네트워크와 노드
            • 트랜잭션과 블록 기본 사항
            • 트랜잭션 수명주기
            • 오프체인 작업
            • 라이트 클라이언트
            • Substrate를 위한 Rust
            • 라이브러리 소개
            • 아키텍처와 Rust 라이브러리
            • 파일 구조
            • 계정, 주소 및 키
            • 트랜잭션 형식
            • 난수 생성
          • 프레임
            • FRAME 팔레트
            • FRAME 매크로
            • 커스텀 팔레트
            • 팔레트 커플링
            • Origin
            • 이벤트와 에러
            • 런타임 스토리지 구조
            • 상태 전이와 스토리지
            • SCALE 인코딩
            • 트랜잭션, Weight 및 수수료
            • 런타임 API
            • 런타임 업그레이드
            • 런타임 개발
          • 계정 데이터 구조
          • 주소 형식
          • 용어집
          • cli
            • 아카이브
            • 메모리 프로파일러
            • 노드 템플릿
            • 사이드카
            • srtool
            • 서브키
            • subxt
            • try-runtime
            • tx-wrapper
          • 런타임 개발
            • 기본
              • Genesis 상태 구성하기
              • 런타임 상수 구성
              • 체인 스펙을 커스텀하기
              • 팔레트 가져오기
              • 도우미 함수 사용하기
            • 합의 모델
              • 작업 증명을 사용하는 체인 구성
              • 하이브리드 노드 생성하기
            • 오프체인 워커
              • 오프체인 HTTP 요청하기
              • 오프체인 인덱싱
              • 오프체인 로컬 스토리지
            • 팔레트 설계
              • 크라우드펀딩 구성하기
              • 스토리지 구조체 (struct) 생성하기
              • 잠금 가능한 통화 구현
              • 무작위성 적용하기
              • 느슨한 팔레트 결합 사용하기
              • 타이트한 팔레트 결합 사용하기
            • 파라체인 개발
              • HRMP 채널 추가하기
              • 로컬 파라체인 노드 추가하기
              • 릴레이 체인에 연결하기
              • 솔로 체인을 변환하기
              • 론칭 준비
              • 콜레이터 선택
              • 파라체인 업그레이드
            • 스토리지 마이그레이션
              • 기본 저장소 마이그레이션
              • 스토리지 마이그레이션 트리거
            • 테스트
              • 기본 테스트 설정하기
              • 전송 함수 테스트하기
            • 도구
              • 체인을 위한 txwrapper 생성
              • REST 엔드포인트를 사용하여 체인 데이터 가져오기
              • try-runtime 사용하기
              • Wasm 바이너리 검증하기
            • 가중치
              • 벤치마크 추가
              • 수수료 계산하기
              • 조건부 가중치 사용
              • 사용자 정의 가중치 사용하기
        • 빌드하기
          • 제작할 것을 결정하세요
          • 빌드 프로세스
          • 결정론적 런타임 빌드
          • 체인 스펙
          • Genesis 구성
          • 애플리케이션 개발
          • RPC
          • 문제 해결
        • 튜토리얼
          • 설치하기
            • 개발자 도구
            • 리눅스 개발 환경
            • macOS 개발 환경
            • Rust 툴체인
            • Rust 문제 해결 방법
            • Windows 개발 환경
          • 빠른 시작
            • 코드 탐색하기
            • 런타임 수정하기
            • 노드 시작하기
            • Substrate 한눈에 보기
          • 블록체인 구축
            • 신뢰할 수 있는 노드 추가
            • 특정 노드 승인
            • 로컬 블록체인 구축하기
            • 네트워크 시뮬레이션
            • 실행 중인 네트워크 업그레이드
          • 애플리케이션 로직 구축
            • 런타임에 팔레트 추가하기
            • 오프체인 워커 추가
            • 사용자 정의 팔레트 게시
            • 함수 호출의 출처 지정하기
            • 사용자 정의 팔레트에서 매크로 사용하기
          • 유용한 도구들
            • EVM 계정에 접근하기
            • 이더리움 통합
            • 사이드카 엔드포인트 탐색하기
            • 경량 클라이언트 노드 통합
          • 스마트 컨트랙트
            • 스마트 컨트랙트
            • 토큰 계약 작성하기
            • 스마트 컨트랙트 개발하기
            • 첫 번째 계약 준비하기
            • 스마트 컨트랙트 문제 해결
            • 값 저장을 위한 맵 사용
      • XCM
        • XCM
        • XCM 형식
    • 서비스 체인
      • 인프라DID
      • 인프라EVM
      • URAuth(Universal Resource Auth)
    • 데브 옵스
      • 체인 빌드
      • 배포
      • 모니터링
    • 튜토리얼
      • 기초
        • 시스템 토큰 관리 프로세스
        • 시스템 토큰을 트랜잭션 수수료로 사용해보기
        • 트랜잭션에 투표 포함 시키기
        • 밸리데이터 보상 받기
      • 구축하기
        • 인프라릴레이체인 구축하기
        • 파라체인 구축하기
        • 메시지 전달 채널 열기
        • XCM을 이용하여 토큰 전송하기
        • Asynchronous Backing 적용하기
      • 테스트
        • 벤치마크
        • 런타임 확인
        • 디버그
        • 테스트 네트워크에서 파라체인 시뮬레이션하기
        • 단위 테스트
      • 서비스체인
        • 인프라DID
          • 구축하기
          • 공개키 추가하기
          • 서비스 엔드포인트 등록하기
          • DID 생성하기
        • 인프라EVM
          • 구축하기
          • EVM에 자금 입금 및 인출하기
          • ERC20 토큰 컨트랙트 배포하기
          • ERC721 토큰 컨트랙트 배포하기
          • ERC1155 토큰 컨트랙트 배포하기
  • 뉴날 데이터 마켓
Powered by GitBook
On this page
  • 시작하기 전에
  • 튜토리얼 목표
  • 잘 알려진 체인에 연결하기
  • 사용자 정의 체인 사양에 연결하기
  1. 인프라블록체인
  2. 배우기
  3. Substrate
  4. 튜토리얼
  5. 유용한 도구들

경량 클라이언트 노드 통합

브라우저에서 Substrate Connect를 사용하여 Substrate 기반 블록체인에 연결하는 방법을 보여줍니다.

Previous사이드카 엔드포인트 탐색하기Next스마트 컨트랙트

Last updated 1 year ago

Substrate Connect에서 경량 클라이언트 노드를 배웠듯이, 경량 클라이언트 노드는 하드웨어 및 소프트웨어 요구 사항이 최소한인 상태에서 블록체인 데이터에 안전하고 탈중앙화된 액세스를 제공합니다.

이 튜토리얼에서는 경량 클라이언트를 사용하여 어떤 Substrate 기반 블록체인에 연결할 수 있는 방법을 보여줍니다. 이를 설명하기 위해 에 애플리케이션을 연결하는 방법을 배우게 될 것입니다. Statemint는 Polkadot에 연결되어 있으며 공개적으로 액세스 가능한 체인 사양 파일을 가지고 있는 시스템 파라체인입니다.

시작하기 전에

시작하기 전에 다음을 확인하세요:

  • Javascript 및 Typescript로 작업하기 위해 코드 편집기를 설정했습니다.

  • 가 설치되어 있습니다.

튜토리얼 목표

이 튜토리얼을 완료함으로써 다음 목표를 달성할 수 있습니다:

  • Substrate Connect Javascript 라이브러리를 사용하여 Polkadot 릴레이 체인에 연결합니다.

  • Substrate Connect에서 사용할 사용자 정의 체인 사양 파일을 지정하는 방법을 배웁니다.

  • 사용자 정의 체인 사양에 연결된 파라체인에 연결합니다.

잘 알려진 체인에 연결하기

경량 클라이언트가 네트워크에 연결하려면 경량 클라이언트가 연결할 네트워크, 통신할 노드 및 제네시스에서 필요한 합의 중요 상태를 지정하는 웹 애플리케이션이 있어야 합니다. 이 정보는 네트워크의 파일에서 사용할 수 있습니다.

Substrate Connect는 열거 목록에 정의된 여러 체인을 인식하도록 사전 구성되어 있습니다. 이러한 잘 알려진 체인은 다음과 같습니다:

  • polkadot으로 식별된 Polkadot

  • ksmcc3으로 식별된 Kusama

  • rococo_v2_2로 식별된 Rococo

  • westend2로 식별된 Westend

이러한 체인 중 하나에 연결하려면:

  1. 컴퓨터에서 새로운 터미널 쉘을 엽니다.

  2. 다음 명령을 사용하여 empty-webapp 템플릿을 복제하여 Substrate Connect를 사용하는 웹 애플리케이션을 만듭니다.

    git clone https://github.com/bernardoaraujor/empty-webapp
  3. 다음 명령을 실행하여 empty-webapp 디렉토리로 이동합니다.

    cd empty-webapp
  4. 다음 명령을 실행하여 Substrate Connect를 설치합니다.

    yarn add @substrate/connect
  5. 다음 명령을 실행하여 Polkadot-JS RPC 공급자에서 종속성을 설치합니다.

    yarn add @polkadot/rpc-provider
  6. 다음 명령을 실행하여 Polkadot-JS API에서 종속성을 설치합니다.

    yarn add @polkadot/api

    이러한 종속성을 설치한 후에는 샘플 애플리케이션에서 사용할 수 있습니다.

  7. 선호하는 코드 편집기에서 empty-webapp/index.ts 파일을 엽니다.

  8. 다음 애플리케이션 코드를 복사하여 substrate-connect를 공급자로 사용하는 Substrate Connect 인스턴스를 만듭니다. 이 인스턴스는 polkadot 체인 사양 파일을 사용하여 Polkadot 릴레이 체인에 연결합니다.

    import { ScProvider } from "@polkadot/rpc-provider/substrate-connect";
    import * as Sc from "@substrate/connect";
    import { ApiPromise } from "@polkadot/api";
    
    window.onload = () => {
      void (async () => {
        try {
          const provider = new ScProvider(Sc, Sc.WellKnownChain.polkadot);
    
          await provider.connect();
          const api = await ApiPromise.create({ provider });
          await api.rpc.chain.subscribeNewHeads((lastHeader: { number: unknown; hash: unknown }) => {
            console.log(`💡 새로운 블록 #${lastHeader.number}의 해시는 ⚡️ ${lastHeader.hash}입니다.`);
          });
        } catch (error) {
          console.error(<Error>error);
        }
      })();
    };

    이 샘플 애플리케이션 코드에서 Substrate Connect 인스턴스를 생성하는 방법은 Polkadot-JS API를 사용하여 WebSocket 인스턴스를 생성하는 방법과 유사합니다. Polkadot-JS API만 사용하는 경우 다음과 같이 인스턴스를 생성합니다:

    // Import
    import { ApiPromise, WsProvider } from "@polkadot/api";
    
    // Construct
    const wsProvider = new WsProvider("wss://rpc.polkadot.io");
    const api = await ApiPromise.create({ provider: wsProvider });

    Substrate Connect의 경우 WebSocket (WsProvider) 공급자를 Substrate Connect (ScProvider) 공급자로 대체하고 WebSocket URL 클라이언트 주소 대신 네트워크에 연결할 체인 사양 (WellKnownChain.polkadot)을 지정합니다.

  9. 다음 명령을 실행하여 남은 종속성을 설치합니다.

    yarn
  10. 다음 명령을 실행하여 웹 애플리케이션을 시작합니다.

yarn dev

로컬 서버를 시작할 때 컴파일러 오류가 발생하면 현재 yarn 구성에서 고려되지 않은 종속성이 누락된 것일 수 있습니다. 종속성이 누락된 경우 다음과 유사한 명령을 실행하여 패키지를 추가할 수 있습니다.

yarn add -D buffer
  1. 브라우저가 http://localhost:3001/ URL을 열었는지 확인합니다.

  2. 브라우저 콘솔을 엽니다.

사용하는 브라우저 및 운영 체제에 따라 브라우저 콘솔로 이동하고 열기하는 방법이 다릅니다. 예를 들어, Chrome에서는 기타 도구, 개발자 도구를 선택한 다음 콘솔을 클릭합니다.

  1. smoldot 프로세스가 초기화되고 Polkadot에서 수신된 블록의 해시가 표시되는지 확인합니다.

예를 들어, 콘솔에 다음과 유사한 로그 항목이 표시되어야 합니다:

[substrate-connect-extension] [smoldot] Smoldot v0.7.7
[substrate-connect-extension] [smoldot] polkadot에 대한 체인 초기화 완료. 이름: "Polkadot". 제네시스 해시: 0x91b1…90c3. 상태 루트 해시: 0x29d0d972cd27cbc511e9589fcb7a4506d5eb6a9e8df205f00472e5ab354a4e17. 네트워크 식별자: 12D3KooWRse9u6Z9ukP4C92YCCH2gXziNm8ThRch2owaaFh9H6D1. 체인 사양 또는 데이터베이스 시작 위치: 0x7f52…8902 (#14614672)
...
💡 새로운 블록 #14614893의 해시는 ⚡️ 0x18f8086952aa5f8f1f8a36ea05af462f6bb26615b481145f7c5daa24ebc0c4cd입니다.
💡 새로운 블록 #14614894의 해시는 ⚡️ 0x92ca6fd51bc7a2fc5991441e9736bcccf3be45cee6fc88d40d145fc4211ba477입니다.
💡 새로운 블록 #14614894의 해시는 ⚡️ 0x2353ce49f06206c6dd9882200666fa7d51fc43c1cc6a61cca81ce9fa543409cb입니다.
  1. Control-c를 눌러 smoldot 경량 클라이언트 노드를 중지합니다.

사용자 정의 체인 사양에 연결하기

사용자 정의 체인 사양 또는 공개적으로 액세스 가능한 파라체인에 연결하는 방법은 잘 알려진 체인에 연결하는 방법과 유사합니다. 코드의 주요 차이점은 Substrate Connect에서 사용할 체인 사양을 명시적으로 식별해야 한다는 것입니다.

Statemint에 연결하려면 다음을 수행합니다:

  1. 코드 편집기에서 index.ts 파일을 엽니다.

  2. 다음 코드로 내용을 대체합니다.

    import { ApiPromise } from "@polkadot/api";
    import { ScProvider } from "@polkadot/rpc-provider/substrate-connect";
    import * as Sc from "@substrate/connect";
    import jsonParachainSpec from "./statemint.json";
    
    window.onload = () => {
      void (async () => {
        try {
          const relayProvider = new ScProvider(Sc, Sc.WellKnownChain.polkadot);
          const parachainSpec = JSON.stringify(jsonParachainSpec);
          const provider = new ScProvider(Sc, parachainSpec, relayProvider);
    
          await provider.connect();
          const api = await ApiPromise.create({ provider });
          await api.rpc.chain.subscribeNewHeads((lastHeader: { number: unknown; hash: unknown }) => {
            console.log(`💡 새로운 블록 #${lastHeader.number}의 해시는 ⚡️ ${lastHeader.hash}입니다.`);
          });
        } catch (error) {
          console.error(<Error>error);
        }
      })();
    };

    이 코드에는 몇 가지 중요한 차이점이 있습니다.

    • statemint.json 체인 사양 파일이 jsonParachainSpec 객체로 가져와집니다.

    • 체인 사양은 JSON 인코딩된 문자열로 변환되어 parachainSpec 변수에 저장되어 웹 서버와 교환할 수 있도록 합니다.

    • ScProvider 공급자는 polkadot 릴레이 체인을 위해 생성되지만 파라체인 공급자를 생성하고 연결하는 데 사용됩니다.

Substrate Connect는 이 정보를 사용하여 파라체인이 통신하는 릴레이 체인을 결정합니다.

  1. 다음 명령을 실행하여 웹 애플리케이션을 시작합니다.

    yarn dev
  2. 브라우저가 http://localhost:3001/ URL을 열었는지 확인합니다.

  3. 브라우저 콘솔을 엽니다.

  4. smoldot 프로세스가 초기화되고 Polkadot에서 수신된 블록의 해시가 표시되는지 확인합니다.

    예를 들어, 콘솔에 다음과 유사한 로그 항목이 표시되어야 합니다:

    [substrate-connect-extension] [smoldot] statemint에 대한 파라체인 초기화 완료. 이름: "Statemint". 제네시스 해시: 0x68d5…de2f. 상태 루트 해시: 0xc1ef26b567de07159e4ecd415fbbb0340c56a09c4d72c82516d0f3bc2b782c80. 네트워크 식별자: 12D3KooWNicu1ZCX6ZNUC96B4TQSiet2NkoQc7SfitxWWE4fQgpK. 릴레이 체인: polkadot (id: 1000)
    ...
    💡 새로운 블록 #3393027의 해시는 ⚡️ 0x2401313496be4b1792d704f83b684be6bd2188a618581d30b3addb3648c4ad3a입니다.
    [substrate-connect-extension] [smoldot] Smoldot v0.7.7. 현재 메모리 사용량: 222 MiB. 평균 다운로드: 63.1 kiB/s. 평균 업로드: 735 B/s.
    💡 새로운 블록 #3393028의 해시는 ⚡️ 0x512af8ad5577f509f3f5123916ff2da6ca0f86df8099eafbc0bc001febec62dd입니다.

이 간단한 웹 애플리케이션은 블록 해시를 검색하기 위해 Polkadot에만 연결합니다. 이 애플리케이션의 주요 목적은 네트워크의 특정 RPC 노드의 URL과 같은 중앙 집중식 진입점을 사용하지 않고 체인에 연결하는 것을 보여주는 것입니다. 하지만 WsProvider를 ScProvider로 대체한 후에는 기존의 를 사용하여 애플리케이션에 대한 코드를 작성할 수 있으므로 이 애플리케이션을 확장하여 더 많은 작업을 수행할 수 있습니다.

에서 사용자 정의 체인 사양 파일을 다운로드합니다.

에서 생성한 empty-webapp 디렉토리로 다운로드한 체인 사양을 복사합니다.

축하합니다! 브라우저에서 경량 클라이언트를 사용하여 Statemint와 Polkadot에 연결하는 간단한 웹 애플리케이션을 만들었습니다. 동일한 애플리케이션에서 더 많은 체인에 대한 연결을 추가하는 방법을 알아보려면 를 확인하세요.

Statemint 파라체인
yarn 패키지 관리자
체인 사양
WellKnownChain
Polkadot-JS API
cumulus 저장소
이 데모
잘 알려진 체인에 연결하기