프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 정적 타입, 리액트, 뷰, 앵귤러, 일렉트론, ESNext 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]

블록체인에서 프론트엔드 개발은 중요하다. 결국 서비스와 사용자가 만나는 접점은 클라이언트에서 이뤄지기 때문이다. 각 블록체인 플랫폼은 자바스크립트 API를 내놓고 있다. 현재 가장 레퍼런스가 많은 이더리움 web3.js로 블록체인 프론트엔드 개발을 시작해보는 것은 나쁘지 않은 선택이다.

web3.js 라이브러리를 크롬 확장 프로그램(Chrome Extension) 메타마스크(Metamask)와 함께 살펴본다. 간단하게 잔액 조회 및 이더리움 전송 샘플 프로그램을 자바스크립트(Javascript)로 제작한다. 그리고 web3.js 깃헙(Github) 저장소에 있는 예제로 컨트랙트(Contract)에 어떻게 접근하는지 알아본다.

web3.js는 JSON RPC(Remote Procedure Call, 원격 프로시저 호출) 스펙을 구현한 이더리움 자바스크립트 API다. 쉽게 말하면 JSON RPC 스펙에 대한 처리를 web3.js에 맡기고, JSON RPC가 아닌 자바스크립트로 Dapp(Decentralized application)을 개발할 수 있도록 지원하는 라이브러리다.

web3.js 구조도. / 마이크로소프트웨어 393호 발췌
web3.js 구조도. / 마이크로소프트웨어 393호 발췌
‘web3’는 자바스크립트를 지원하는 web3.js 외 다양한 언어를 지원한다.구체적으로 ▲Python: web3.py
 ▲Haskell: hs-web3
 ▲Java: web3j
 ▲Scala: web3j-scala
 ▲Purescript: purescript-web3
 ▲PHP: web3.php
 ▲PHP: ethereum-php 등이 있다.

설치는 깃헙(github.com/ethereum/web3.js)의 리드미(README.md)를 통해 확인할 수 있다. NPM이나 ‘Bower’, 미티어(Meteor.js) 등 패키지(package) 형태나 CDN을 지원한다.

DappRadar(dappradar.com)에서 이더리움 Dapp을 확인할 수 있다. 아직 게임과 거래소 위주 Dapp이 주를 이룬다. 유명한 Dapp으로는 고양이를 수집하는 크립토키티 게임과 ‘IDEX’, ‘ForkDelta’ 등 탈중앙화 거래소가 있다. 게임이나 거래 플랫폼 외 다양한 아이디어를 구체화한 Dapp이 앞으로 출시될 것으로 예상한다. 이런 Dapp은 대부분 클라이언트를 브라우저로 사용해 web3.js와 메타마스크를 사용한다.

다양한 이더리움 Dapp을 확인할 수 있는 DappRadar. / 마이크로소프트웨어 393호 발췌
다양한 이더리움 Dapp을 확인할 수 있는 DappRadar. / 마이크로소프트웨어 393호 발췌
CDN을 사용해 web3.js를 불러와 이더리움 잔액 확인 및 입출금 프로그램 그리고 이더리움 블록 정보를 보는 프로그램을 예제로 만들어볼 것이다. ‘Ganache-CLI’ 와 같은 툴을 사용해 web3.js에 주입할 프로바이더(Provider)를 구성할 수도 있다. 하지만 블록체인에 대한 사전 지식 최소화를 위해 크롬 웹스토어에서 다운 받을 수 있는 메타마스크를 활용해 개발한다.

메타마스크에는 브라우저 보안상 ‘file://’ 프로토콜에서는 접근할 수 없으므로 로컬에 서버를 띄워야 한다. HTML 파일을 서버에서 띄울 수 있다는 가정하에 샘플 프로젝트를 진행한다.

최대욱 필자의 web3.js로 시작하는 블록체인 프론트엔드에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.