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
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
1840 질문 흥미가 생겨서 코인을 만들던중 궁금한게 있어서 남깁니다.   https://etherscan.io/token/0x59f2e9311cc43f731e18bd2b9b573aca42f670c1#readContract     보면 Readcontract 다른 코인들은 다 기입이 되어있는걸 알고있습니다   그래서 저도 보이게 하려... 3 1 1195
빵빵한포도알
2019.02.02
1839 개발 흐으.. 새벽까지 삽질해서 겨우 메뉴얼 썼네요..     왕년에 노가다하던 솜씨(?)를 살짝 살려서 메뉴얼을 만들어 봤습니다. 내일정도에... Telegram 에 대한 최종 테스트가 끝나면 또 한번의 베타테스트를 가지 않을까...... 싶습니다 :D   pdf ... 2 file 1 1182
plextor
2018.05.29
1838 개발 흐으.. 대략 영문메뉴얼까지는 만들었네욤.   저희가 제작하는 모니터링 시스템의 영문 메뉴얼 작업을 겨우 끝났습니다. 서비스 자체는 애초에 영문버전을 같이 작업해둔 터라 큰 걱정없이 지나갔습니다만.. 그래도 이왕이면 메뉴얼까지 ... file 1 782
plextor
2018.06.04
1837 개발 흐어어.. 오늘 하루 매우 덥네요...-.-;   지난주 내내 새롭게 들어온 요청에 대해 작업을 어느정도 끝내고.. 저는 메뉴얼 작업을 다시 해봏까... 해서 모처럼 삽좀 푸고 있습니다.   기존에 메널은 ms word 로 만들었는데.. 목차도 없... file 0 586
plextor
2018.05.28
1836 개발 후우.. 1차 개발후에 소스를 정리하는것도 일이네요. 아직 눈에 띄지는 않았지만, 소스를 정리하다보니 나오는 논리적 버그도 있고.. 소스코드 주석도 한번 정리해야 하고...   이후 개발을 좀 차근치근히 진행해보려 하는데, 그럴려면 기존에 진행... 2 1 717
plextor
2018.06.08
1835 질문 후오비(huobi) api 문의 후오비 api 문의 드립니다.   후오비 코리아에서 key를 받았는데요.   url 을 https://api.huobi.pro 로 연결하면 글로벌 후오비에 연결이 됩니다.   후오비 코리아 접속을 위해서는 어떻게 해야... 1 0 1031
희망지기2
2018.10.08
1834 질문 후오비 API 원화마켓     안녕하세요,   고수분들의 조언이 필요합니다...   후오비 API 로 원화마켓 가격을 가져오고 싶은데 symbol에 KRW를 넣으면 respose가 없네요.   예) usdt는 잘 작동하는 https://api.huobi.... 2 0 24556
lkjdf
2019.07.11
1833 개발 후...고지가 머지 않았습니다..이게 마지막이군요...도움 좀 부탁드립니다...(ENT코인) https://www.youtube.com/watch?v=yaeZ-qKgK7I&amp;feature=youtu.be         위 영상의 2:4초부분에서 막혔습니다..거의다 고지가 다가왔는데 말입니다..     rpcuser= rpcpassword= daemon=1 s... 10 file 0 2018
흑곰짜응
2017.12.05
1832 질문 회사가 망하고있습니다..       개인정보 보호로 내용을 삭제합니다.           ------------------------------------- 꼬리말 * 게시글 내용 삭제시 레벨 강등 * 질문은 각 주제별 게시판에 적어주세요.   비트코인 암... 9 0 3812
타겟필수
2019.03.20
1831 개발 환율 API 입니다. 예전에 개발한 환율 API입니다. 땡글에 올린다는걸 이제야 하게됐습니다. JSON 형식으로 반환합니다.   통화쌍을 선택해서 받아올 수 있습니다. https://exchange.jaeheon.kr:23490/query/USDKRW... 3 3 5121
신재헌
2018.10.29
1830 개발 환율 api USD-KRW 환율 api 소개좀 부탁드립니다.   yahoo api 환율 정보는 서비스 종료되었는지 결과가 null만 뜨네요.   https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finan... 1 0 5874
debugger
2017.11.27
1829 개발 화폐관련, 코인, 거래소, 전자지캅 및 어플리케이션 개발해 드립니다.   어플랩의 김재현이사 입니다.   가상화폐 / 거래소 / 전자지갑 개발해 드립니다. 각종 어플리케이션/웹사이트 및 API를 통한 서비스도 개발해 드립니다.   모두 중급 이상의 개발자로 세팅하여... 1 1 1020
홍금보
2018.10.09
1828 개발 화웨이, 블록체인 서비스 성능 테스트 툴 공개   http://news.naver.com/main/read.nhn?mode=LSD&amp;mid=shm&amp;sid1=105&amp;oid=092&amp;aid=0002133284     화웨이에서 블록체인의 성능을 테스트 할 수 있는 툴을 공개했다고 하네요.. 블... 0 1288
바보쿠우
2018.03.16
1827 개발 홍보글은 아니고 private blockchain 개발에 참조하시라고 올립니다      private blockchain은 폐쇄돼있어 회사 관계자 외에는 장부를 아무도 못봅니다 은행들이 이 private blockchain 방식을 취하고 있고 국제 국내 은행들은 이런 방식을 취할 수밖에 없습니다 ... 4 2 467
핵심코어보기
2019.11.26
1826 질문 혼자 거래소 만들어 볼까 합니다. 안녕하세요.   서비스의 목적은 아니고, 혼자서 이런저런 테스트 겸 스터디에 활용하고자, 거래소를 만들어 볼까합니다.   비트코인, 이더리움, 라이트코인, 대시 정도만 거래가능한 간단한 사이... 6 0 1238
제프츶이
2018.09.06
1825 개발 혹시 프로그램 제작관련해서 해시불러오는부분에서 질문이있습니다.   프로그램 만드신분들이나 웹만드신 분들보면 해시속도를 가져오는데 api로 가져온건가요 파싱으로 어디서 긁어온건가요?? 어떤건지 알려주시면 감사하겠습니다.                     ---------... 5 0 1767
더블코어
2018.01.16
1824 개발 혹시 코인원이나 빗썸 API로 Liquidity 나 마켓메이킹 봇 개발 가능하신분 있나요?           혹시 코인원이나 빗썸 API로 Liquidity 나 마켓메이킹 봇 개발 가능하신분 있나요?   도움 좀 받고 싶습니다             1 0 18774
토끼눈깔
2020.08.14
1823 개발 혹시 지갑주소 확인하는방법 아시는분 있나요??   안녕하세요. 가상화폐 입출금 서비스를 만들어보고있는대, 사용자가 입금할 가상화폐의 주소를 확인 할 수 있는 방법이 있을까요??   빗썸같은경우에 출금기능에 비트코인을 제외한 알트코인은... 0 1357
Cryptoooo
2017.11.08
1822 개발 혹시 오라클 좀 아시는분? Data Block Corrupt 를 RMAN 없이 해결할수 있는 방법? 안녕하세요. 소연아빠 입니다. ^^ 혹시 개발자 분들중에 오라클 핸들하시는 분이 계신다면,  혹시 오라클 좀 아시는분? Data Block Corrupt 를 RMAN 없이 해결할수 있는 방법? 을 알려주실수 있... 0 2291
소연아빠
2014.05.26
1821 개발 혹시 빗썸이나 업비트 등 국내거래소 자동거래봇 만드시는분 계신가요?             혹시 빗썸이나 업비트 등 국내거래소 자동거래봇 만드시는분 계신가요?   워치봇을 사용해봤는데   이게 손실만 계속 쌓이는데 혹시 봇 만드시는분 계시면    한번 구매해서 사용해... 10 1 3062
토끼눈깔
2017.12.16
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 92 Next
/ 92
default debug random = 0 / type = READ / detected = READ