develop custom_top_html:no
default debug random = 1 / type = READ / detected = READ

이더리움에서 제공하는 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>

 

48b07669f3bb6906e3d1198b6f8ba002.png

1,995

ethminer님의 서명

주업은 오픈소스 프로그래머

 

ESN 디스코드 - https://discord.gg/hqHm69E

ESN 텔레그램 - https://t.me/ethersocialofficial

 

ESN 주소: 0x0c74e46b115e19726997dd559d2b6ff1bfb79af6

ETH 주소: 0x89307cb2fa6b9c571ab0d7408ab191a2fbefae0a

Attachment
첨부 '1'
댓글 1
  • 저도 처음에 web3js 버전이 0.x.x와 1.x.x의 문법 차이를 구분못해서 엄청 헷갈렸지요 ㅋㅋㅋㅋ
    좋은 설명 감사합니다~ ^^

default debug random = 0 / type = READ / detected = READ

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
220 개발 채굴 관리프로그램 MINE ASSIST 베타버전 공개 안녕하세요. 저는 S전자에서 개발자로 일하다가 지금은 작은 스타트업을 하고 있는 파이리입니다.   얼마 전에 채굴기 관리 프로그램을 개발하고 있다고 글을 올린적이 있었는데, 베타 테스트에 ... 180 file 39 14954
파이리
2017.06.17
219 개발 블록체인 소스에 관하여 질문드립니다 안녕하세요 늘 질문만 남기는것 같아 죄송합니다 블록체인 자체를 이해하고 싶은데 자료 찾기가 수월하지않아 땡글분들의 도움을 받고자 글을 남깁니다ㅜ 비트코인은 오픈소스이며 블록체인 네트... 2 0 2149
철수찰스
2017.06.17
218 개발 이더리움의 토큰안에 토큰이 생성될 수 있나요? 제가 잘 몰라서요.   A토큰을 만들고 그 A토큰 기반의 또 다른 B토큰의 생성이 가능한가 해서요. 이게 가능하다면, 토큰안의 토큰이 무한대로 생성될 수 있지 않을까... 하는 망상을 해봤는데,..... 1 0 1031
꿀맨
2017.06.16
217 개발 크억!!! 실수로 핸드폰의 바이트볼을 지웠습니다.    실수로  핸드폰의 바이트볼 앱을 지웠습니다.    그안에 20기가 바이트볼의 수량이 있습니다. 어떻게 해야 하나요?    제발 도와주세요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 4 0 2335
대군림
2017.06.15
216 개발 위탁 채굴장용 관리프로그램 개발중입니다.   이제 거의 80%정도 개발이 완료됐습니다.   보시는 화면은 코인 설정화면인데 코인하고 연결된 관리프로그램 셋팅해놓으면   각 채굴기에서 어떤 코인 채굴할지만 설정하면 되게 만들어놨습니... 43 file 6 4816
AMDMANIA
2017.06.14
215 개발 @쌍둥아빠 운영자님, 판매자에게 포인트를 소모하게 하는 시스템.. 어떤가요? 안녕하세요.   모 하드웨어 취급하는 커뮤니티는 활동(글, 댓글)할때 포인트를 적립하고, 판매글을 올릴때 포인트를 차감하는 방식을 사용합니다. 더 많은 판매글을 올리고 싶은 사람은, 포인트... 5 1 972
캐왕항우
2017.06.14
214 개발 운영자님?. 닉네임 변경은 불가능한가요? 땡글운영자님 안녕하세요. 사이버광부 입니다. 사실은, GPU가 없어서 광업은 전혀 못하고 있습니다. 그런 저런 쓸데없는 이유로 닉네임을 바꾸고 싶다는 생각이 문득 들었습니다.   닉네임 변경 ... 3 0 692
사이버광부
2017.06.13
213 개발 리플 시스템에 관하여 질문 드립니다 안녕하세요 리플에 대하여 알아보다가 도저히 알기가 힘들어서 결국에 땡글에 글을 남깁니다. 처음에 리플이 블록체인 기반이 아닌 중앙 집권 방식을 갖춘 금융 거래를 중심으로 움직인다고 알고... 3 1 1459
철수찰스
2017.06.13
212 개발 Claymore's 마이너 모니터링 툴 개발중입니다 마이너 모니터링 툴 개발중입니다.   사실 다른방법으로 수백대 까지 관리하는 툴 개발중이였는데 리소스가 너무 많이 들어가서 패스하고 클래이모어 마이너 모니터링 툴 개발로 선회했습니다.  ... 11 file 2 2849
m8928
2017.06.13
211 개발 빗썸 api 질문드립니다.   안녕하세요.   가상화폐 입문 2주차 신입입니다. 처음 알게된 싸이트가 빗썸이여서 빗썸에서 거래를 하고있는데,  거래 상황을 보기가 너무 불편하더라구요 ㅡ.ㅡ; 그래서 API를 이용해서 거래... 1 file 0 3788
찌아
2017.06.12
210 개발 리플 코인의 개념... 그리고 활용 분야 이것도 저의 개인적인 추론입니다.   쌍둥아빠님의 글을 읽고 쓰게 됬습니다.  ㅎㅎㅎ   리플이 금융권의 송금 시스템을 타겟으로 만들어진것은 다들 아시리라 생각합니다...   그래서,   우리들... 0 2504
연마공
2017.06.12
209 개발 【 비트코인 세계시세 비교차트 】 비트코인 세계시세 비교차트 입니다.   [ 사이트 주소 ] AresTrader.com   [ 사이트 설명 ] 개인 용도로 제작한 프로그램의 데이터를 공유하기 위한 사이트입니다. 웹으로 포팅하기 위해서 시간... 1 file 1 2752
AresTrader
2017.06.12
208 개발 [테스트]거래소 시세 모니터링 웹 거래소 시세 모니터링용 웹 페이지를 만들어보았습니다.   웹은 처음하는거라 어렵네요...   거래소 데이터 폴링 주기는 약 5초 입니다.   사이트 주소는    http://www.goingcoin.com/   시세는... 47 13 4975
분홍몸매
2017.06.09
207 개발 기술 개발 Bitlattice 작년 이맘때네요. Ethereum mist 지갑과 Geth 가 tx 를 생성하기 위해 사용자 암호를 user privilege level 에서 plain text 로 복호화 시켜 처리한다는 기초적이며 심각한 보안 문제를 나 자신... 22 9 2422
stardust
2017.06.08
206 개발 채굴기 관리 프로그램을 만들고 있습니다.   (혹시 광고 글이라고 생각되신다면 연락 주시면 장터로 옮기겠습니다)  처음엔 제 채굴기 관리가 필요해서 만들어볼까 했는데, 조금 생각해보니 이것도 좋은 시장이 될 수 있을 것 같아서 제... 45 file 21 8419
파이리
2017.06.06
205 개발 질문드립니다 nxt코인,아더 지갑을 만들려고 합니다 안녕하세요   질문드립니다   nxt지갑을 만들려고 합니다 원래 아더지갑을 만들려고했지만 아직 서비스되지않아서 아더를 옮길수있는 nxt지갑부터 찾아보았습니다.    홈페이지에 가보았는데 nxt... 0 2399
이더로
2017.06.06
204 개발 블록체인을 이용한 주거나 차량 공유 시스템을 개발 프로젝트 블록체인을 이용한 주거나 차량 공유 시스템을 개발해 보려고 합니다. 생각건대 기존의 우버나, 에어비앤비는 공유경제라는 거창한 타이틀을 걸고 운영하고 있지만 사실 그것이 진정한 형태의 공... 8 0 2127
미르삼촌
2017.06.05
203 개발 비트코인 거래시스템? 이 궁금합니다 ㅎ      코인 자체의 거래소 형태가 아니라... 뉴스 검색하다가 보게 됐는데 파리바게트 아드님께서 비트코인 거래 프로그램 개발을 하셔서   빵 판매를 비트코인으로 받으셨다고.. ㅎㅎ 좀 되긴 했... 3 0 2002
lenity
2017.06.04
202 개발 비트코인이나 이더리움같은 코인을 만들려면 어느정도의 비용이 들까요? 개발무식자인데요   비트코인이나 이더리움 오픈소스로 다른기능추가없이 이름과 총발행수량정도만 조정해서   새로운 코인을 만들려면 어느정도의 비용이 소모될까요??     어디선가 50만원만 ... 5 0 3426
될까
2017.06.02
201 개발 빗썸 과 동일한 기능을 가진 거래소 제작 문의 빗썸 과 동일한 기능을 가진 https://www.bithumb.com/   사이트 제작의뢰 합니다   의뢰자인대 거래에대한 시세나 비전에 대해서만 알고 있지 제작에 대한 전반적인 지식은 없는 상태 입니다 다... 10 0 11997
채굴왕자
2017.06.02
Board Pagination Prev 1 ... 77 78 79 80 81 82 83 84 85 86 ... 92 Next
/ 92
default debug random = 0 / type = READ / detected = READ