[이더리움 댑 코딩] CryptoZombies | Lesson 1

솔리디티라는 언어를 공부하고자 crptozombies를 시작하게 되었다.

 

챕터 1: 레슨 개요

레슨 1에서 자네는 좀비 군대를 건설하기 위한 "좀비 공장"을 만들 걸세.

• 우리 공장은 군대 내 모든 좀비의 데이터베이스를 유지할 걸세
• 우리 공장은 새로운 좀비를 생성하는 함수를 가질 걸세
• 각 좀비는 랜덤하고 독특한 외모를 가질 걸세

이후 레슨에서 인간이나 다른 좀비를 공격하는 능력 등 더 많은 기능을 추가할 것이네. 그전에 새로운 좀비를 생성하는 기본 기능을 추가해야 하네.

좀비 DNA가 활용되는 방법

좀비의 외모는 "좀비 DNA"에 따라 달라질 것이네. 좀비 DNA는 다음과 같이 간단하게 16자리 정수이네:

8356281049284737

실제 DNA처럼 이 숫자의 각 부분은 좀비가 가진 개별 특성과 매핑이 될 것이네. 처음 2자리 숫자는 좀비의 머리 타입과 연결이 되고, 그 다음 2자리 숫자는 좀비의 눈 모양과 연결이 되지.

참고: 본 튜토리얼에서는 단순화해서 좀비의 머리 타입이 7개만 있을 거네 (2 자리 숫자로 100가지 경우의 수를 구할 수 있지만). 나중에 머리 타입을 다양하게 하고 싶다면 더 많은 머리 타입을 추가할 수도 있을 거네.

이를테면, 위의 예시 DNA에서 첫 2자리 숫자 83이네. 이를 좀비 머리 타입으로 매핑하기 위해 우리는 83 % 7 + 1 = 7 연산을 하지. 그래서 이 DNA를 가진 좀비는 7번째 좀비 머리 타입을 갖게 되지.

 

챕터 2: 컨트랙트

완전 기초부터 시작하기:

솔리디티 코드는 컨트랙트 안에 싸여 있지. 컨트랙트는 이더리움 애플리케이션의 기본적인 구성 요소로, 모든 변수와 함수는 어느 한 컨트랙트에 속하게 마련이지. 컨트랙트는 자네의 모든 프로젝트의 시작 지점이라고 할 수 있지.

비어 있는 HelloWorld 컨트랙트는 다음과 같네:

contract HelloWorld {

}

Version Pragma

모든 솔리디티 소스 코드는 "version pragma"로 시작해야 하는데, 이는 해당 코드가 이용해야 하는 솔리디티 버전을 선언하는 것이지. 이를 통해 이후에 새로운 컴파일러 버전이 나와도 기존 코드가 깨지지 않도록 예방하는 거지.

선언은 다음과 같이 하면 되네: pragma solidity ^0.4.19; (이 코스 집필 시 최신 버전이 0.4.19임).

종합하자면 컨트랙트 초기 뼈대는 다음과 같네. 새로운 프로젝트를 시작할 때마다 이 뼈대를 제일 먼저 작성해야 하지:

pragma solidity ^0.4.19;

contract HelloWorld {

}

 

 

챕터 3: 상태 변수 & 정수

잘했네! 이제 우리 컨트랙트를 위한 뼈대를 갖추게 되었네. 이제 솔리디티에서 변수를 다루는 방법을 배워 보도록 하지.

상태 변수는 컨트랙트 저장소에 영구적으로 저장되네. 즉, 이더리움 블록체인에 기록된다는 거지. 데이터베이스에 데이터를 쓰는 것과 동일하네.

예시:

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

이 예시 컨트랙트에서는 myUnsignedInteger라는 uint를 생성하여 100이라는 값을 배정했네.

부호 없는 정수: uint

uint 자료형은 부호 없는 정수로, 값이 음수가 아니어야 한다는 의미네. 부호 있는 정수를 위한 int 자료형도 있네.

unsigned int같은 자식인가보군!!

참고: 솔리디티에서 uint는 실제로 uint256, 즉 256비트 부호 없는 정수의 다른 표현이지. uint8, uint16, uint32 등과 같이 uint를 더 적은 비트로 선언할 수도 있네. 하지만 앞으로의 레슨에서 다루게 될 특수한 경우가 아니라면 일반적으로 단순히 uint를 사용하지.

 

 

챕터 4: 수학 연산

솔리디티에서 수학은 꽤 간단하지. 다음 연산은 대부분의 프로그래밍 언어의 수학 연산과 동일하네:

• 덧셈: x + y
• 뺄셈: x - y,
• 곱셈: x * y
• 나눗셈: x / y
• 모듈로 / 나머지: x % y (이를테면, 13 % 5는 3이다. 왜냐면 13을 5로 나누면 나머지가 3이기 때문이다)

솔리디티는 지수 연산도 지원하지 (즉, "x의 y승", x^y이지):

uint x = 5 ** 2; // 즉, 5^2 = 25

 

 

챕터 5: 구조체

자네가 좀 더 복잡한 자료형을 필요로 할 때가 가끔 있을 거네. 이를 위해 솔리디티는 구조체를 제공하지:

struct Person {
  uint age;
  string name;
}

구조체를 통해 여러 특성을 가진, 보다 복잡한 자료형을 생성할 수 있지.

참고로 string이라는 새로운 자료형을 방금 소개했네. 스트링은 임의의 길이를 가진 UTF-8 데이터를 위해 활용되네. 이를테면 string greeting = "Hello world!" 이렇게 말이지.

 

챕터 6: 배열

어떤 것의 모음집이 필요할 때 배열을 사용할 수 있네. 솔리디티에는 정적 배열과 동적 배열이라는 두 종류의 배열이 있지:

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

구조체의 배열을 생성할 수도 있다. 이전 챕터의 Person 구조체를 이용하면:

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

상태 변수가 블록체인에 영구적으로 저장될 수 있다는 걸 기억하나? 그러니 이처럼 구조체의 동적 배열을 생성하면 마치 데이터베이스처럼 컨트랙트에 구조화된 데이터를 저장하는 데 유용하네.

Public 배열

public으로 배열을 선언할 수 있지. 솔리디티는 이런 배열을 위해 getter 메소드를 자동적으로 생성하지. 구문은 다음과 같네:

Person[] public people;

그러면 다른 컨트랙트들이 이 배열을 읽을 수 있게 되지 (쓸 수는 없네). 이는 컨트랙트에 공개 데이터를 저장할 때 유용한 패턴이지.

 

챕터 7: 함수 선언

솔리디티에서 함수 선언은 다음과 같이 하네:

function eatHamburgers(string _name, uint _amount) {

}

이 함수는 eatHamburgers라는 함수로, string과 uint 2개의 인자를 전달받고 있군. 현재로선 함수의 내용이 비어 있네.

참고: 함수 인자명을 언더스코어(_)로 시작해서 전역 변수와 구별하는 것이 관례이네 (의무는 아님). 본 튜토리얼 전체에서 이 관례를 따를 것이네.

이 함수를 다음과 같이 호출할 수 있지:

eatHamburgers("vitalik", 100);

 

 

챕터 8: 구조체와 배열 활용하기

새로운 구조체 생성하기

지난 예시의 Person 구조체를 기억하나?

struct Person {
  uint age;
  string name;
}

Person[] public people;

이제 새로운 Person를 생성하고 people 배열에 추가하는 방법을 살펴보도록 하지.

// 새로운 사람을 생성한다:
Person satoshi = Person(172, "Satoshi");

// 이 사람을 배열에 추가한다:
people.push(satoshi);

이 두 코드를 조합하여 깔끔하게 한 줄로 표현할 수 있네:

people.push(Person(16, "Vitalik"));

참고로 array.push()는 무언가를 배열의 끝에 추가해서 모든 원소가 순서를 유지하도록 하네. 다음 예시를 살펴보도록 하지:

uint[] numbers;
numbers.push(5);
numbers.push(10);
numbers.push(15);
// numbers 배열은 [5, 10, 15]과 같다.

 

 

챕터 9: Private / Public 함수

솔리디티에서 함수는 기본적으로 public으로 선언되네. 즉, 누구나 (혹은 다른 어느 컨트랙트가) 자네 컨트랙트의 함수를 호출하고 코드를 실행할 수 있다는 의미지.

확실히 이는 항상 바람직한 건 아닐 뿐더러, 자네 컨트랙트를 공격에 취약하게 만들 수 있지. 그러니 기본적으로 함수를 private으로 선언하고, 공개할 함수만 public으로 선언하는 것이 좋지.

private 함수를 선언하는 방법을 살펴보도록 하겠네:

uint[] numbers;

function _addToArray(uint _number) private {
  numbers.push(_number);
}

private는 컨트랙트 내의 다른 함수들만이 이 함수를 호출하여 numbers 배열로 무언가를 추가할 수 있다는 것을 의미하지.

위의 예시에서 볼 수 있듯이 private 키워드는 함수명 다음에 적네. 함수 인자명과 마찬가지로 private 함수명도 언더바(_)로 시작하는 것이 관례라네.

 

챕터 10: 함수 더 알아보기

이번 챕터에서는 함수의 반환값과 함수 제어자에 대해서 알아보겠네.

반환값

함수에서 어떤 값을 반환 받으려면 다음과 같이 선언해야 하네:

string greeting = "What's up dog";

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

솔리디티에서 함수 선언은 반환값 종류를 포함하지 (이 경우에는 string이네).

함수 제어자

위에서 살펴 본 함수 sayHello()는 솔리디티에서 상태를 변화시키지 않는다네. 즉, 어떤 값을 변경하거나 무언가를 쓰지 않지.

이 경우에는 함수를 view 함수로 선언한다네. 이는 함수가 데이터를 보기만 하고 변경하지 않는다는 뜻이지:

function sayHello() public view returns (string) {

솔리디티는 pure 함수도 가지고 있는데, 이는 함수가 앱에서 어떤 데이터도 접근하지 않는 것을 의미하지. 다음을 살펴보게:

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

이 함수는 앱에서 읽는 것도 하지 않고, 다만 반환값이 함수에 전달된 인자값에 따라서 달라지지. 그러니 이 경우에 함수를 pure로 선언하지.

참고: 함수를 pure나 view로 언제 표시할지 기억하기 어려울 수 있지. 운 좋게도 솔리디티 컴파일러는 어떤 제어자를 써야 하는지 경고 메시지를 통해 잘 알려주네.

 

챕터 11: Keccak256과 형 변환

우리가 _generateRandomDna 함수의 반환값이 (반) 랜덤인 uint가 되기를 원하면, 어떻게 하면 되겠는가?

이더리움은 SHA3의 한 버전인 keccak256를 내장 해시 함수로 가지고 있지. 해시 함수는 기본적으로 입력 스트링을 랜덤 256비트 16진수로 매핑하네. 스트링에 약간의 변화라도 있으면 해시 값은 크게 달라지네.

해시 함수는 이더리움에서 여러 용도로 활용되지만, 여기서는 의사 난수 발생기(pseudo-random number generator)로 이용하도록 하지.

예시:

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

이 예시를 보면 입력값의 한 글자가 달라졌음에도 불구하고 반환값은 완전히 달라짐을 알 수 있지.

참고: 블록체인에서 안전한 의사 난수 발생기는 매우 어려운 문제네. 여기서 우리가 활용한 방법은 안전하지는 않지만, 좀비 DNA에 있어서 보안은 최우선순위가 아니니 우리의 목적에는 충분히 적합할 것이네.

형 변환

가끔씩 자네가 자료형 간에 변환을 할 필요가 있지. 다음 예시를 살펴보세:

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

위의 예시에서 a * b는 uint를 반환하지. 하지만 우리는 이 반환값을 uint8에 저장하려고 하니 잠재적으로 문제를 야기할 수 있네. 반환값을 uint8으로 형 변환하면 코드가 제대로 작동하고 컴파일러도 에러 메시지를 주지 않을 걸세.

 

챕터 12: 종합하기

랜덤 좀비 생성기를 거의 다 완성해 가는군! 이제 모든 내용을 종합하는 public 함수를 생성해 보세.

좀비의 이름을 입력값으로 받아 랜덤 DNA를 가진 좀비를 만드는 public 함수를 생성할 걸세.

 

챕터 13: 이벤트

우리의 컨트랙트가 거의 완성되어 가는군! 이제 이벤트를 추가해 보세.

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

예시:

// 이벤트를 선언한다
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;
}

그러면 자네 앱의 사용자 단은 해당 이벤트가 일어나는지 귀를 기울이지. 자바스크립트로 이를 구현하면 다음과 같네:

YourContract.IntegersAdded(function(error, result) {
  // 결과와 관련된 행동을 취한다
})

 

최종 완성 코드는 아래와 같다.

pragma solidity ^0.4.19;

contract ZombieFactory {

    // 여기에 이벤트 선언

    uint dnaDigits = 16;
    uint dnaModulus = 10 ** dnaDigits;

    struct Zombie {
        string name;
        uint dna;
    }

    Zombie[] public zombies;

    function _createZombie(string _name, uint _dna) private {
        zombies.push(Zombie(_name, _dna));
        // 여기서 이벤트 실행
    }

    function _generateRandomDna(string _str) private view returns (uint) {
        uint rand = uint(keccak256(_str));
        return rand % dnaModulus;
    }

    function createRandomZombie(string _name) public {
        uint randDna = _generateRandomDna(_name);
        _createZombie(_name, randDna);
    }

}

 

챕터 14: Web3.js

우리의 솔리디티 컨트랙트가 완성되었네! 이제 이 컨트랙트와 상호작용하는 사용자 단의 자바스크립트 코드를 작성해야 하네.

이더리움은 Web3.js라고 하는 자바스크립트 라이브러리를 가지고 있네.

이후 레슨에서 컨트랙트를 구축하고 Web3.js를 셋업하는 방법을 자세히 살펴볼 걸세. 하지만 지금으로선 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
}

그런 다음, 우리의 자바스크립트 코드가 위의 zombieDetails에서 생성된 값을 받아 웹 브라우저 기반 자바스크립트의 마법과 같은 기능(우리는 Vue.js를 이용함)을 활용하여 이미지를 변경하고 CSS 필터를 적용하지. 이를 위한 코드를 이후의 레슨에서 살펴볼 것이네.