[블록체인 개발] Web3.js로 view 함수 호출하기

안녕하세요. 이번 포스팅에서는 스마트 컨트랙트로 작성된 view 함수에 반환값을 

Web3.js로 불러오는 코드를 구현해보도록 하겠습니다.

<설치 및 코드 구현 환경>

OS : Window

node js : 10.15.0

npm : 6.5.0

Solidity IDE : Remix

먼저 간단한 스마트컨트랙트 코드를 작성해줍니다.

간단하게 코드 설명을 해보겠습니다.

set_data 에서는 index 값을 새롭게 설정해줍니다. get_data 함수에서는 현재 index 값을 반환해줍니다.

view 함수는 state를 바꾸지 않고 트랜잭션을 사용하지 않기 때문에 가스 소모가 없습니다.

그렇기 때문에 값을 반환하고 보여주는 용도로 Dapp 개발을 할 때 굉장히 유용하게 사용됩니다.

코드 완성후 컴파일이 완료되면 해당 스마트 컨트랙트를 배포해줍니다. (저는 메타마스크를 활용해 Injected Web3 환경에서 배포를 하였습니다.

테스트를 위해 디렉토리를 하나 생성해줍니다.

해당 디렉토리에 npm init 명령을 쳐서 package.json을 만들어줍니다.

위에 값들은 모두 엔터를 치셔서 디폴트 값으로 설정해주셔도 무방합니다.

다음 npm install web3 명령을 치셔서 web3 package를 설치해줍니다.

자 이제 web3 패키지 설치가 완료되었습니다. 설치 과정중 tar.gz 관련 워닝이 뜰수도 있는데 무시하시고 계속 설치를 진행해주셔도 설치가 잘 완료됩니다. 저의 경우 web3 패키지를 설치하면서 굉장히 애를 먹었는데요. 이것저것 에러가 나면서 설치하기가 어려웠습니다. 스택오버플로우에 나와있는 솔루션을 이것저것 다해봣지만 제대로 되지 않았는데요. tar.gz 워닝을 계속 해결하려고 하였지만 해결되지 않았습니다. 하지만 워닝을 그냥 무시하고 계속 설치를 진행하니 web3가 잘 설치가 되었습니다.

다음으로 이더리움 네트워크에 접속하기 위해 infura 를 사용합니다. 아래의 링크를 들어가서 회원가입을 합니다.

https://infura.io/

이메일 확인까지 마치면

다음과 같은 화면이 뜰 것인데요. 위에 이미지에서 표시된 "CREATE NEW PROJECT"를 클릭해줍니다.

프로젝트 이름을 test로 해준후 CREATE 버튼을 눌러줍니다.

이전에 배포했던 스마트 컨트랙트의 주소를 복사해서 아래의 Whitellist Contract Address 옆에 Add 버튼에 주소를 넣어 추가해줍니다.

다음 ENDPOINT를 ROPSTEN으로 바꿔준후 표시된 아이콘을 클릭하여 URL을 복사해줍니다.

이제 본격적으로 Web3.js를 사용하여 이더리움 네트워크와의 연결을 통해 스마트컨트랙트의 view 함수의 반환값을 가져와 보겠습니다.

먼저 web3 패키지를 불러온 후 url 변수에 위에서 복사한 url 을 넣어줍니다.

다음 컴파일링한 스마트 컨트랙트의 ABI 를 아래에 표시된 아이콘을 클릭하여 복사해줍니다. (Remix에 compile tab에 있습니다.)

다음 배포된 컨트랙트 주소(infura에 등록한 주소)와 복사한 ABI를 아래와 같이 변수로 설정해줍니다.

이제 본격적으로 web3.js 를 사용하여 스마트 컨트랙트의 get_data를 호출해서 반환값을 가져오는 함수를 구현해 보도록 하겠습니다. 

코드는 아래와 값습니다.

한 줄씩 코드를 리뷰해보겠습니다.

const test_contract = new web3.eth.Contract(testabi, contractAddress)

위 코드는 ABI와 컨트랙트 주소를 통해 test_contract의 객체를 생성해주는 코드입니다.

const record = await test_contract.methods.get_data().call()

위 코드는 test_contract 객체로 부터 get_data를 호출하고 call 함수를 통해 반환값을 가져와 record 변수에 저장해주는 코드입니다. node js는 비동기이기 때문에 async await를 사용하여 이 문장이 끝난 후 아래의 console.log가 실행될 수 있게 됩니다.

powershell에서 node 명령을 통해 test.js 를 실행시키면 아래와 같이 3이 잘 나오는 것을 확인할 수 있었습니다 !

<코드>

- test.sol

pragma solidity ^0.5;

contract test {

    uint256 index;

    function set_data (uint256 _index) public returns(bool) {

        index = _index;

        return true;

    } 

    function get_data () public view returns (uint256) {

        return index;

    }

}

- test.js

const Web3 = require('web3')

const url = 'YOUR INFURA URL'

const web3 = new Web3(url)

const testabi = 'YOUR ABI'

const contractAddress = 'YOUR SMARTCONTRACT ADDRESS'

async function func() {

const test_contract = new web3.eth.Contract(testabi, contractAddress)

const record = await test_contract.methods.get_data().call()

console.log(record)

//console.log('record: ' + record)

}

func()

이상으로 이번 포스팅을 마치도록 하겠습니다.

질문이 있으시거나 에러 혹은 막히는 부분이 있으시면 언제든 댓글을 달아주시면 

빠른 시간내에 답변을 하도록 하겠습니다.

긴 글 읽어주셔서 감사합니다 ! 

참고

[1] https://web3js.readthedocs.io/en/1.0/

[2] https://solidity.readthedocs.io/en/v0.5.0/introduction-to-smart-contracts.html