Vue | web3js

web3js

• web3.js는 HTTP, IPC 또는 WebSocket을 사용하여 로컬 또는 원격 이더리움 노드와 상호 작용할 수 있는 라이브러리 모음입니다.
• 이더리움을 사용해 DApp을 만드는 것은, 솔리디티 언어로 스마트 컨트랙트를 개발하거나, 블록체인과 상호작용하는 클라이언트를 개발하는 것을 의미한다.
• 이중에 후자를 위해서 사용하는 라이브러리가 web3.js다.
• web3.js는 이더리움 블록체인과 JSON RPC(Remote Procedure Call)를 이용해 소통한다.
• 이더리움에서는 클라이언트가 JSON RPC의 형식에 맞춰서 이더리움 노드에 데이터를 요청한다.
• web3.js와 연결된 노드를 provider라고 한다.

이 처럼 Web3js 는 자바스크립트로 Dapp과 연동을 하여 일반 사용자가 보다 편히 Dapp과 연동하여 기능을 수행하는 라이브러리 입니다. 오늘은 Vue를 활용하여 MetaMask 와 연동하는 법을 간단히 알아보겠습니다.

web3js 설치

• NPM 사용자

  npm install web3

• Yarn

  yarn add web3

• JavaScript CDN

  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

  원하는 프로젝트에 web3 설치를 합니다.

Vue MetaMask 연동

Vue에서 MetaMask 연동을 하는 방법을 알아보겠습니다. 현재 MetaMask는 전세계에서 제일 많이 이용하는 암호화폐 지갑으로 보안성과 연동성이 뛰어납니다.

function MetaMask() {
  // metamask에서 undefined 확인합니다. undefined가 아니라면 web3 인스턴스를 currentProider 생성합니다.
  let web3js = null
  const web3 = window.ethereum
  
  if (web3) {
    web3js = new Web3(window.ethereum)
  } else {
    // 해당 사용자의 컴퓨터에 메타마스크가 설치 되 있지 않을 때 이쪽으로 넘어오게 됩니다. 
    alert('MetaMask 설치가 필요합니다.')
  }
  
  // web3js 를 성공적으로 받았다면, 이제 사용자의 계정의 주소를 알아낼 수 있습니다.
  window.ethereum.enable()
  
  const clientAccount = () => {
    
   return new Promise((resolve, reject) => {
     
    web3.eth.requestAccounts((error, data) => {
      // 오류가 발생하지 않을 땐 사용자가 생성된 계정의 모든 주소가 넘어오게 됩니다.
      // 사용자가 현재 선택중인 계정의 주소를 얻어내기 위해서는 해당 데이터의 최상단 데이터가
      // 사용자가 현재 선택한 계정이라고 보시면 됩니다.
      if (!error) resolve(data[0])
      
      // 오류가 발생하면 해당 오류내용을 반환합니다.
      reject(error)
      
     })
     
    })
    console.log(clientAccount)
  }
}

위 함수를 실행하게 되면 먼저 메타 마스크 설치 여부를 나타낼 것입니다. 설치가 되지 않았다면 알림 창으로 문장을 띄워줍니다. 설치가 되었다면 메타 마스크에서 의존성을 주입받아 저희에 Vue에서 메타 마스크를 이용할 준비가 됩니다.
해당 의존성을 주입받은 후 먼저 현재 내 계정을 여기 사이트와 연결할 건지 물어보게 됩니다. 연결을 하면 이제 메타 마스크로 보이는 모든 계정의 주소, 잔액 등 여러 정보를 알아낼 수 있습니다.

Web3js API

• web3js Api는 공식 사이트가 있습니다.
• 위 처럼 계정의 주소를 가져오는 움직임 뿐만 아니라, 원하는 Dapp과 연동 후 함수를 동작 할 수 있습니다.
• 👋 web3js 공식 사이트 이동하시면 자세히 알아 볼 수 있습니다.

이제 간단한 예시를 들어 Dapp과 상호작용을 할 수 있는지 코드를 보여드리겠습니다. 방법은 아래와 같습니다.👇

🙋‍♂️ 들어가기전에 잠깐 !

Dapp과의 연동을 원하면 truffle을 활용해서 작성하신 SmartContract 소스 코드를 배포하셔서 ABI, SmartContract 주소가 필요합니다.

TestCode

import TestABI from '~/TestABI.json'
export const test = {
  data() {
   return {
    SMARTCONTRACT_AD: '0x0000....',
    SMARTCONTRACT_ABI: TestABI.abi
   }
  }
  // 위처럼 먼저 메타마스크와 연동됬다는 가정 하에 코드를 진행하겠습니다.
  async smartContract() {
	// 이처럼 노드에 배포된 Dapp과 연동을 하기 위한 기능입니다.
    const contract = new web3.eth.Contract(this.SMARTCONTRACT_ABI, this.SMARTCONTRACT_AD)
    // 해당 Dapp의 NFT의 소유자를 알아내는 Call 방식에 호출입니다.
    // Call 방식이기 때문에 따로 가스비를 소모하지 않고 호출이 바로 가능합니다.
    const owner = await contract.methods.ownerOf(1).call()
    // 해당 Dapp의 Send 방식에 호출을 알아보겠습니다.
    // Send 방식이기 때문에 사용자의 가스비를 소모하게 됩니다.
    await contract.methods
      .TestCode(1,2)
      .send({
      from: clientAccount,
      value: 0 // 값을 지불해야 할 시 여기에 wei 단위로 돈을 입력하시면 됩니다.
    })
      // 거래를 성공적으로 보낼 시 TxHash 반환됩니다.
      .on('transactionHash', txHash => {
      console.log('on transactionHash', txHash)
    })
      // 여기는 성공시 기다리는 부분입니다.
      // 이더리움 기준 24의 confirmaion을 지나면 성공으로 간주 합니다.
      .on('confirmation', (confirmationNumber, receipt) => {
      console.log('on confirmation', confirmationNumber)
    })
      .on('receipt', receipt => {
      console.log(receipt)
    })
      // 오류가 발생시 오류내용을 반환합니다.
      .on('error', error => {
      console.log(error)
      return alert('NFT Sale Failed')
    })
  }
}

• 앞전에 얘기했던 것 처럼 ABI, SmartContract 주소는 필수로 가지고 있어야 합니다.
• 해당 ABI 와 Address 가지고 web3js 로 원하는 Dapp과 연동을 할 수 있습니다.
• 해당 Dapp이 가지고 있는 기능은 전부 사용이 가능합니다.
• Call 방식의 함수호출은 가스비 소모도 없이 빠르게 진행 할 수 있습니다.
• Send 방식의 함수호출은 가스비를 소모해야 합니다. 해당 가스비와 해당 유저가 보낼 금액등, 모든 자료를 준비 후 함수를 호출해야 합니다. 이런 방식으로 진행하신다면 충분히 누구나 원하는 Dapp 과 상호작용을 할 수 있습니다.

글을 마치며..

오늘은 간단하게 Vue와 MetaMask를 이용해서 Dapp과 연동 및 상호작용에 대해서 알아봤습니다.
제가 제시한 방법 말고도 여러 방법이 존재하고 있습니다. 제 방식은 이렇다고 알려드리고 싶었습니다.
web3js 기능도 이것 말고 여러 가지가 있으니 꼭 한번 공식 사이트를 방문하셔서 확인하시면 좋겠습니다.
처음으로 혼자 모든 것을 개발하려고 하다 보니 힘들었던 점 그만두고 싶었던 점이 한두 번이 아니었던 것 같습니다, 하지만 포기하지 않고
끝까지 노력해서 부족한 실력 일지라도 누구한테 이 글이 도움이 됐으면 하는 바람에 작성했습니다. 오늘도 긴 글 읽어주셔서 감사하고,
다른 기능이나 궁금하신 점 있으면 댓글 달아주세요 성심성의껏 답변해 드리겠습니다.
오늘도 읽어주셔서 감사합니다.🙇🏻🙇🏻