클레이튼 네트워크에서 NFT 개발 (Truffle)

• Truffle을 사용하여 KIP-17를 배포한다.
• Truffle은 이더리움 기반 dApp 개발을 돕는 블록체인 프레임워크이다.
• 스마트 컨트랙트의 컴파일과 배포를 지원한다.
• 클레이튼은 이더리움을 포크한 네트워크이기에, Truffle을 사용한 개발 환경을 설정할 수 있다.

Truffle 설정

• 코드를 작성할 폴더에서 truffle init을 통해 truffle을 초기화 한 뒤, npm init으로 npm을 초기화한다.

• 클레이튼 지갑의 개인 키가 필요함으로, dotenv를 사용해 환경변수로 개인 키를 관리하도록 한다.

• 원격 EN(Endpoint Node) 노드로 배포하기 위해서 truffle-hdwallet-provider-klaytn를 설치한다.

• truffle-hdwallet-provider-klaytn은 truffle-hdwallet-provider에서 파생된 자바스크립트 HD 지갑 제공자이다.

• truffle-config.js에서 networks 설정을 한다.
  🍍 private key를 사용해 지갑 제공자를 설정한다.

🍑 Truffle 클레이튼 문서 : https://ko.docs.klaytn.com/smart-contract/ide-and-tools/truffle#configuring-truffle-hdwallet-provider-klaytn

const HDWalletProvider = require('truffle-hdwallet-provider-klaytn');
require('dotenv').config();
const { PRIVATE_KEY } = process.env;
const URL = 'https://api.baobab.klaytn.net:8651';

// ... 코드 생략

	// 바오밥 테스트 네트워크 설정
    baobab: {
      provider: new HDWalletProvider(PRIVATE_KEY, URL),
      network_id: 1001,
      gas: 20000000,
      gasPrice: 750000000000,
    }

• truffle-config.js에서 compilers의 solc version과 컨트랙트의 solc version이 일치하도록 설정해준다.
  🍒 이 문서에서는 솔리디티 0.5.6으로 설정하였다.

pragma solidity 0.5.6;

--- --- --- --- --- --- --- --- ---

  compilers: {
    solc: {
      version: "0.5.6",
    }
  },

• KIP-17 코드를 contracts 폴더 내부에 작성하고, migrations폴더 내부에 1_initial_migration.js 파일에 작성한 KIP-17 코드가 배포될 수 있게 설정한다.

// 1_initial_migration.js

const Migrations = artifacts.require('Migrations');
const MyKlaytnNFTs = artifacts.require('배포할_컨트랙트_이름.sol'); 

module.exports = function (deployer) {
	deployer.deploy(Migrations);
	deployer.deploy(MyKlaytnNFTs); 
};

• Truffle 설정이 끝난 뒤 폴더 구조

• klaytn-contracts 라이브러리에서 KIP-17에 대한 코드를 확인, 사용할 수 있다.
  🍑 https://github.com/klaytn/klaytn-contracts/tree/master/contracts/token/KIP17

배포 테스트

• truffle migrate --compile-all --network baobab 로 네트워크를 바오밥 테스트 네트워크로 연결하여 배포한다.

• 배포가 끝난 뒤 폴더 구조 (build 폴더와 test 폴더가 새로 생성된다)

• 터미널에 배포와 관련된 정보가 보여진다.

• 배포 완료 후, truffle console --network baobab 으로 Truffle 콘솔을 실행한다.

• 정상적으로 콘솔이 실행된 모습이다.

• truffle 콘솔을 조작하여 배포된 컨트랙트의 함수를 실행할 수 있다.

• mint 기능이 있다면, 실제로 NFT를 발행할 수도 있다.

🍎 깃허브 주소 : https://github.com/citron03/Truffle-KIP17-development

🍈 배포된 스마트 컨트랙트를 baobab Klaytnscope에서 확인하기 : https://baobab.scope.klaytn.com/account/0xf98c89b2724db980c96e7f615ec11cba715336fe?tabId=txList

클라이언트 앱(react)과 truffle

• truffle 공식 사이트를 들어가면, Truffle Boxes를 확인할 수 있다.

• Truffle Boxes은 쉽게 프론트엔드 dApp을 만들 수 있도록 지원한다.

🍫 truffle 공식 사이트 : https://trufflesuite.com/boxes/index.html

• 다양한 프레임워크를 지원하는 Truffle Boxes중에서 react를 확인해보자.

🍫 React Truffle Box : https://trufflesuite.com/boxes/react/

• 공식 문서에 따르면, 다음과 같은 과정으로 truffle을 사용하는 react dApp을 구성할 수 있다.

// 1. truffle을 설치하고, Create-React-App으로 react app을 시작한다.

npm install -g truffle // truffle 설치 (이미 설치했다면, 건너 뛴다)
truffle unbox react // truffle을 사용하는 CRA

또는

npx truffle unbox react

// 2. truffle 개발 콘솔을 실행한다.

truffle develop

// 3. 스마트 컨트랙트를 컴파일 하고 배포한다.
// 스마트 컨트랙트에 변경사항이 있을 때, 이 작업을 다시 한다.

compile
migrate

// 4. 생성된 디렉토리의 client 폴더 내부에 react app이 있다.
// 해당 폴더로 이동 후 react app을 실행할 수 있다.

cd client 
npm run start

• npx truffle unbox react으로 생성된 프로젝트의 파일과 폴더의 구성이다.

• 기본적으로 기존의 truffle 폴더와 유사하다.

• client 폴더 내부에서 우리에게 익숙한 CRA로 만들어진 리액트 앱의 구성을 확인할 수 있다.

• client 폴더로 들어가, 리액트 앱을 실행시키면, 실행되는 리액트 클라이언트 앱은 자동으로 지갑과의 연결을 진행한다.

• 다만, 실행 후 에러가 발생하는데 dApp은 이더리움이 있어야 하기 때문이다.

• 그를 위해서, 트러플 네트워크 실행시 보이는 develop 네트워크의 지갑(Truffle에 의해 개발용으로 만들어진 니모닉 지갑이다)을 연결하고 이 지갑을 통해서 지불한다.
  🍉 이때 가스비에 관한 에러가 발생하면, truffle-config.js 의 네트워크 설정에서 가스비를 조정한다.
  🍉 이때는 물론, develop 네트워크로 지갑을 연결해야 한다.

• 이더리움을 전송하면, 위와 같이 리액트 앱이 실행된 화면을 볼 수 있다.

회고

• 처음에는 truffle-config.js에서 solc 버전을 설정하는 것을 몰라 헤매었다.

• Remix IDE와 유사했던 klaytn IDE 환경과 다르게, truffle에서는 배포 후 콘솔로 컨트랙트를 사용해야 했기에, 어색한 점이 있었다.

• 클레이튼 네트워크는 고정된 가스비 750000000000을 지불해야 했고, 가스비가 부족할 시 에러가 발생했다.

• 실제로 바오밥 테스트넷에서 NFT를 발행하고 클레이튼 스코프에서 이를 확인할 수 있었다.

• 다만, KIP-17의 함수들은 내용이 많았기에 모든 함수의 기능에 대해서 파악하지는 못했다.

• truffle로 스마트 컨트랙트를 배포, 사용할 수 있지만, 실제 dApp 개발에서 truffle을 어떻게 사용할 수 있는지 의문이었는데 truffle 공식문서에서 해답을 찾을 수 있었다.

• 거의 대부분의 정답은 역시 공식 문서에 있다는 것을 새삼스래 깨달았다. 공식 문서를 자주 확인하는 습관을 기르자.

• 위의 트러플 박스를 사용한 방법에서 설정을 조금 수정한다면, 클레이튼 개발환경을 만들 수 있을 것 같다. 시간이 날 때 시도해봐야겠다.