[web3.js] 4. web3.js

이전글

[web3.js] 3. ERC-20 토큰 컨트랙트

 

web3.js

 이번 글에서는 본격적으로 web3.js에 대해 알아보겠습니다.

 

 지금까지 리믹스에서는 버튼을 누르는 방식으로, 트러플에서는 트러플 콘솔에 명령어를 입력하는 방식으로 스마트 컨트랙트와 소통했습니다. 이번에는 자바스크립트를 이용해 스마트 컨트랙트와 소통할 수 있는 web3.js에 대해 알아보겠습니다.

 

 web3.js는 자바스크립트 라이브러리입니다. 즉, web3.js를 이용하면 웹서비스에서도 스마트 컨트랙트에 접근할 수 있습니다. web3.js로 개발을 하기 위해서는 먼저 web3.js를 설치해야 합니다. 아래 명령어를 터미널에 입력하여 web3.js를 설치할 수 있습니다.

 

npm i web3

 

 web3.js를 테스트하기 위해서는 먼저 js 파일을 하나 생성해야 합니다. test.js 파일을 폴더 안에 생성합니다.

 

 이제 생성한 test.js 파일에 코드를 입력해 보겠습니다. web3.js를 이용하기 위해서는 require을 사용하여 해당 라이브러리를 불러와야 합니다.

 

const { Web3 } = require('web3');

 

 그다음 현재 사용하고 있는 가나슈와 연결해주어야 합니다. 아래 코드를 입력하여 가나슈와 연결할 수 있습니다.

 

const { Web3 } = require('web3');

const web3 = new Web3('http://localhost:7545');

 

 

 이제 다음 코드를 입력하여 가장 최근에 생성된 블록의 번호를 불러오겠습니다.

 

const { Web3 } = require('web3');

const web3 = new Web3('http://localhost:7545');

web3.eth
  .getBlockNumber()
  .then((result) => {
    console.log('Current block number: ' + result);
  })
  .catch((error) => {
    console.error(error);
  });

 

 지금까지 작성한 내용을 저장한 뒤 다음 명령어를 터미널에 입력하여 파일을 실행합니다.

 

node test.js

 

 

 최근에 생성한 블록이 하나만 존재하기 때문에 가장 최신 블록 번호인 1이 정상적으로 출력된 것을 확인할 수 있습니다.

 

 이제 배포한 컨트랙트와 상호작용하기 위해 코드를 다음과 같이 수정해 보겠습니다.

 

const { Web3 } = require('web3');

const web3 = new Web3('http://localhost:7545');

const deployedAddress = '0x4Ee8999f401627f6eA4f457b7a59655Dc76EfF74'; // 컨트랙트 계정 주소
const fs = require('fs');
const abi = JSON.parse(fs.readFileSync('./build/contracts/TESTToken.json')).abi;
const myContract = new web3.eth.Contract(abi, deployedAddress);
myContract.handleRevert = true;

async function interact() {
  try {
    const myNumber = await myContract.methods.name().call();
    console.log('token name: ' + myNumber);
  } catch (error) {
    console.error(error);
  }
}

interact();

 

 컨트랙트 계정 주소에는 배포된 컨트랙트 계정의 주소를 입력해야 합니다. 생성된 컨트랙트 계정의 주소는 가나슈의 트랜잭션 메뉴에서 확인할 수 있습니다.

 

 

 코드 작성이 완료되었다면 node test.js를 터미널에 입력한 후 결과를 확인합니다.

 

node test.js

 

 

 토큰의 이름을 정상적으로 받아온 것을 확인할 수 있습니다. 트러플 콘솔을 이용한 결과와 web3.js를 이용한 결과가 동일함을 확인할 수 있습니다.

 

 지금까지 web3.js에 대해 알아봤습니다. 감사합니다.