Ethereum_dApp_3_개발하기(1)

이전 포스팅에서 스마트컨트랙과 dApp 개발환경 구축을 완료하였으므로 개발을 시작해보도록 하겠습니다. 

Ethereum_dApp_2_스마트컨트랙트와 dApp, 개발환경 구축하기에 대한 2편 내용을 다시 보고 싶다면, '다시보기'를 클릭해주세요. 

6. 개발 시작하기

간단한 웹 프로젝트를 구현하기 위해 Spring Boot 를 사용하였습니다. Spring Boot 설치 등의 설명은 잘 되어있는 타 사이트들이 많기 때문에 생략하도록 하겠습니다. (설치 및 설정 참고 : http://millky.com/@origoni/post/1100?language=ko_kr ) 우선 STS 의 Spring Starter Project 를 선택한 후 새 프로젝트를 생성해줍니다. 저는 빌드 도구로 Gradle 이 아닌 Maven 을 사용하였습니다.

프로젝트를 생성한 후의 모습입니다. 여기서 JSP 를 사용하기 위해 /src/main/ 에 webapp/WEB-INF/views 접 생성을 해주어야 합니다. 그 후 pom.xml 을는 직열어 다음과 같이 maven dependency 를 추가해줍니다. 또한 Controller, Mapper, DTO 등의 자바 파일을 분류하기 위해 패키지도 생성하여 구분합니다.

JSP, Bootstrap, JQuery 등을 사용하기 위해 위의 dependency를 추가합니다.

Bootstrap과 JQuery 의 경우 dependency 추가 후 해당 JSP 파일에서 아래와 같이 경로를 설정해주면 사용이 가능합니다.

 

또한 이번 dAPP 만들기 과정에서 블록에 모든 내용을 저장하면서 동시에 DB 에도 데이터를 저장하면서 테스트를 해보기 위해 MySQL 을 사용했습니다. 또한, MyBatis 라는 JDBC 보다 더 쉽게 데이터 베이스 프로그래밍을 도와주는 프레임워크도 추가하였습니다.

그 후 /src/main/resources 에 있는 application.properties 파일을 수정합니다.

server.port 는 포트번호를 설정해 줄 수 있습니다. (default : 8080)

그리고 Controller.java 파일을 생성 후

위의 메소드를 작성하고 프로젝트 우클릭 - Run As - Spring Boot App 을 통해 실행시킨 후http://localhost:4224/ 를 요청하면 @RequestMapping(value=”/”) 를 통해 리턴 값과 이름이 동일한 뷰인 index.jsp 를 찾아가게 됩니다.

여기서 index.jsp 의 위치는 application.properties 에 작성했던 대로  /src/main/webapp/WEB-INF/views 에 존재해야 합니다.

그리고 index.jsp를 위와 같이 작성했습니다. 여기서 투표 후보 및 득표 수는 테스트를 위해 DB 에 임의의 값으로 넣어둔 상태입니다. DB 값을 가져오고 화면에 보여주는 과정은 밑에서 설명 드리도록 하겠습니다.

 

우선 여기까지 작성 후 스마트 컨트랙트를 해당 TestRPC 에 발행시켜 보도록 하겠습니다. 컨트랙트의 작성은 Remix 홈페이지에서 할 수 있습니다. Remix 홈페이지는 솔리디티 파일의 컴파일과 블록에 올리는 것을 도와주는 온라인 솔리디티 컴파일러 홈페이지입니다. http://remix.ethereum.org 에 접속하여 솔리디티 파일(.sol)을 하나 생성합니다.

위는 제가 생성한 Contract 파일입니다. 간단하게 살펴보겠습니다.

 

pragma solidity ^0.4.23

솔리디티 버전을 명시하는 부분입니다.

Settings 부분에서 Solidity version 을 작성한 버전에 맞게 맞춰줘야 오류가 나지 않습니다.

 

contract Voting { }

해당 Contract 의 이름은 Voting 으로 설정하는 부분입니다.

 

address voter

mapping (address => bool) voters

mapping (address => string) candidates

address 는 주소값을 저장하는 변수형입니다.

mapping 은 자바의 해쉬맵과 유사합니다.

key => value 으로 데이터를 저장하는 변수형입니다. 단, key 값은 저장되지 않습니다.

function

말 그대로 함수이며

constant 를 사용하면 함수 내부에서 상태변수 값을 변경하지 않겠다는 뜻으로 사용되며 즉 트랜잭션을 발생시키지 않는다는 뜻입니다. 이 경우 요금(GAS)이 발생하지 않습니다.

returns(변수형) 으로 함수 내에서 return 되는 변수형을 지정할 수 있으며 맞지 않는 경우 오류가 발생합니다.

 

함수 하나를 살펴보겠습니다.

setVote() 라는 함수입니다. 이 함수는 투표를 하는 기능을 담고 있습니다.

voters[msg.sender] = true 를 통해 voters 라는 mapping 에 자신의 주소 값인 msg.sender 를 key 값으로 사용하여 value 값을 true 로 저장합니다. 조건문을 통해 이미 true 일 경우 아무 일도 하지 않으며 즉, 재 투표가 되는 것을 방지해줍니다. 또한 이 함수는 내부에서 상태변수들의 값을 변경하게 되므로 트랜잭션이 발생, 즉 요금이 발생하게 됩니다.

작성이 끝나게 되면 우측에 Start to compile 또는 Auto compile을 통해 컴파일을 할 수 있습니다. Auto compile 에 체크를 한 경우에는 실시간으로 자동 컴파일을 해줍니다. 컴파일이 끝나면 성공 메시지, 경고 메시지, 오류 메시지 등이 보이게 되는데 하단에 초록색 배경으로 컨트랙트 명이 보이는 것으로 컴파일이 성공적으로 끝났다는 것을 알 수 있습니다. 이 것이 보이지 않고 경고 및 오류 메시지만 보이는 경우 Solidity 문법 등에 오류가 생긴 경우이니 수정하시면 되겠습니다.

 

이제 블록에 해당 컨트랙트를 등록해보겠습니다. 우선 TestRPC 를 구동시키고

여기서 위와 같이 --db directory 옵션을 사용하면 해당 디렉토리에 블록이 계속 저장되어 재 구동 시에도 이전에 작업했던 블록들을 확인할 수 있습니다.

다시 돌아와서 Remix 홈페이지 우측 상단에 Run 탭에서 Environment 를 Web3 Provider 로 변경시켜줍니다.

 그 후 Deploy 버튼을 클릭하면

해당 컨트랙트가 블록에 쓰여 올라가는 것을 확인할 수 있습니다. 저는 이전에 작업을 했던 것이 있기 때문에 230개째의 블록에 쓰여지는 것을 볼 수 있습니다. 하지만 처음인 경우 1번 블록에 쓰여지게 될 것입니다.

deploy가 성공적으로 완료되면 Remix 우측하단에 해당 컨트랙트의 정보가 보여지며

'복사하기' 버튼을 통해 컨트랙트 주소(Contract Address)를 복사할 수 있습니다. 이 주소와 TestRPC 의 Contract created 의 주소가 동일한 것으로 제대로 블록에 올라 갔는 지 확인할 수 있습니다.

 

그리고 이 컨트랙트 주소는 개발 시 사용되므로 별도로 저장을 해놓아야 합니다. 이 주소가 없는 경우 이 컨트랙트에 다시 접근할 수가 없게 됩니다. 그리고 앞의 Compile 탭으로 돌아가 

 

Details 를 클릭하면 해당 컨트랙트의 다양한 정보들을 확인할 수 있는데

그 중 ABI 또한 개발 시 사용이 되므로 '복사하기' 버튼을 통해 별도로 저장을 해놓습니다.

ABI ?

Contract ABI(Application Binary Interface)로Solidity를 컴파일하면 나오는 산출물중의 하나로서

binary 실행 파일과 contract에서 설정한 함수 또는 변수를 연결해주는 역할을 합니다. 자세한 내용은 이더리움 위키(https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)에서 확인이 가능합니다.

 

여기까지 Spring Boot 의 기본 설정과 TestRPC네트워크의 블록에 컨트랙트를 발행하는 것까지 설명을 마치도록 하겠습니다.

전편의 내용이 궁금하시면 아래의 경로를 클릭해주세요.

Ethereum_dApp_1_블록체인과 이더리움

Ethereum_dApp_2_스마트컨트랙트와 dAPP, 개발환경 구축하기