블록체인을 이용해서 하나의 완성된 서비스를 만들기 위해서는 많은 것들이 필요합니다. 오늘은 그 중에서도 고객과 서비스의 접점이라고 할 수 있는 frontend에서 이더리움 스마트 컨트랙을 호출하는 방법을 살펴보겠습니다.
- Why metamask?
Metamask를 쓰는 이유는 3가지 정도가 있습니다. 첫번째는 보안입니다. transaction에 서명을 하기 위해서는 주소의 주인임을 밝혀야 합니다. 인증 수단에는 어떤 것들이 있을까요? 바로 private key가 있습니다. 이 private key를 이용해서 transaction을 생성한다면 어떤 문제들이 파생될까요? private key 정보를 받아서 서버로 전송해서 인증에 사용한다거나, frontend에서 바로 인증에 사용한다고 해도 보안에 취약할 수밖에 없다는 건 자명한 사실입니다. 더욱이 서비스를 이용하는 사람들은 개발사에게 본인들의 인증 정보를 넘겨주는 것이 찜찜할 수밖에 없겠죠.
두번째는 유저 경험입니다. 처음 접하게 되는 여러분의 서비스와는 다르게 Metamask는 이미 많은 사람들이 이용해본 서비스입니다. 여러분은 새로운 송금 UI와 절차 개발을 가지고 고민할 필요가 없습니다. 그냥 Metamask를 쓰면 됩니다.
마지막으로는 노드 유지가 필요 없다는 점입니다. 노드 유지를 위해서는 지속적인 비용이 발생하고, 싱크가 끊길 경우에 장시간 서비스가 중단될 여지가 있습니다. 며칠씩 서비스가 중단된다면 생각만 해도 아찔한 일이죠. 물론 Metamask에서 사용하는 노드도 일시적으로 장애가 있을 때가 종종 있기 때문에 안전한 서비스 제공을 위해서는 백업 노드를 준비해두는 것도 필요합니다. 하지만 대부분의 노드보다는 튼튼하다는 것도 사실이죠.
- How it works?
Metamask는 크롬 익스텐션입니다. Metamask는 아래에서 볼 수 있는 것처럼 여러분의 브라우저에서 열리는 모든 페이지마다 자바스크립트 코드들을 삽입합니다.
이 코드들을 여러분들의 코드가 로딩되기 전에 미리 로딩해두면, 여러분들은 이 Metamask의 코드들을 자유롭게 가져다 쓸 수 있겠죠.
- How to load
Metamask를 로딩하기 위해서는 아래의 코드면 충분합니다. 고객이 Metamask가 설치되어 있지 않다면, Metamask가 필요하다는 경고는 들어가야겠죠.
if (typeof web3 !== "undefined") {
window.web3 = new Web3(web3.currentProvider);
} else {
console.log("No web3? You should consider trying MetaMask!");
} 하지만 여러분의 코드는 Metamask 코드가 로딩된 후에 동작해야 하기 때문에, JQuery와 함께 쓴다 아래 정도의 코드로 작성해야 합니다.
$(document).ready( function() {
if (typeof web3 !== "undefined") {
window.web3 = new Web3(web3.currentProvider);
} else {
console.log("No web3? You should consider trying MetaMask!");
}
})(window, jQuery);
});- How to use
web3.eth.getAccounts(function(error, accounts) {
if (!error) {
web3.eth.getBalance(accounts[0], function(error, balance) {
if (!error) {
console.log("Your account: " + accounts[0] + " has a balance of: " + balance.toNumber() / 1000000000000000000 + "Ether");
} else {
console.error(error);
}
});
} else {
console.error(error);
}
}); accounts[0]은 현재 Metamask에 로그인 되어 있는 사용자입니다. 우리는 위의 코드를 이용해서 간단하게 현재 로그인 되어 있는 사용자의 잔고 정보를 받아 왔습니다.
다음 포스팅에서는 smart contract의 함수들을 직접 호출해보겠습니다.