CryptpoZombies 1-6

김태주·2021년 3월 17일

web3.js

사용자와 컨트랙트가 상호작용하기 위해 사용하는 js 기반 라이브러리
사용자와 컨트랙트가 상호작용하려면 json-rpc를 사용해야 했음.
web3.js는 json-rpc보다 쉽게 상호작용할 수 있도록 한다.

web3 provider

네트워크 상에서 노드를 관리하는 것.
블록체인에서는 네트워크 상에서 노드들이 똑같은 데이터를 가지는 것이기 때문에 프로바이더가 필요
내가 직접 네트워크를 구성해도 되지만 infura를 사용하면 쉽게 구현 가능.

infura

빠른 읽기를 위한 캐시 계층을 포함하는 다수의 이더리움 노드를 운영하는 서비스
사용법

var web3 = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));

metamask

블록체인 상에서 개인키 보관 및 서명을 생성해주는 것
infura와 metamask의 구체적인 사용법은 개발할 때 공부할 것

컨트랙트와 통신하기

사용자가 스마트 컨트랙트와 소통하기 위해서는 2가지가 필요
-> 컨트랙트 주소, abi

컨트랙트 주소

컨트랙트를 배포하면 그 컨트랙트는 유일하고 영원한 주소를 얻게 됨
통신을 하려면 그 주소를 알고 있어야 함

abi

컨트랙트의 메소드를 json 형태로 표현한 것
사용자가 어떻게 메소드를 사용해야 하는지 알려주는 것.

사용법 - 컨트랙트 인스턴스화하기

var myContract = new web3js.eth.Contract(myABI, myContractAddress);

컨트랙트 함수 호출

외부 api처럼 비동기 방식으로 작동한다.

1. call

view나 pure 함수에 사용
트랜잭션을 생성하지 않고 가스를 소비하지 않음.

myContract.methods.myMethod(123).call()

2. send

트랜잭션을 만들 때 사용
블록체인 상에서 데이터를 생성 및 변경할 때 사용

myContract.methods.myMethod(123).send()

metamask 사용

메타마스크에서 사용자 계정을 가져오는 방법

var userAccount = web3.eth.accounts[0]; //0번째 사용자 계정을 가져옴

payable 함수 호출하기

payable은 컨트랙트가 이더를 받을 수 있게 설정해놓는 것인데, 사용자가 이 컨트랙트를 실행시킬 때는 이더의 작은 단위인 wei를 이용해 전송해야 함.

web3js.utils.toWei("1"); //1 ether를 wei로 변경

이벤트 구독하기

solidity 상에서 만들었던 이벤트를 듣고 특정 함수를 실행시킬 수 있음.

//solidity
event NewZombie(uint zombieId, string name, uint dna);

//web3.js
cryptoZombies.events.NewZombie()
.on("data", function(event) { //NewZombie 이벤트가 실행될 때마다 이 함수가 실행됨.
  let zombie = event.returnValues;
  console.log("새로운 좀비가 태어났습니다!", zombie.zombieId, zombie.name, zombie.dna);
}).on("error", console.error);

지난 이벤트 질의하기

특정 기간동안 일어난 이벤트를 질의할 수 있다.

cryptoZombies.getPastEvents("NewZombie", { fromBlock: 0, toBlock: "latest" })
.then(function(events) {
  //처음부터 가장 최신의 이벤트를 받는다.
});

이벤트를 저렴한 storage로 사용할 수 있다.
블록체인에 데이터를 기록하는 것은 고비용이 든다. 따라서 이벤트에 데이터를 저장해놓으면 비교적 저렴하게 데이터를 읽을 수 있다
하지만 스마트 컨트랙트 자체에서는 데이터를 읽을 수 없기 때문에 프론트엔드에서 데이터를 읽을 때만 사용

indexed 사용하기

함수의 매개변수가 특정 조건을 만족할 때만 함수가 실행되게 하는 것.

//solidity
event Transfer(address indexed _from, address indexed _to, uint256 _tokenId);

//web3.js
// `filter`를 사용해 `_to`가 `userAccount`와 같을 때만 코드를 실행
cryptoZombies.events.Transfer({ filter: { _to: userAccount } })
.on("data", function(event) {
  ...
}).on("error", console.error);