이더리움에서 제공하는 web3js를 이용해서 Dapp을 개발하려면 약간의 당황스러움을 경험하게 됩니다.
1) 상당수의 문서가 낡았고,
2) 상당수의 문서는 구버전의 web3에 대해서 설명하고 있고
3) 상당수의 문서는 react / vue등의 최신 웹기술을 함께 사용하고 있어서, 현재 잘 돌아가고 있는 웹에 간단히 적용하기 힘들다는 것
특히나 위 3번의 경우, 많은 분들이 web3를 쉽게 적용할 수 있을 것이라고 생각했다가 당혹스러워 할 수 있습니다.
"내 사이트에 web3를 적용하여 간단한 dapp 기능을 지원하고 싶은데..." 이에 대한 설명이나 문서를 찾기가 매우 힘들다는 것입니다.
이 문서는 다음과 같은 의문을 가진 사용자에 대한 web3 초간단 사용 설명서입니다
"jquery.js처럼 간단히 내 웹페이지에 자바스크립트를 넣어, web3.js 최신을 내 사이트에서 사용할 수 있는 방법은 없을까?"
기본 준비
아래 내용은 사용 환경에 따라 달라지지나, 다양한 문서가 있으므로 검색해서 직접 설치해보시기 바랍니다
1. nodejs 설치
2. npm 설치
webpack, webpack-cli, web3 설치
임의의 작업 디렉토리를 만들고, 작업 디렉토리에 들어가 다음 명령을 실행합니다.
$ npm i webpack webpack-cli web3
test.js 파일 만들기
test.js라는 이름의 간단한 자바스크립트를 다음과 같은 내용이 들어가게끔 만듭니다.
window.Web3 = require('web3');
위의 내용이 들어간 test.js를 저장합니다.
webpack 실행하기
webpack을 실행하여, test.js가 실제로 실행하기 위해 필요한 모든 npm 파일을 묶어서 main.js 파일로 만들어줍니다.
$ node_modules/.bin/webpack --mode development --entry ./test.js --output ./main.js
이렇게 해서 얻어진 main.js 파일은 그 크기가 상당히 크며 (2MB~3MB)
mode를 production으로 설정하면 그 크기가 대폭 감소합니다. ( 아래의 명령을 사용 )
$ node_modules/.bin/webpack --mode production --entry ./test.js --output ./main.min.js
일반 웹페이지에 다음과 같이 삽입할 수 있고, 이를 통해 web3를 사용할 수 있게 됩니다.
...
<script src="main.js"></script>
...
html 예제
다음은 초 간단 web3 예제입니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
jQuery(function(){
// 아래의 경우 rpc 노드를 이더리움이 아닌 이더소셜로 설정한 것입니다.
var web3 = new Web3(new Web3.providers.HttpProvider("https://rpc.ethersocial.net"));
console.log("welcome to web3!!");
// 잔액 가져오기
web3.eth.getBalance("0x0225beDBA7636A4ADB72B1b0A5600F467F76c979", "latest", function(err, result) {
console.log(result);
// 크롬, firefox 콘솔등을 통해 console.log() 출력을 확인할 수 있습니다.
});
});
</script>
</head>
<body>
</body>
</html>
저도 처음에 web3js 버전이 0.x.x와 1.x.x의 문법 차이를 구분못해서 엄청 헷갈렸지요 ㅋㅋㅋㅋ
좋은 설명 감사합니다~ ^^