🧟‍♀️ https://cryptozombies.io/ko/

현재, 솔리디티를 익히기에 가장 좋은 학습 도구(?)는 크립토 좀비인 것 같다. 크립토 좀비의 첫 번째 코스인 Basic solidity 코스에서 기억해두어야 할 개념들을 기록해나가려고 한다.

🧟‍♂️ Lesson 1

🦠 상태 변수

상태 변수는 컨트랙트 저장소 즉, 이더리움 블록체인에 영구적으로 저장된다.

🦠 구조체 동적 배열

구조체의 동적 배열을 생성하여 상태 변수로 활용하면, 마치 데이터베이스처럼 구조화된 데이터를 저장할 수 있다.

Person[] people;

🦠 _ 언더스코어 네이밍 관례들

• 함수 인자명은 언더스코어(_) 로 시작하여 전역 변수와 구분한다.
• private 함수의 함수명은 언더스코어(_) 로 시작한다.

function _myFunc(string _name, uint _age) private { ... }

🦠 이벤트

프론트 앱에서 특정 액션에 대한 이벤트에 대해 귀를 기울인다. 이벤트가 실행되면 앱에 함수가 실행되었음을 알릴 수 있다.

// 컨트랙트의 solidity 코드

event IntegersAdded(uint x, uint y, uint result);

function add(uint _x, uint _y) public returns(uint) {
	uint result = _x + _y;
    IntegersAdded(_x, _y, result) // 이벤트를 실행하여 add 함수의 실행을 알림
    return result;

// 프론트 앱의 Javascript 코드

YourContract.IntegersAdded(function(error, result) {
	// 이벤트(함수) 실행과 관련된 행동에 대한 코드
});

🧟‍♂️ Lesson 2

🦠 인터페이스

서로 다른 컨트랙트 간의 상호작용을 위함

어떤 외부 컨트랙트의 인터페이스를 코드에 포함하면, 해당 컨트랙트에 대해 알 수 있게 된다. 구체적으로는 해당 컨트랙트에 정의된 함수의 특성, 호출 방법, 예상되는 응답 내용 등에 대해 알 수 있다.

즉 외부 컨트랙트를 활용한 코드를 작성할 때에는, 외부 컨트랙트의 주소만 가져오는것이 아니라 해당 컨트랙트의 (상호작용 하고자 하는 내용이 포함되어 있는) 인터페이스를 기재해주어야 한다는 것이다. 블록체인 상의 이용하고자 하는 외부 컨트랙트에 주소로 접근하고 인터페이스를 씌워 솔리디티 코드에서 이용 가능한 형태로 사용하고자 함이다. 쉽게 말해 '내 컨트랙트' 안에 '외부 컨트랙트의 인터페이스'를 작성하는 것이다.

// zombiefeeding.sol

pragma solidity ^0.4.19;

// 블록체인에 공개되어 있는 크립토 키티 코드를 활용하여 인터페이스 작성
contract KittyInterface {
  function getKitty(uint256 _id) external view returns (
    bool isGestating,
    bool isReady,
    uint256 cooldownIndex,
    uint256 nextActionAt,
    uint256 siringWithId,
    uint256 birthTime,
    uint256 matronId,
    uint256 sireId,
    uint256 generation,
    uint256 genes
  );
}

contract ZombieFeeding is ZombieFactory {
  // 크립토 키티 컨트랙트의 주소
  address ckAddress = 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d;
  // 내 코드에서 이용 가능한 kittyContract로 만들어주기
  KittyInterface kittyContract = KittyInterface(ckAddress);
  ...
}

🦠 상속과 컴파일

컨트랙트를 배포할 준비가 되면, 최종적으로 상속을 받는 가장 마지막 자손에 해당하는 컨트랙트만 컴파일하여 배포하면 상위 상속받고 있는 컨트랙트들까지 접근이 가능하다.

🧟‍♂️ Lesson 3

🦠 생성자

컨트랙트가 처음 생성될 때 혹은 인스턴스화 될 때, 변수의 값을 원하는 값으로 초기화하기 위해 사용한다. 컨트랙트가 생성될 때 단 한번 작동한다. 생성자를 payable하게 작성하면 컨트랙트 생성시 컨트랙트 계정에 이더를 보낼 수 있다.

contract example {
  // 상태 변수 선언
  string public name;
  uint public age;
  // 생성자를 통해 상태 변수 초기화
  constructor(string memory _name, uint _age) {
    name = _name;
    age = _age;
  }
}

🦠 가스 절약을 위한 구조체 압축

uint는 uint256 외에도 uint8, uint16, uint32 등의 하위 타입들이 있지만 특별한 이유가 없는 한 이런 하위 타입을 사용하는 것은 아무런 이득이 없다. 솔리디티에서는 uint의 크기에 상관없이 256비트의 저장 공간을 미리 잡아놓기 때문이다. uint256(uint) 대신 uint8을 사용한다고 해서 가스 소모는 전혀 줄어들지 않는다.

하지만, 구조체 안에서는 다르다. 구조체 안에 여러 개의 uint를 만든다면 가능한 더 작은 크기의 uint를 쓰는 것이 좋다. 솔리디티에서 그 변수들을 더 적은 공간을 차지하도록 압축하기 때문이다. 구조체 안에서는 가능한 한 작은 크기의 정수 타입을 쓰도록 하자. 또한 동일한 데이터 타입은 하나로 묶어야 저장 공간을 최소화할 수 있다.

아래의 코드에서 NormalStruct 보다는 MiniMe 컨트랙트가, MiniMe 보다는 MiniMe2 컨트랙트가 더 적은 저장 공간을 차지한다.

struct NormalStruct {
  uint a;
  uint b;
  uint c;
}

struct MiniMe {
  uint32 a;
  uint b;
  uint32 c;
}

struct MiniMe2 {
  uint32 a;
  uint32 c;
  uint b;
}

🦠 시간 단위

now : 현재의 유닉스 타임 스탬프(1970년 1월 1일부터 지금까지이 초 단위 합)

유닉스 타임은 32비트 숫자로 저장된다. 유닉스 타임 스탬프 값이 32비트로 표시가 되지 않을 만큼 커지면 "Year 2038" 문제가 발생할 것이다. 하지만 now는 기본적으로 uint256을 반환하기 때문에 명시적으로 uint32(now)로 변환할 필요가 있다.

솔리디티는 또한 seconds, minutes, hours, days, weeks, years와 같은 시간 단위 또한 제공하며, 이들은 그에 해당하는 길이 만큼의 초 단위 uint 숫자로 변환된다. 1 days는 86400초를 의미한다.

❗️ 현재는 now 대신 block.timestamp로 대체되었다.

🦠 구조체를 함수의 인자로 전달하기

private 또는 internal로 정의된 함수의 인자로 구조체의 storage 포인터를 전달할 수 있다. 구조체를 식별할 id 등을 전달하는 것이 아니라 구조체에 대한 참조를 전달하는 것이다.

contract ZombieFeeding {
  
  // 구조체
  struct Zombie {
    string name;
    uint dna;
    uint32 level;
    uint32 readyTime;
  }
  
  // _isReady 함수의 인자로 Zombie 구조체의 storage 포인터를 전달하여 참조하게 한다.
  function _isReady(Zombie storage _zombie) internal view returns(bool) {
    return (_zombie.readyTime <= now);
  }
  
  function feedAndMultiply(uint _zombieId, uint _targetDna, string _species) internal {
    ...
    
    // Zombie 구조체 storage 포인터 선언 및 할당
    Zombie storage myZombie = zombies[_zombieId];
    
    // Zombie 구조체를 인자로 전달하여 _isReady 실행
    require(_isReady(myZombie));
    
    ...
  }
}

🦠 가스를 소모하지 않는 view 함수

view로 정의된 함수는 외부에서 호출되었을 때 가스를 전혀 소모하지 않는다. 블록체인에 어떠한 트랜잭션도 생성하지 않고 단지 확인을 위한 질의만 날리기 때문이다.

주의할 것은, view 함수가 외부가 아닌 동일 컨트랙트 내의 다른 함수에서 내부적으로 호출될 경우에는 가스를 소모한다는 점이다. 이것은 다른 함수가 이더리움에 트랜잭션을 생성하고 이는 모든 개별 노드에서 검증되어야 하기 때문이다. view 함수는 외부에서 호출되었을 때만 무료이다.

pure 함수 역시 마찬가지로 외부에서 호출되었을 때 가스를 소모하지 않고, 내부에서 호출되었을 때에는 가스를 소모한다.

🦠 memory에 배열 선언

storage를 사용하는 것은 비싸다. 함수가 실행될 동안에만 필요한 배열은 memory에 선언해주는 편이 낫다. 이는 storage의 배열을 직접 업데이트하는 것보다 훨씬 저렴하다.

memory 배열은 반드시 길이 인수와 함께 생성되어야 한다. storage 배열은 array.push()로 크기가 자동으로 조절되지만 memory 배열은 그렇지 않다.

function getArray() external pure returns(uint[]) {
  
  // 메모리에 길이 3의 새로운 배열을 생성한다. 이 배열은 함수가 실행되는 동안에만 존재할 것이다.
  uint[] memory values = new uint[](3);
  
  // 여기에 특정한 값들을 넣는다.
  values.push(1);
  values.push(2);
  values.push(3);
  
  // 해당 배열을 반환한다.
  return values;
}

🧟‍♂️ Lesson 4

🦠 keccak256

솔리디티에서 keccak256은 크게 두 가지 목적으로 활용된다.

(1) string을 비교할 때

솔리디티에는 문자열을 비교하는 함수가 내장되어 있지 않다. 따라서 문자열을 비교하는 것이 아니라 그 문자열을 해시화한 값을 비교한다.

function stringCompare(string _a, string _b) public returns (bool) {
  return (keccak256(_a) == keccak256(_b));
}

(2) 난수를 생성할 때 (안전하지는 않은 방법)

안전하게 난수를 생성하기 위해서는 oracle(이더리움 외부에서 데이터를 받아오는 안전한 방법 중 하나)을 사용할 수 있다.

아래 예시에서는 now의 타임스탬프 값, msg.sender, 증가하는 nonce를 입력받아 임의의 해시 값을 얻고 이를 100으로 나눈 나머지를 구해 0~99 사이의 난수를 얻을 수 있다.

uint randNonce = 0;
uint random = uint(keccak256(now, msg.sender, randNonce)) % 100;
randNonce++;
uint random2 = uint(keccak256(now, msg.sender, randNonce)) % 100;

🧟‍♂️ Lesson 5

🦠 라이브러리

라이브러리는 특별한 종류의 컨트랙트이다. 라이브러리를 통해 기본 데이터 타입에 함수를 붙일 수 있다. using 구문으로 사용한다. uint 데이터의 오버플로우/언더플로우를 막기 위해 사용하는 SafeMath 라이브러리가 대표적이다.

여러 컨트랙트에서 자주 사용되는 코드를 따로 라이브러리로 배포하면 컨트랙트마다 라이브러리를 적용만 하면 쉽게 코드를 사용할 수 있으며 매번 코드를 작성하는 것에 비해 가스 소비량도 적어진다.

라이브러리에는 fallback 함수를 정의할 수 없기 때문에, 이더를 받을 수 없고 내부에 payable한 함수도 정의할 수 없다. 또한 상속이 불가능하다. 계약 상태를 변경하기 위한 것이 아닌, 입력 및 반환 결과를 기반으로 간단한 작업을 수행하는 데 사용된다.

library SafeMath {

  function mul(uint256 a, uint256 b) internal pure returns (uint256) {
    if (a == 0) {
      return 0;
    }
    uint256 c = a * b;
    assert(c / a == b);
    return c;
  }

  function div(uint256 a, uint256 b) internal pure returns (uint256) {
    // assert(b > 0); // Solidity automatically throws when dividing by 0
    uint256 c = a / b;
    // assert(a == b * c + a % b); // There is no case in which this doesn't hold
    return c;
  }

  function sub(uint256 a, uint256 b) internal pure returns (uint256) {
    assert(b <= a);
    return a - b;
  }

  function add(uint256 a, uint256 b) internal pure returns (uint256) {
    uint256 c = a + b;
    assert(c >= a);
    return c;
  }
}

SafeMath 라이브러리를 사용하고자 하는 컨트랙트 내부에서, using SafeMath for uint256; 라고 써주면 SafeMath 내의 메소드들이 uint256 데이터 타입에 붙게 된다.

🦠 require vs assert vs revert (에러 핸들러)

• require
  특정 조건을 만족하지 않으면 에러를 발생시킨다. 에러가 발생하여 함수 실행이 실패하면 남은 가스를 사용자에게 환불해준다.

• assert
  특정 조건을 만족하지 않으면 에러를 발생시킨다. 에러가 발생하여 함수 실행이 실패하면 가스를 사용자에게 돌려주지 않고 모두 소비해버린다. assert는 uint 오버플로우와 같이 일반적으로 코드가 심각하게 잘못 실행되는 경우에 사용한다.

• revert
  조건 없이 무조건 에러를 발생시키고 남은 가스를 사용자에게 환불해준다.

🦠 natspec - 솔리디티 주석 작성 표준

/// @title 타이틀
/// @author 작성자
/// @notice 사용자에게 컨트랙트가 무엇을 하는지 설명
contract Math {
  /// @notice 사용자에게 함수가 무엇을 하는지 설명
  /// @param x 함수의 매개 변수
  /// @param y 함수의 매개 변수
  /// @return z 함수의 리턴값
  /// @dev 개발자에게 추가 정보를 설명
  function multiply(uint x, uint y) returns (uint z) {
    // 이것은 일반적인 주석으로, natspec에 포함되지 않는다.
    z = x * y;
  }
}

@title, @author, @notice, @param, @return, @dev가 사용될 수 있으며 모두 필수는 아니다. 하지만 각 함수에 대한 설명으로 @dev는 남기는 것이 권장된다.

🧟‍♂️ Lesson 6 - web3 개발 흐름

스마트 컨트랙트의 함수를 실행하고자 한다면, 이더리움 네트워크 상의 노드 중 하나에 질의를 보내야 한다. 노드들은 사람이 읽기 불편한 JSON-RPC로만 소통할 수 있다.

web3
JSON-RPC를 직접 이용하지 않고 자바스크립트 프론트엔드 인터페이스로 이더리움 노드들과 상호작용 할 수 있게 해주는 라이브러리

🦠 프론트엔드 프로젝트에 web3 라이브러리를 설치한다.

npm install web3

🦠 Web3 Provider를 설정하여 어떤 노드와 통신할 것인지 설정한다.

나의 DApp을 위한 노드를 따로 운영할 필요가 없이 Infura, 메타마스크의 프로바이더를 사용할 수 있다. 메타마스크는 web3라는 전역 자바스크립트 객체를 통해 브라우저에 Web3 프로바이더를 주입한다.

window.addEventListener('load', function() {

  // Web3가 브라우저에 주입되었는지 확인(Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    // Mist/MetaMask의 프로바이더 사용
    web3js = new Web3(web3.currentProvider);
  } else {
    // 사용자가 Metamask를 설치하지 않은 경우에 대해 처리
    // 사용자들에게 Metamask를 설치하라는 등의 메세지를 보여줄 것
  }

  // 이제 앱을 시작하고 web3에 자유롭게 접근할 수 있다.
  startApp()

})

🦠 스마트 컨트랙트와 통신할 수 있게 한다.

web3가 스마트 컨트랙트와 통신하기 위해서는 컨트랙트의 주소와 ABI가 필요하다.

ABI (Application Binary Interface)
해당 컨트랙트의 메소드를 표현하는 JSON 형태의 인터페이스이다. 해당 컨트랙트가 이해할 수 있는 방법으로 web3가 함수를 호출할 수 있게끔 알려준다.

컨트랙트 주소와 ABI를 이용해 이용하고자 하는 컨트랙트를 인스턴스화 한다.

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

🦠 스마트 컨트랙트와 통신한다.

web3가 컨트랙트의 함수를 호출하기 위해서 call, send 두 개의 메소드를 사용할 수 있다. 메소드의 호출 결과는 Promise이므로(비동기) .then을 이용해 결과를 가지고 이후의 작업을 처리해줄 수 있다.

(1) 📞 call

view, pure 함수를 위해 사용한다. 로컬 노드에서만 실행하고 블록체인에 트랜잭션을 만들지 않는다. 가스도 소모하지 않는다.

// 좀비 id로 좀비 정보를 가져오는 call 메소드
function getZombieDetails(id) {
  return cryptoZombies.methods.zombies(id).call()
}

// 함수를 호출하고 결과를 가지고 무언가를 처리할 수 있다.
getZombieDetails(15)
.then(function(result) {
  console.log("Zombie 15: " + JSON.stringify(result));
});

(2) 💌 send

view, pure가 아닌 모든 함수에 대해 send를 사용해야 한다. send는 트랜잭션을 만들고 블록체인 상의 데이터를 변경한다. 따라서 사용자는 가스를 지불해야 한다. 프로바이더로 메타마스크를 사용한다면, send()를 호출했을 때 자동으로 메타마스크에서 트랜잭션에 서명하라는 창을 띄워준다.
send는 트랜잭션을 전송해야 하기 때문에 함수를 호출한 사람(dApp의 사용자)의 from 주소가 필요하다. 메타마스크가 창을 띄워 사용자가 서명을 하도록 한다. 트랜잭션에는 오랜 시간이 소요될 수 있으므로 이에 대응해야 한다. (트랜잭션이 보내졌다는 안내띄우기) 또한 send 메소드에는 선택적으로 gas와 gasPrice를 지정할 수 있다. 지정하지 않는다면 메타마스크는 사용자가 이 값을 선택할 수 있도록 한다.

function createRandomZombie(name) {
  // 시간이 꽤 걸릴 수 있으니, 트랜잭션이 보내졌다는 것을
  // 유저가 알 수 있도록 UI를 업데이트해야 함
  $("#txStatus").text("Creating new zombie on the blockchain. This may take a while...");
  // 우리 컨트랙트에 전송하기: 입력된 이름으로 새로운 좀비를 생성하는 send 메소드
  return CryptoZombies.methods.createRandomZombie(name)
  .send({ from: userAccount }) // from 주소가 필요하다.
  // 좀비가 생성되고 트랜잭션이 성공적으로 블록에 포함될 때
  .on("receipt", function(receipt) {
    $("#txStatus").text("Successfully created " + name + "!");
    getZombiesByOwner(userAccount).then(displayZombies);
  })
  // 가스 부족 등의 이유로 트랜잭션이 실패했을 때
  .on("error", function(error) {
    $("#txStatus").text(error);
  });
}

payable 함수를 호출할 때에는, send 메소드에 from 외에 value까지 함께 설정해준다.

CryptoZombies.methods.levelUp(zombieId)
.send({ from: userAccount, value: web3js.utils.toWei("0.001") })

🦠 필요시 메타마스크에서 사용자 계정을 가져온다.

현재 활성화된 계정을 가져올 수 있다.

var userAccount = web3.eth.accounts[0];

활성화된 계정이 바뀌게 되면 프론트 인터페이스에 보여지는 데이터도 바뀐 계정에 맞는 데이터로 바뀌어야 하므로, setInterval을 사용하여 해당 계정이 계속 활성화되어 있는지 확인해야 한다.

var accountInterval = setInterval(function() {
  // 계정이 바뀌었는지 확인
  if (web3.eth.accounts[0] !== userAccount) {
    userAccount = web3.eth.accounts[0];
    // 새 계정에 대한 UI로 업데이트하기 위한 함수 호출
    updateInterface();
  }
}, 100);

🦠 이벤트 구독/활용하기

web3에서 컨트랙트의 이벤트를 구독하여 해당 이벤트가 발생할 때마다 어떠한 로직을 실행시키도록 할 수 있다. 하지만 dApp에서 해당 이벤트가 발생하는 모든 경우에 로직이 작동할 것이다. 이벤트를 필터링하고 현재 사용자와 연관된 이벤트만 수신하기 위해 indexed 키워드를 사용할 수 있다.

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

컨트랙트 코드에서 이벤트를 정의할 때 _from, _to를 indexed로 정의하였으므로 이를 활용하여 필터링된 이벤트만을 구독할 수 있다.

// `filter`를 사용해 `_to`가 `userAccount`와 같을 때만 코드를 실행
cryptoZombies.events.Transfer({ filter: { _to: userAccount } })
.on("data", function(event) {
  let data = event.returnValues;
  // 현재 사용자가 방금 좀비를 받았고, 해당 좀비를 보여줄 수 있도록 UI를 업데이트하는 로직 추가
  getZombiesByOwner(userAccount).then(displayZombies);
}).on("error", console.error);

또한 getPastEvents를 사용하여 지난 이벤트들에 대해 질의할 수 있다. 이 때 fromBlock과 toBlock 필터를 이용해 검색하고자 하는 블록 범위(이벤트 로그에 대한 시간 범위)를 지정할 수 있다. 이러한 점을 활용하여 이벤트를 저렴한 형태의 storage로 사용할 수도 있다. 데이터를 블록체인에 기록하는 것은 매우 비싼 편이지만 이벤트를 이용하는 것은 상대적으로 훨씬 저렴하다. 이벤트 데이터는 스마트 컨트랙트 자체 안에서는 읽거나 활용할 수 없지만, 프론트엔드에서 활용할 히스토리 데이터 기록용으로는 유용하다.

cryptoZombies.getPastEvents("NewZombie", { fromBlock: 0, toBlock: "latest" })
.then(function(events) {
  // `events`는 우리가 위에서 했던 것처럼 반복 접근할 `event` 객체들의 배열이다.
  // 이 코드는 생성된 모든 좀비의 목록을 우리가 받을 수 있게 할 것이다.
});

분명히 2주 전에 크립토 좀비를 다 했는데, 다시 해보니 또 새로웠다. 처음 할 때는 설렁설렁 문제를 풀고 넘어갔는데 이번에는 관련 개념을 확실히 머릿 속에 넣는다 생각하고 정리하며 진행했더니 solidity나 web3에 대한 이해도가 많이 올라가는 것 같다. 메타마스크 쓴 좀비 귀엽다!