[#1 Crypto Zombies] 좀비 공장 만들기

크립토 좀비 튜토리얼

Solidity 튜토리얼로는 크립토 좀비가 굉장히 유명하다.
블록체인은 배울 수 있는 곳이 정말정말 적어서 이런게 너무 귀하고 그렇다..네네
튜토리얼 하면서 솔리디티 문법 하나하나 차근차근 배울 수 있어서 좋았다. 솔리디티 문법 자체는 좀 기괴했지만...
어쨌든 크립토 좀비를 하면서 솔리디티 문법 배운 것들을 착착 적어보려 한다.

✍🏻 코드 분석

1. 기본 구조

pragma solidity ^0.4.19;

contract HelloWorld {

}

• 모든 솔리디티 소스 코드는 "version pragma"로 시작해야 하는데, 이는 해당 코드가 이용해야 하는 솔리디티 버전을 선언하는 것이다.
• 솔리디티 코드는 컨트랙트안에 싸여 있다.컨트랙트는 이더리움 애플리케이션의 기본적인 구성 요소로, 모든 변수와 함수는 어느 한 컨트랙트에 속한다. 컨트랙트는 모든 프로젝트의 시작점!

2. 새로운 변수 uint형과 상태 변수

contract Example {
  // 이 변수는 블록체인에 영구적으로 저장된다
  uint myUnsignedInteger = 100;
}

• 컨트랙트 안에서 선언하는 변수는 블록체인에 영구적으로 저장된다. 그래서 조심해야함..!
• uint자료형은 부호 없는 정수로, 값이 음수가 아니어야 한다는 의미. 부호 있는 정수는 int자료형!
• 솔리디티에서 uint는 실제로 uint256, 즉 256비트 부호 없는 정수의 다른 표현이다.uint8, uint16, uint32등과 같이 uint를 더 적은 비트로 선언할 수도 있다. 하지만 특별한 경우 아니면 그냥 uint로 선언!

3. 구조체 선언, 배열 선언

struct Person {
  uint age;
  string name;
}

// 2개의 원소를 담을 수 있는 고정 길이의 배열:
uint[2] fixedArray;
// 또다른 고정 배열으로 5개의 스트링을 담을 수 있다:
string[5] stringArray;
// 동적 배열은 고정된 크기가 없으며 계속 크기가 커질 수 있다:
uint[] dynamicArray;

//구조체 배열
Person[] people; // 이는 동적 배열로, 원소를 계속 추가할 수 있다.

• 자바처럼 구조체, 배열 선언이 가능하다.
• 고정 길이 배열과 동적 배열 둘 다 선언 가능하다.
• 구조체 배열도 선언 가능하다.

Person[] public people;

• 다른 앱에서 접근 가능하도록 하려면 public 배열을 선언해야 한다.

//구조체 배열에 구조체 생성해서 넣기
people.push(Person(16, "Vitalik"));

//배열에 push로 원소 넣기
uint[] numbers;
numbers.push(5);
numbers.push(10);
numbers.push(15);
// numbers 배열은 [5, 10, 15]과 같다.

-array.push()는 무언가를 배열의끝에 추가해서 모든 원소가 순서를 유지하도록 한다.

4. 함수 선언

string greeting = "What's up dog";

//public 함수
function sayHello() public returns (string) {
  return greeting;
}

//pure 함수
function _multiply(uint a, uint b) private pure returns (uint) {
  return a * b;
}

//private 함수
  function _createZombie(string _name, uint _dna) private {
        zombies.push(Zombie(_name, _dna));
}

• pure는 함수가 앱에서 어떤 데이터도 접근하지 않는 것을 의미
• return 타입을 앞에 명시함.. 개이상해
• public, privte은 자바와 똑같음! 외부 앱에 접근 권한을 주냐 마냐 하는 것

5. Keccak256과 형 변환

//6e91ec6b618bb462a4a6ee5aa2cb0e9cf30f7a052bb467b0ba58b8748c00d2e5
keccak256("aaaab");
//b1f078126895a1424524de5321b339ab00408010b7cf0e6ed451514981e58aa9
keccak256("aaaac");

• keccak256: 솔리디티가 내장하고 있는 해시 함수. 주석처리된 값으로 변환시켜줌
• 해시 함수는 기본적으로 입력 스트링을 랜덤 256비트 16진수로 매핑

uint8 a = 5;
uint b = 6;
// a * b가 uint8이 아닌 uint를 반환하기 때문에 에러 메시지가 난다:
uint8 c = a * b; 
// b를 uint8으로 형 변환해서 코드가 제대로 작동하도록 해야 한다:
uint8 c = a * uint8(b); 

• uint 기본은 256비트! uint8은 8비트여서 저 둘이 호환이 안된다.

6. 이벤트 작성

// 이벤트를 선언한다
event IntegersAdded(uint x, uint y, uint result);

function add(uint _x, uint _y) public {
  uint result = _x + _y;
  // 이벤트를 실행하여 앱에게 add 함수가 실행되었음을 알린다:
  IntegersAdded(_x, _y, result);
  return result;
}

• 이벤트는 컨트랙트가 블록체인 상에서 자네 앱의 사용자 단에서 무언가 액션이 발생했을 때 의사소통하는 방법이다. 컨트랙트는 특정 이벤트가 일어나는지 "귀를 기울이고" 그 이벤트가 발생하면 행동을 취하게 된다.

7. web3.js

// 여기에 우리가 만든 컨트랙트에 접근하는 방법을 제시한다:
var abi = /* abi generated by the compiler */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* our contract address on Ethereum after deploying */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// `ZombieFactory`는 우리 컨트랙트의 public 함수와 이벤트에 접근할 수 있다.

// 일종의 이벤트 리스너가 텍스트 입력값을 취한다:
$("#ourButton").click(function(e) {
  var name = $("#nameInput").val()
  // 우리 컨트랙트의 `createRandomZombie`함수를 호출한다:
  ZombieFactory.createRandomZombie(name)
})

// `NewZombie` 이벤트가 발생하면 사용자 인터페이스를 업데이트한다
var event = ZombieFactory.NewZombie(function(error, result) {
  if (error) return
  generateZombie(result.zombieId, result.name, result.dna)
})

// 좀비 DNA 값을 받아서 이미지를 업데이트한다
function generateZombie(id, name, dna) {
  let dnaStr = String(dna)
  // DNA 값이 16자리 수보다 작은 경우 앞 자리를 0으로 채운다
  while (dnaStr.length < 16)
    dnaStr = "0" + dnaStr

  let zombieDetails = {
    // 첫 2자리는 머리의 타입을 결정한다. 머리 타입에는 7가지가 있다. 그래서 모듈로(%) 7 연산을 하여
    // 0에서 6 중 하나의 값을 얻고 여기에 1을 더해서 1에서 7까지의 숫자를 만든다. 
    // 이를 기초로 "head1.png"에서 "head7.png" 중 하나의 이미지를 불러온다:
    headChoice: dnaStr.substring(0, 2) % 7 + 1,
    // 두번째 2자리는 눈 모양을 결정한다. 눈 모양에는 11가지가 있다:
    eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
    // 셔츠 타입에는 6가지가 있다:
    shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
    // 마지막 6자리는 색깔을 결정하며, 360도(degree)까지 지원하는 CSS의 "filter: hue-rotate"를 이용하여 아래와 같이 업데이트된다:
    skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
    eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
    clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
    zombieName: name,
    zombieDescription: "A Level 1 CryptoZombie",
  }
  return zombieDetails
}

• 이더리움은Web3.js라고 하는 자바스크립트 라이브러리를 가지고 있다.
• 직접 작성한 자바스크립트로 위의zombieDetails에서 생성된 값을 받아 웹 브라우저 기반 자바스크립트의 마법과 같은 기능(우리는 Vue.js를 이용함)을 활용하여 이미지를 변경하고 CSS 필터를 적용할 수 있다.