초보자 가이드: `ethers.js`를 사용하는 4가지 방법

ethers.js에 대한 플레이라운드를 설정하는 방법에 대한 4가지 간단한 참고 사항 . 프론트엔드 경험이 있는 처음 web3 개발자라도 한 시간 이내에 완료할 수 있는 방법 가이드입니다. web3.js 거의 동일합니다.

Ethers.js/web3.js는 "Ethereum JavaScript API"입니다.

a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.(via web3.js docs)

ethers.js 로 플레이하려면 다음 도구가 필요합니다.

콘솔: 노드 콘솔, Truffle 콘솔, Hardhat 콘솔

프론트엔드 프레임워크: React/Next.js/Web3-React

블록체인 공급자: Infura, Alchemy, Metamask 공급자

지갑 : MetaMask(브라우저 확장 지갑)

ethers.js와 블록체인의 관계는 다음과 같습니다.

ethers.js 자바스크립트 API

(제공자 + RPC 끝점)

블록체인 네트워크

Ethers.js docs에 설명된 "제공자":

A Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.

ethers.js 의 도움으로 이더리움 블록체인을 사용하려면 다음과 같이 해야 합니다.

ethers.js 인스턴스 가져오기

공급자에 연결

가지고 놀다

ethers.js API 문서는 https://docs.ethers.io/v5/api/에서 찾을 수 있습니다.

1. 대화형 콘솔 - 노드 콘솔

노드 콘솔을 사용하려면 다음을 실행하십시오.

mkdir playeth && cd playeth
yarn add ethers

node 를 실행하여 노드 콘솔을 엽니다.

우리는 Alchemy Provider를 사용할 것입니다: https://docs.ethers.io/v5/api/providers/api-providers/#AlchemyProvider

//node console
var ethers = require('ethers')
//using AlchemyProvider with shared project ID
const provider =new ethers.providers.AlchemyProvider()

//get current block number
await provider.getBlockNumber()

provider.network
//{
//  name: 'homestead',
//  chainId: 1,
//...
//}

// Get the balance of an account
balance = await provider.getBalance("ethers.eth")
ethers.utils.formatUnits(balance)

2. 대화형 콘솔 - Hardhat 콘솔

web3 개발자가 스마트 계약 및 DAPP를 작성함에 따라 Hardhat 또는 Truffle 콘솔을 사용하여 블록체인과 상호 작용합니다. Hardhat 및 Truffle Suite 둘 다 개발 환경을 제공합니다.

hardhat 콘솔 환경에는 ether.js 인스턴스가 있습니다.

hardhat을 설치하고 프로젝트를 생성합니다.

mkdir hheth && cd hheth
yarn hardhat

"TypeScript를 사용하는 고급 샘플 프로젝트 만들기"옵션을 선택합니다.
hardhat.config.ts에 메인넷 추가:

    mainnet: {
      url: process.env.ALCHEMY_URL || "",
    },

다음을 실행하여 hardhat 콘솔을 입력합니다.

yarn hardhat console --network mainnet

hardhat 콘솔에서 ethers.js를 사용하여 이더리움 메인넷과 상호 작용합니다.

ethers.version
//'ethers/5.5.3'

const provider = new ethers.providers.AlchemyProvider()
await provider.getBlockNumber()

3. ethers.js를 사용하여 스크립트 작성

파일playeth.ts을 추가하고 명령줄에서 실행합니다.

touch playeth.ts

playeth.ts :

async function main(){

const ethers =require("ethers")
const provider = new ethers.providers.AlchemyProvider()

const blocknumber  =await provider.getBlockNumber()
console.log("blocknumber", blocknumber)

const balance = await provider.getBalance("ethers.eth")
console.log("balance of ethers.eth",ethers.utils.formatEther(balance))
}

main()

playeth.ts 스크립트 실행:

node playeth.ts
//blocknumber 14088543
//balance of ethers.eth 0.082826475815887608

4. 간단한 DAPP: 메타마스크와 함께 ethers.js 사용하기

Ethers.js 문서는 다음을 제공합니다a good explanation of MetaMask.

MetaMask, which is a browser extension that provides:

• A connection to the Ethereum network (a Provider)
• Holds your private key and can sign things (a Signer)

1단계: Next.js 프로젝트 초기화

샘플 프로젝트를 시작하기 위해 next.js 프레임워크를 사용할 것입니다.

yarn create next-app playeth --typescript
cd playeth
yarn dev

이 프로젝트를 방문할 수 있는 위치: http://localhost:3000/

2단계: 에테르 설치

yarn add ethers

3단계: 페이지 작성

index.tsx를 다음으로 변경:

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { ethers } from "ethers";
import { useEffect,useState } from 'react';

declare let window: any;
const Home: NextPage = () => {
  const [balance, setBalance] = useState<String | undefined>()
  const [address, setAddress] = useState<String | undefined>()

  useEffect(() => {
    //client side code
    if(!window.ethereum) return

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    provider.getBalance("ethers.eth").then((result)=>{
      setBalance(ethers.utils.formatEther(result))
    })
  })

  function connect(){
    //client side code
    if(!window.ethereum) return

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    window.ethereum.enable().then(()=>{
      const signer = provider.getSigner()
      signer.getAddress().then((result)=>{setAddress(result)})
    })
  }

  return (
    <div>
      <main className={styles.main}>
        <h1>Sample DAPP</h1>
        <h3>Eth balance: {balance}</h3>
        <p><button onClick={connect} >Connect</button></p>
        <h3>Address: {address}</h3>
      </main>

    </div>
  )
}

export default Home

yarn dev를 실행하고 브라우저에서 http://localhost:3000/으로 이동하십시오.

이 페이지의 기능은 무엇입니까?

이 페이지는 const provider = new ethers.providers.Web3Provider(window.ethereum)

에 의해 MetaMask에 의해 주입된 이더리움 공급자 인스턴스를 가져옵니다.

이 페이지는 ethers.eth (주소: https://etherscan.io/address/0x643aa0a61eadcc9cc202d1915d942d35d005400c )의 잔액을 가져와 페이지에 표시합니다.

연결 버튼을 클릭하면 페이지 호출window.ethereum.enable()을 통해 MetaMask에 연결을 활성화하도록 요청합니다. 사용자는 Metamask 팝업 대화 상자에서 연결을 활성화해야 합니다.

연결되면 페이지가 MetaMask 주소를 가져와 표시합니다.

이 페이지가 MetaMask에 연결되어 있으면 팝업 없이 자동으로 연결됩니다. MetaMask에서 연결을 끊고 연결 버튼을 다시 클릭해 보세요.

위의 코드 스니펫은 ethers.js와 MetaMask를 함께 사용하는 기본 흐름을 설명하기 위한 것입니다.

MetaMask와 그 주입된 이더리움 제공자에 대해 더 알고 싶다면 MetaMask docs:

MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions.

튜토리얼 목록:

1. 간결한 안전모 튜토리얼(3부)

2. ethers.js로 블록체인 이해하기 (5부)

3. 튜토리얼: Remix와 Etherscan을 사용하여 첫 번째 DAPP 빌드(7 작업)

4. 튜토리얼: Hardhat, React 및 ethers.js를 사용하여 DApp 빌드(6 작업)

5. 튜토리얼: Web3-React 및 SWR로 DAPP 빌드

6. 자습서: OpenZeppelin(7 Tasks)을 사용하여 업그레이드 가능한 스마트 계약(프록시) 작성

7. 튜토리얼: Opensea와 같은 NFT 마켓플레이스 DApp 구축(5 Tasks)

이 튜토리얼이 도움이 되셨다면 Twitter에서 저를 팔로우하세요.