[쿤s의 dApp 개발] 3편 - dApp 구현 [Web3/브라우저] > 연재 강좌

체인톡 (ChainTalk.io) - 이더리움 커뮤니티

초간단 거래소 에어드랍 BTCex 10$~
벡사니엄 5천원 에어드랍(이미 코인원 인도…
EOS로 에어드랍+토큰 (크라우드포스 ICO…
Waves 서울 커뮤니티 밋업 (10월11일…
서울이더리움 밋업 - Loom Network…
블록체인 소개자료4

1  and  xy  1>1  xx  11  이더리움  비트코인 

 

연재 강좌

쿤s의 dApp 개발 | [쿤s의 dApp 개발] 3편 - dApp 구현 [Web3/브라우저]

페이지 정보

작성자 쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물  (119.♡.213.♡) 작성일17-07-07 17:23 조회8,484회 댓글8건

본문


3. dApp 구현 [Web3/브라우저] 

 

이전까지는 solidity와 메타마스크만을 가지고 간단하게 테스트를 했었다면, 이 글에서는 해당 스마트 컨트랙트 기능을 본격적으로 웹상에서 javascript를 활용하여 직접 동작시켜보는 시간을 가지려 합니다. 모든 소스에 관한 내용을 살펴보면 좋겠지만, 전체적인 내용을 모두 살펴보기 보다는 중요한 부분들을 조금 더 집중적으로 살펴보도록 하겠습니다.

 

우선, 해당 프로젝트의 깃 허브 소스 주소는 https://github.com/iKeyDev-KsJ/ikeydev-ksj.github.io 이며

실 기능을 테스트해볼 수 있는 테스트 페이지는 https://ikeydev-ksj.github.io/ 입니다.

 

12e33f3ca620deefb6296dbdb5ae35f5_1499412
 

프론트엔드단의 html5 및 css3 디자인 및 소스 작업들은 기본적인 HTML5 / CSS3 코딩 방법을 그대로 준수하므로 이더리움에서 제공하는 ETHEREUM <-> HTML간 소통을 담당하는 핵심적인 부분인 web3를 javascript에서 사용하는 방법을 위주로 보도록 하겠습니다. [좀더 구체적으로는 Web3 JavaScript API를 사용하여 통신하게됩니다.]

 

주소 : https://github.com/ethereum/wiki/wiki/JavaScript-API

 

 

1. 간단한 소스 분석

 

if (typeof web3 !== 'undefined') {

window.web3 = new Web3(web3.currentProvider);

}

 

위 조건문은 브라우저에 Mist 혹은 MetaMask가 inject되어 있는지 않되어 있는지를 체크하여, 미스트 혹은 메타마스크를 사용하고 있는 상태일 경우, 현재 Provier로 web3를 초기화하여 설정해주는 문구입니다.

 

위키에서는 기본적으로 아래와 같은 선언을 표준형으로써 권고하고 있습니다.

 

if (typeof web3 !== 'undefined') {
  web3 = new Web3(web3.currentProvider);
} else {
  // set the provider you want from Web3.providers
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

 

 

저번 글을 읽으셨다면, contractAddress와 abi에 관한 내용을 가지고 계실 것입니다. 만약 없으시다면 이전 글을 참고하셔서 Solidity로 작성된 내용을 컴파일 하시어 컨트랙 주소와 abi 내용을 복사해두시기 바랍니다. 해당 내용이 있어야만 javascript 상에서 web3를 사용하여 컨트랙의 기능을 활용할 수 있기 때문입니다.

 


var contractAddress = '0xb20083039a3b7b76c0dc3884c6e5f41c3784671d';
var abi = [{"constant":false,"inputs":[{"name":"_receiver","type":"address... 이하생략;
var message;

 

 

message = web3.eth.contract(abi).at(contractAddress);

 

 

관련된 내용 처리를 위하여 위의 소스처럼 컨트랙 주소와 abi를 javascript에 변수로 할당해줍니다. 그런 후에 아래의 소스처럼 비동기식 (콜백타입 형식)으로 값을 받아와 컨트랙에서 지원하는 함수를 사용할 수 있게됩니다.

 


sendMessage.sendMsg(address, document.getElementById('receive_contents').value, {gasPrice:web3.toWei(2,
 'Gwei')}, function(e,r) {

alert("TXID Copy to clipboard: Ctrl+C, Enter\n" + r);

});

 

기본적인 함수 타입은 

 

Contract.functionName(function variable_1, _2, ...., {from: accounts, gasPrice: ...., gas: ....}, function (e, r) {

 

/* ... */

 

});

 

형식으로써 Java에서 함수를 호출하는 것과 다소 유사한 방식으로 함수를 호출하게됩니다.

sendMsg 타입은 이더리움 네트워크에 서비스를 요청하는 형식이기 때문에, 트랜잭션이 발생하며 반환창으로써 트랜잭션 ID를 사용자에게 보여주는 방식으로 위 코드가 동작하게됩니다.

 

그러나 getMsg 형식은, constants 형식으로써 요청시 특별한 자원을 요구하지 않기 때문에 아무런 트랜잭션이 발생하지 않으며 곧바로 자신에게 도착한 메시지가 있는지 확인할 수 있는 방식으로 동작하게됩니다.

 

깃허브에 올려진 소스들은 거진 대부분이 프론트엔드 (사용자에게 보여지는 부분)에 관한 처리 소스가 대부분을 차지하고 있을 정도로 많은 부분들이 기본적인 웹브라우저를 작성하는 형식으로써 많은 시간이 할애됩니다.

 

스마트 컨트랙의 경우에는 반환값으로 여러개를 가질 수 있게 되는데, 이런 경우 아래와 같은 방식으로 값들을 처리합니다.

 


message.getMsg(function(e,r) {

document.getElementById('send_address').value = r[1];
document.getElementById('send_contents').value = r[2];

});

 

컨트랙의 getMsg를 호출하게 되면 관련된 반환값이 콜백함수인 r의 인자로 들어가게 됩니다. 반환값은 배열형식으로 처리되기 때문에 r[0] ~ r[반환값 갯수 - 1] 형식으로 사용할 수 있게 되며, 이러한 값들을 위의 내용처럼 브라우저에서 사용자에게 보여져야만 하는 부분들에 값들이 나타나게끔 처리하게 됩니다.

 

if(address.search(/0x[a-zA-Z0-9]{40}/) != -1) {

 

위 내용은 address가 올바른 값을 가지는지에 관한 처리 구문입니다. 사용자가 악의적으로 잘못된 주소를 입력하게 되어, 컨트랜트상에서 처리할 때에 올바르지 못한 값으로 보내지게 되는 것을 방지해야하기 때문에 위와같이 정규식을 사용하여 사용자에게 재입력을 요청할 수 있게끔 할 수도 있습니다.

 


setInterval(function() {

/**/

}, 1000);

 

위 내용은 account.js에서 나요는 내용인데, 1초 간격으로 주기적인 재실행을 하여 지속적으로 변경사항이 있는지를 점검하게됩니다. 메타마스크에서 계좌를 바꾸는 경우, 관련 내용들을 모두 갱신해주어야만 하기 때문입니다.

 

 

2. 동작 방식의 문제점 

 

우선 문제점을 언급하기에 앞서 본문의 내용이 대체로 심플하고, 간결하게 작성된 부분은, 해당 글 최상단에 적어둔 web3 javascript api wiki 페이지에서 web3에서 사용 가능한 함수에 관하여 예제가 상당히 자세하게 나와있다보니 그리 어렵지 않게 관련 함수들을 쉽게 활용하며 사용할 수 있기 때문이라고 핑계아닌 핑계를 살포시 대봅니다. 

 

솔리디티로 작성하게된 포스트 박스형식의 스마트 컨트랙의 큰 단점이 하나 있다면 이것은 오로지 1:1에서만 동작할 수 있다는 부분입니다. 이것이 무엇인가 하면, A와 B라는 사람이 위 스마트 컨트랙을 사용하여 내용을 주고받는 것은 문제가 되지 않습니다. 하지만 만약 C라는 사람이 여기에 끼어들어 A <-> B <-> C 사이에서 내용이 오고가게 되는 경우, 메시지의 내역이 계속 덮어씌워지게 되어 보내는 시점과 받는 시점, 그리고 메시지를 확인하는 시점이 어긋나면 몇몇 메시지들은 아에 사용자가 내용도 못본 채로 영원히 읽지도 못한채로 씹히는(?) 상태가 될 가능성이 존재합니다.

 

그렇다고 A <-> B / A <-> C / B <-> C를 독립적으로 분리하여 스마트 컨트랙을 사용하자니 해당 갯수만큼의 스마트 컨트랙을 추가로 만들어야 하고, 해당 페이지를 다시 새롭게 신설해서 독립적 운영을 시켜야만 하다보니 1:1 대화를 하는 두 사람 중 누군가는 이 스마트 컨트랙을 활용할 줄 알아야만 할 것입니다. (적어도 홈페이지 개설이나 새롭게 파는 것정도의 지식은 알고 있어야 할것입니다.)

 

스마트 컨트랙은 한가지 재미있는 (?) 부분이 존재하는데, 스마트 컨트랙에서 또다른 스마트 컨트랙을 동적으로 생성할 수 있으며 생성한 스마트 컨트랙의 함수를 호출할 수 있다는 부분입니다. 심지어는 두 컨트랙끼리 서로 정보를 교환하는 것도 어렵지 않게 가능합니다. (돈을 주고받는 것도 가능하며, 토큰류 거래도 가능합니다.)

 

상당한 난이도가 예상되긴 하지만, 만약 위 내용을 보다 편하게 처리한다면 내부적으로 우체국 같은 역할을 해주는 스마트 컨트랙을 만들어서 사용자들이 이곳에 내용을 보내면 우체국이 해당 내용을 가지고 작은 우편 (또다른 컨트랙)을 만들어 이것을 가지고 처리하는 방식으로써 동일한 1:1 방식이지만 보다 더 유연한 서비스 제공이 가능한 포스트 박스 서비스를 제공할 수 있게 될 것입니다.

 

 

3. 글을 마치며 

 

만약 여러분께서 시간이 충분히 되신다면, 한번 위 포스트 박스의 미흡한 기능들을 보완하여 1:다 형식 혹은 N : M 형식의 우편을 주고받을 수 있는 보다 진보된 컨트랙 서비스를 한번 만들어 보시면 어떨까 싶습니다.

 

저의 글을 읽고 직접 해보실 분들이 많이 계시지 않을 수도 있겠지만, 

한분이라도 따라해보실 분들이 계실 것이라 생각하기에 그분들을 위하여 간단한 숙제를 하나 내보도록 하겠습니다.

 

1. 이전의 글들을 참고하여 자신이 솔리디티를 직접 컴파일 해 스마트 컨트랙을 생성시킨다.

2. 생성된 스마트 컨트랙과 위 올려진 깃허브 프로젝트의 소스파일들을 이용해 자신만의 사이트를 오픈시킨다.

3. 혹은 자신이 npm의 live-server를 사용하여 개인 페이지를 오픈시킨다.

4. 메타마스크 계정을 1개 더 만든 후에, 두 계정을 가지고 내용을 주고받아본다.

5. 스마트 컨트랙 주소와 깃허브 프로젝트 주소를 덧글로 인증! (깃허브 프로젝트 주소가 없는경우, 직접 만든 스마트 컨트랙 주소만 올려주셔도 됩니다.)

 

단, 아래의 경우는 무효입니다.

 

1. 스마트 컨트랙 주소가 제가 사용한 스마트 컨트랙 주소와 동일하면 무효입니다.

2. 스마트 컨트랙에서 메시지를 주소받은 트랜잭션 내용이 없으면 무효입니다. 

(적어도 여러분이 직접 테스트해보기를 희망하기 때문입니다.)

 

인증 덧글이 10개 정도 쌓이면 다음 글을 연재하도록 하겠습니다. :D

[막상 적고 보니 숙제가 간단하지 않은 것 같네요 -_-.. 나쁜필자]

 

사실상 포스트 박스 형식의 dApp 연재는 끝난 것이 맞지만, 솔리디티의 활용법이라던지 좀더 편리하게 일반 개인 8545 포트를 사용하여 메타마스크 지갑으로 이체할 수 있는 방법과 관련하여 추가적으로 연재할 내용들을 준비 중에 있는 상태입니다.

 

감사합니다.

 

 

P.S. 궁금 사안 혹은, 잘못된 부분에 관련한 지적은 언제나 환영합니다.

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
추천 4 비추천 0

쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물 1,864TALK CB4B00A2C7C1DFA4FC3AAC2E08FEDF83D7CB0384 1EZfHVeaRVHGa88ijam2dDgSFuQAEfXkhe

What is the BTC? ETH?
It's eating?

댓글목록

loum님의 댓글

loum 쪽지보내기 프로필 아이디로 검색 전체게시물 아이피 223.♡.10.♡ 작성일

재미있습니다.
API가 많은 부분 블럭체인에 관한 것이군요..
스마트 컨트랙트의 가능성 및 한계 등을 엿볼 수 있군요.
앞으로 더 많은 API가 개발되겠군요..

쿤s님의 댓글

쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물 댓글의 댓글 아이피 119.♡.213.♡ 작성일

더 많은 API 들이 개발되고 사용할 수 있는 단계가 되길 가장 바라는 1人 중 한명입니다.
아직 Whisper랑 Swarm쪽과 관련해서 패치가 많이 진행되지 않은 것 같아서 많이 아쉽더군요.
그래도 앞으로 충분히 발전 가능성이 농후해 보이는건 사실입니다.

성현군님의 댓글

성현군 쪽지보내기 프로필 아이디로 검색 전체게시물 아이피 14.♡.99.♡ 작성일

좋은 자료 감사드립니다. 예전에 비슷한 아이디어로 야구장 관중석을 다 스마트컨트랙화 하는 걸 컨셉 확인 수준으로 진행했었는데 다시 떠오르네요 ㅎㅎㅎ

WEBUS님의 댓글

WEBUS 쪽지보내기 홈페이지 프로필 아이디로 검색 전체게시물 아이피 121.♡.54.♡ 작성일

좋은 강의 감사합니다.
개인적으로 너무 바빠서 미루고 있는데..... 시간나는대로 1편부터 정독하겠습니다!

쿤s님의 댓글

쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물 댓글의 댓글 아이피 175.♡.76.♡ 작성일

시간이 나고 여유가 될 때에 하나 하나 해나가는 재미 또한 매우 쏠쏠하다죠 ㅎㅎㅎㅎㅎ
읽어주심에 감사드립니다!

연재 강좌 목록

Total 146건 1 페이지
연재 강좌 목록
번호 제목 글쓴이 날짜 조회 추천 비추천
146 나도 dApp 개발 판문점선언 이더리움 스마트컨트랙 인기글 atomrigs 쪽지보내기 프로필 아이디로 검색 전체게시물 04-30 2227 3 0
145 블록체인 2.0 블록체인 같이 공부하실분!! 댓글9 인기글관련링크 코인마스터 쪽지보내기 프로필 아이디로 검색 전체게시물 01-29 3298 1 0
144 기타 dapp 개발 예제로 배우기 사이트 (한글) 댓글42 인기글 CHAINTALK 쪽지보내기 프로필 아이디로 검색 전체게시물 01-28 36858 64 1
143 블록체인 2.0 프론트엔드 개발자를 채용합니다. 인기글 스마트헌터 쪽지보내기 프로필 아이디로 검색 전체게시물 01-23 1803 0 0
142 블록체인 2.0 글로벌 블록 체인 인덱스를 올바르게 여는 방법 인기글첨부파일 scryinfo 쪽지보내기 프로필 아이디로 검색 전체게시물 01-08 1670 0 0
141 기타 블락체인을 활용한 인증, 서명 시스템을 구축하실 개발자분을 찾습니다 댓글1 인기글 아이투섹 쪽지보내기 홈페이지 프로필 아이디로 검색 전체게시물 12-30 2337 1 0
140 기타 늑대 컨트렉트 - 스마트 하지 못한 스마트 계약 댓글2 인기글 철학자 쪽지보내기 프로필 아이디로 검색 전체게시물 12-13 4109 2 0
139 기타 블록체인 도입결정을 돕는 플로우차트 인기글 암호화폐당 쪽지보내기 홈페이지 프로필 아이디로 검색 전체게시물 12-07 2276 1 0
138 기타 이더리움 작동원리의 이해(1) 인기글 정주해 쪽지보내기 프로필 아이디로 검색 전체게시물 11-26 4740 1 0
137 로움의 암호화폐 EOS 밋업에 관심과 참여에 감사드립니다. 댓글4 인기글첨부파일 loum 쪽지보내기 프로필 아이디로 검색 전체게시물 09-12 3533 1 0
136 쿤s의 dApp 개발 [쿤s의 dApp 개발][입문 1편] - Metamask 설치 댓글3 인기글 쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물 08-29 6972 1 0
135 기타 Bounty structure 인기글 쿨맨 쪽지보내기 프로필 아이디로 검색 전체게시물 08-16 1791 0 0
134 쿤s의 dApp 개발 [쿤s의 dApp 개발] New Prologue - 솔리디티 & 스마트 컨트랙트 댓글5 인기글 쿤s 쪽지보내기 프로필 아이디로 검색 전체게시물 08-16 24374 6 0
133 로움의 암호화폐 [본인 논문공개] 튜링완전 암호화폐에서 새로운 네트워크 보안 방법 (이더리움의 가스 시… 댓글1 인기글 loum 쪽지보내기 프로필 아이디로 검색 전체게시물 08-14 3252 3 0
132 블록체인 2.0 [Announce] MUSICOIN 지갑을 MyEtherwallet 에 추가하였습니다. 댓글1 인기글 안씨아저씨 쪽지보내기 프로필 아이디로 검색 전체게시물 08-04 3995 3 0
131 기타 5분만에 트러플로 ICO하기 댓글3 인기글 철학자 쪽지보내기 프로필 아이디로 검색 전체게시물 08-04 7331 1 0
130 기타 패러티 멀티시그 지갑 공격 분석자료 인기글 철학자 쪽지보내기 프로필 아이디로 검색 전체게시물 08-04 2712 1 0
129 로움의 암호화폐 이더리움의 EEA에 회사들이 몰리는 이유 인기글 loum 쪽지보내기 프로필 아이디로 검색 전체게시물 07-22 4119 3 0
128 기타 AWS 에 2노드 프라이빗 이더리움 네트웤 구성해보기 인기글 atomrigs 쪽지보내기 프로필 아이디로 검색 전체게시물 07-22 4104 2 0
127 기타 web3.js 1.0 preview 릴리즈 인기글 atomrigs 쪽지보내기 프로필 아이디로 검색 전체게시물 07-22 3193 0 0
게시물 검색