소프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(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)을 개발할 수 있도록 지원하는 라이브러리다.
설치는 깃헙(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와 메타마스크를 사용한다.
메타마스크에는 브라우저 보안상 ‘file://’ 프로토콜에서는 접근할 수 없으므로 로컬에 서버를 띄워야 한다. HTML 파일을 서버에서 띄울 수 있다는 가정하에 샘플 프로젝트를 진행한다.
최대욱 필자의 web3.js로 시작하는 블록체인 프론트엔드에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.