이더리움 DApp 개발 — Rental Car(1/2)
이더리움 DApp 개발환경 구축에 끝났다면 본격적으로 DApp을 개발해 보도록 하겠습니다.
먼저 프로젝트 폴더를 생성하도록 하겠습니다. 저는 맥을 사용하고 있고, Documents 폴더 밑에 DApp이란 폴더를 만들었습니다. 첫번째 실습 프로젝트를 위해서 DApp 폴더 밑에 rentalcar이라는 폴더를 만들었습니다.
터미널에서 rentalcar 폴더로 이동합니다. 맥의 경우는 아래의 명령어를 통해 rentalcar폴더로 이동할수 있습니다.
cd /Users/seungwongo/Documents/DApp/rentalcar중간에 보이는 seungwongo는 제 맥에서 사용자 이름입니다. 당연히 그대로 쓰시면 안되겠죠?
Truffle을 이용하여 프로젝트 파일 생성하기
우리는 앞서 이더리움 DApp 개발환경을 구축할 당시 Truffle 이라는 프레임워크를 설치를 하였습니다. Truffle은 스마트컨트랙트(Solidity) 프로그램을 개발, 컴파일, 배포, 테스트를 지원하는 프레임워크 입니다. Truffle 을 이용해서 프로젝트 개발 구조를 쉽게 생성할 수 있습니다.
터미널에서 우리가 만든 rental폴더로 이동 후 아래의 명령어를 통해 DApp 개발구조를 생성할 수 있습니다.
truffle init
위의 명령어 한번으로 아래와 같은 폴더 및 파일이 생성된 것을 확인할 수 있습니다.
참고로 저는 VS Code로 개발을 하고 있습니다.
truffle init 명령어를 통해 생성된 폴더 및 파일에 대해서 간략히 설명을 드리도록 하겠습니다.
- contracts(폴더) : solidity로 개발된 smart contract 파일을 저장하는 폴더입니다.
- Migrations.sol(파일) : 우리가 개발한 smart contract 프로그램을 배포를 해야하는데, 이 파일은 배포를 위한 solidity 파일로써 삭제하시면 안됩니다.
- migrations(폴더) : 배포를 위한 스크립트 파일 폴더입니다. smart contract 프로그램을 하나 개발할때마다 migration 파일도 이에 대응되서 하나씩 추가되는것을 나중에 확인할 수 있습니다. 그리고 각 파일은 순서를 가지고 있습니다.
- 1_initial_migration.js(파일) : Migrations.sol을 배포하기 위한 스크립트 파일입니다.
- test(폴더) : 개발된 smart contract를 테스트 하기 위한 폴더 입니다. 해당 폴더에 테스트 케이스를 작성하고, truffle test 는 명령어를 통해 개발된 smart contract를 테스트 해 볼 수 있습니다.
- truffle.js(파일) : truffle 설정 파일입니다. 개발을 위한 host, port, network ID 등을 설정해 놓고 사용하게 됩니다.
- truffle-config.js(파일) : 이 파일 역시 truffle 설정 파일이며, truffe.js 파일이 없는 경우에 적용되는 파일입니다.
우리는 truffle에서 제공하는 막강한 기능을 통해 위와 같은 프로젝트 개발 구조를 쉽게 생성할 수 있었습니다. 이제 smart contract를 개발하면 되는데요. 저는 여기서 좀 더 빠르게 DApp을 개발하기 위해서 다시 프로젝트 파일을 생성하기를 제안 드립니다.
Truffle Boxes를 이용하여 프로젝트 파일 생성하기
지금 만들어 놓은 프로젝트인 rentalcar은 그대로 두고, DApp 폴더 및에 rentalcar-react라고 폴더를 다시 만들도록 하겠습니다.
너무나도 고맙게도 Truffle 은 dApp 을 손쉽게 개발 할 수 있도록 미리 세팅해둔 프로젝트를 제공합니다. 이를 Truffle Boxes 라고 부릅니다.
현재 제공되고 있는 Truffle Boxes는 https://truffleframework.com/boxes 서 확인이 가능합니다.
새롭게 생성한 폴더 이름이 rentalcar-react 입니다. 뭔가 냄새가 나죠?? 그렇습니다. react.js를 이용하여 DApp을 개발할 것입니다.
제공되는 Truffle Boxes 중에 아래와 같이 react 가 있는것을 확인할 수 있습니다. 저는 개인적으로 react.js 보다는 vue.js를 이용하여 frontend를 많이 개발하는데, 아직은 truffle boxes 에는 vue는 없습니다. 나중에 여력이 되면 제가 한번 만들어봐야겠습니다.
앞서 우리는 truffle init 라는 명령어로 프로젝트 파일을 자동 생성하였는데요. 여기서는 아래의 명령어를 통해서 node.js, react.js, smart contract 개발 구조까지 한번에 생성이 가능합니다. 터미널에서 rentalcar_react 폴더로 이동 후 아래의 명령어를 실행해 봅시다.
truffle unbox react
앞서 truffle init을 통해 생성해 봤던 프로젝트와 비교하여 상당히 많은 폴더와 파일이 자동을 생성된 것을 확인할 수 있습니다. 그리고 간단한 형태의 smart contract 파일과 react 파일인 App.js 예제 프로그램까지 생성되어져서 프로그램을 개발하는데 상당히 도움이 됩니다.
앞에서 contracts, migrations 폴더에 대해서는 이미 설명을 드렸었고,
- scripts : build, test, start 환경 설정하는 폴더입니다.
- src : react.js 폴더입니다.
이번 포스팅을 통해서 Rental Car 서비스를 위한 모든 기능을 개발할 것이 아니고, DApp을 개발하는 방법을 경험하기 위한 정도의 아주 단순한 기능을 다룰것입니다. 하지만 좀 더 그럴싸한 UI 개발을 위해서 Bootstrap을 이용하도록 하겠습니다.
Bootstrap 다운로드
Bootstrap은 frontend의 디자인 프레임워크라고 보시면 됩니다.
https://getbootstrap.com/ 이동해서 bootstrap 최신버전을 다운로드 하도록 하겠습니다.
src 폴더 밑에 plugins/bootstrap 폴더를 만든 후 다운받은 bootstrap 파일을 복사해 넣습니다.
Smart Contract 구현
먼저 truffle.js 파일을 열고 아래의 코드를 복사해서 넣으세요.
module.exports = { networks: { development: { host: "127.0.0.1", port: 7545, network_id: "*" // Match any network id } }};
- host : 이더리움 클라이언트 주소를 가리킵니다. 우리는 로컬에서 작업하므로
127.0.0.1입니다. - port : 포트는
Ganache의 기본 포트7545입니다. - network_id : 이더리움 네트워크는 고유의
Network ID를 가지고 있습니다. 대표적으로1번은Main Ethereum Network를 가리킵니다. 우리는 사설(Private) 네트워크를 사용하므로*로 설정합니다.
이 외에 자세한 설정 옵션은 (https://truffleframework.com/docs/advanced/configuration) 를 확인하세요.
truffle unbox react 명령어를 통해 자동으로 생성된 파일 중에 contracts/SimpleStorage.sol, migrations/2_deploy_contracts.js, test/simplestorage.js, test/TestSimpleStorage.sol 파일은 사용하지 않기 때문에 삭제해 주세요.
contracts 폴더에 RentalCar.sol 이라는 파일을 생성해 주세요. 파일을 이렇게 직접 생성해도 되고, 터미널에서 아래의 명령어를 통해 컨트랙트 파일을 생성할 수 있습니다.
(명령어를 통해 파일을 생성하면, 기본적인 프로그램 구조가 자동으로 만들어집니다.)
truffle create contract RentalCar이 파일의 확장자는 *.sol 이라고 되어 있습니다. 이 파일은 Solidity라는 이더리움에서 개발한 Smart Contract를 개발하기 위한 언어입니다.
이제 Smart Contract를 개발할 것인데요. 여러분이 사용하고 있는 개발 프로그램 에디터를 사용하셔도 되고, Solidity 프로그램을 온라인 상에서 바로 구현, 테스트할 수 있는 https://remix.ethereum.org/ 에서 개발을 진행하셔도 됩니다.
저는 편의상 제가 사용하고 있는 VS Code에서 바로 작업을 하도록 하겠습니다.
RentalCar.sol 파일을 열어보세요. 아래와 같이 기본 구조가 코딩되어져 있을것입니다.
첫번째 라인의 pragma solidity ^0.4.22; 는 solidity compiler의 버전을 정의하는 곳입니다. solidity 프로그램은 반드시 첫번째 라인에 위와 같이 compiler를 정의해야 합니다.
현재 solidity compiler 버전은 터미널에서 아래의 명령어로 확인이 가능합니다.
truffle version
현재 버전은 4.24 이네요.
첫번째 라인의 solidity 버전을 동일하게 4.24로 바꿔주세요.
이번 포스팅에서는 Solidity 프로그램에 대해서는 자세히 다루지 않고 앞으로 구현한 각 function에 대한 기본적인 기능 설명만을 할것입니다. 추후 Solidity 프로그램은 별도의 포스팅을 통해 다루도록 하겠습니다.
일단 아래와 같이 이번에 작성할 Smart Contract 전체 프로그램 코드를 복사하세요. 우리는 최대한 간단히 기능 테스트를 할것이기 때문에, 기아 스팅어 차량에 대해서만 렌트에 대한 계약을 진행하는 컨트랙트 파일을 개발할 것입니다.
contract RentalCar { mapping (address=>uint16) myRentCar; // 차량을 렌트합니다. 이때 10 ETH 에 대한 거래가 일어납니다.
function rentCar() payable external { myRentCar[msg.sender]++; }
// 내가 현재 렌트한 차량 수를 반환합니다. 수수료(가스)를 지불하게 됩니다. function getMyRentCar() view external returns(uint16) { return myRentCar[msg.sender]; } // 렌트한 차량을 반납하면, 내가 가지고 있는 렌트 차량 수를 줄여줍니다. function returnRentCar() payable external { myRentCar[msg.sender]--; }}
컨트랙트 Deploy (배포)
Truffle 에서 컨트랙트를 Deploy 하려면 migration 을 작성해야합니다.
migrations 폴더에 2_deploy_contracts.js 파일을 생성하세요. 직접 생성하셔도 되고, 터미널에서 아래의 명령어를 통해 생성해도 됩니다.
truffle create migration rentalcar명령어를 통해 migration 파일을 생성하면, 파일명이 자동으로 생성이 되는데요. 위에서 파일명을 지정한 것처럼 2_deploy_contracts.js 파일명을 맞춰주는것이 더 좋습니다.
아래와 같이 migration 프로그램을 작성해 주세요.
var RentalCar = artifacts.require("./RentalCar.sol");module.exports = function(deployer) { deployer.deploy(RentalCar);};
저는 web3.js를 이용해서 이더리움과 통신 할 것이기 때문에, 앞서 작성한 컨트랙트 파일인 RentalCar.sol을 자바스크립트에서 접근가능한 json 형태로 변경할것입니다.
터미널에서 아래의 명령어를 실행하세요.
truffle compile
build/contracts 폴더 밑에 RentalCar.json 파일이 생성된 것을 확인할 수 있습니다.
자 이제 우리가 개발한 스마트 컨트랙트를 이더리움 네트워크로 배포해 보도록 하겠습니다. 물론 진짜 이더리움 네트워크는 아니구요. 우리 로컬에서 동작하는 이더리움 네트워크입니다.
앞서 포스팅했던 ‘이더리움 DApp 개발환경 구축' 에서 설치했던 Gnanche 프로그램을 실행한 상태에서 터미널에서 아래의 명령어를 실행하세요.
truffle migrate --reset
위에 보시는 것처럼 메시지가 나왔다면 정상적으로 배포가 되었다는 것입니다.
Frontend를 개발하고 실제 테스트를 진행하는 과정은 다음 포스팅에서 진행하도록 하겠습니다.
