develop custom_top_html:no
default debug random = 0 / 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
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
1721 개발 통합 전자 웹지갑 제작해보았습니다. 통합 전자 웹지갑 제작해보았습니다. https://www.samplewallet.org/   이더리움, ERC-20 토큰은 자체 풀노드 노드서버 구축해서 RCP 통신함. 거래소와 같이 DB 쓰는 버전와 안쓰는 버전 2개로 ... 5 4 4159
김대박
2020.02.29
1720 개발 취미로 비트멕스 트레이딩봇 개발중입니다.    제 경우는 개발경력보다 주식경력이 더 길고, 프로그래밍 배울때부터 자동매매봇을 만들고 싶은 마음이 항상 있었는데 작년10월쯤부터 본격적으로 개발에 착수해서 퇴근후에 업데이트와 테스... 4 file 0 5047
제타마인드
2020.02.27
1719 질문 빗썸 API 질문드립니다 안녕하세요 현재 업비트 전용 펌핑알람 &quot;Bitpump&quot; 개발중인 1인 개발자입니다. https://play.google.com/store/apps/details?id=bitpump.isi.com.bitpump 다운로드수는 1천회 넘었고 사용자분들... 1 3226
printf
2020.02.25
1718 개발 CAAT Bot Standard (자동매매) 테스터를 모집합니다 (개인/그룹) 안녕하십니까 BigK 입니다.   여러 시행착오와 검증을 거쳐 드디어 유저 테스트 단계까지 오게 되었습니다. 그동안 땡글 유저들을 통해 정보 공유를 받으면서 많은 도움을 받았습니다. 처음 모집... 15 file 1 2232
CAATBot
2020.02.21
1717 질문 react-native run-android 실행 오류를 해결하고자 합니다. info Running jetifier to migrate libraries to AndroidX. You can disable it using &quot;--no-jetifier&quot; flag. Jetifier found 864 file(s) to forward-jetify. Using 12 workers... info Startin... 5 0 1951
uurjjo
2020.02.14
1716 개발 자동 트레이딩을 웹 서비스로 만들때 어떻게 해야 좋을까요      안녕하세요.  선배님들  문의 좀 드릴게 있는데요.      1. 자동 트레이딩을 웹 서비스 형태로 만들어 보려하는데요.    python/django 로 할려고요.    샘플 소스코드(python/django)가 있... 1 0 1256
부자아들
2020.02.12
1715 질문 리플 관련 질문드려요     리플 노드를 구축해서 운영해보려고 하는데  키페어 생성까진 원활하게했는데 account_id가 따로 또 있어야하더군요  이거는 어디서 얻는건지 혹시 알수있을까요? api 문서 조회해도 안보이... 0 1285
페어
2020.01.10
1714 개발 타키온 프로젝트 개발 소스가 일부 공개되었네요.       https://github.com/tachyon-protocol 빗썸에 상장된 IPX 토큰으로 유명한  블록체인 인터넷 프로토콜 '타키온'의 깃헙입니다.   타키온은 주로 프로젝트 개발에 Go 언어를 사용하는데요, ... file 0 1444
아수라발발타KYC
2019.12.30
1713 개발 추세선 알고리즘과 개발코드 질문   추세선 매매법은 익히 잘 알려져 있습니다. 현재 저는 그러한 매매법을 시스템트레이딩으로 구현해보고자 하는데요. 코드로도 분명 구현이 가능할 것으로 보입니다. 예를 들면 두 점을 잇는 직... 5 1 1708
CAATBot
2019.12.29
1712 질문 업비트 Open API 암호화폐 출금주소 에러   혹시 리플이나 이오스 업비트 OpenAPI 에 출금주소 등록 정상적으로 하신 분 있나요?   잘 사용중인 주소인데 등록하려고 하면 올바른 주소가 아닙니다라는 에러가 뜨네요...                 ... 0 1335
lkjdf
2019.12.28
1711 개발 ETH 풀노드 구축후 datadir 사이즈는 사용하면 할 수 록 커집니다. 적어도 1T ssd 쓰셔야 해요.   ETH 풀노드 구축후 datadir 사이즈는 사용하면 할 수 록 커집니다   풀노드 구축후 이제는 1T ssd 에 풀노드를 올리셔야 합니다.   최근 작업했던 다수의 프로젝트에서 ETH 풀노드 datadir 폴... 1 1 1310
김대박
2019.12.26
1710 질문 고팍스 API 암호화폐 출금?   고팍스 API를 보고 있는데 출금에 대한 예제가 없네요.   혹시 코인원처럼 고팍스도 API로는 암호화폐 출금이 불가능한가요?                 0 1074
skeee01
2019.11.30
1709 개발 V SYSTEMS 테스트넷 접속 방법입니다.   VSYS의 슈퍼노드 후보로 등록한 홍콩의 마이닝풀 Forbole에서는 미디엄 블로그를 통해 VSYS의 테스트넷 액세스 방법을 공유하였습니다.    출처: https://medium.com/forbole/joining-v-system... file 2 896
아수라발발타KYC
2019.11.27
1708 개발 홍보글은 아니고 private blockchain 개발에 참조하시라고 올립니다      private blockchain은 폐쇄돼있어 회사 관계자 외에는 장부를 아무도 못봅니다 은행들이 이 private blockchain 방식을 취하고 있고 국제 국내 은행들은 이런 방식을 취할 수밖에 없습니다 ... 4 2 424
핵심코어보기
2019.11.26
1707 질문 EOS 에서 RAM,CPU,NET 에 EOS 할당후 서비스 접을 때 EOS 를 다시 빼올 수 있나요?     최근 EOS 토큰을 제작하고 잘 사용하고 있습니다.   최근 EOS 토큰 발송이 실패될 때가 있습니다. 그래서 RAM,CPU,NET 이 부족해서 100만원  EOS 는 더 투입하였습니다. 그런데 또 간혹 발생... 1 2 767
김대박
2019.11.26
1706 개발 [질문]지갑 언락 프로세스 진행 시 결과 값이 null 으로 나오는 경우 어떻게 처리 하면 되는지 질문드립니다. 안녕하세요.  web3j 으로 지갑을 현재 만들고 있습니다.  문의 점이 두가지 정도가 있는데요..  1.질문 내용 1) web3j.personalUnlockAccount 함수 결과값이 null 으로만 나옵니다..ㅠㅠ 2) pers... 1 0 583
jun98
2019.11.25
1705 질문 [질문] EOS 트랜잭션 데이타값 가져오기? 이오스 전자웹지갑을 제작하였습니다.   트랜잭션 데이터를 가져오기 위해서 cleos 로 BP 들의 URL 을 활용하였는데 이게 언젠가부터 없어지기 시작하더니 서비스가 종료가 되었네요. 여러분들은... 6 0 762
김대박
2019.11.16
1704 질문 블록체인 관련 지식을 많이 가지고 있으신 프로그램 개발자 혹은 앱개발자 분들의 고견듣고 싶습니다. 안녕하세요 ..  지금 파주에서 코인이 오르기만을 기다리고 있는 채굴러입니다.  코인을 채굴을 하고 있지만 블록체인에 대한 이해도는 참 답답할만큼 없습니다.      제가 프로그램에 지식이 전... 4 1 925
휘리릭릭릭릭
2019.11.10
1703 개발 Geth v1.9.7 (Quad Kicker) 릴리스 Geth 1.9.7이 나왔다는 소식입니다   블록 9,069,000 // 12월 4일경이 될거라는군요~   이하 현재 이더리움 1.x개발 수장이 남긴 트윗을 같이 참고하시기 바랍니다. Geth v1.9.7 (Quad Kicker) o... 1 783
ethminer
2019.11.08
1702 질문 이더리움 2.0이 되면 현재 보유중인 이더와 토큰에 영향이 있나요? 이더리움 2.0이 되면 현재 보유중인 이더와 지갑주소, 그리고 보유중인 토큰에 영향이 있나요?   예를들자면, 이더리움과 ERC 기반의 토큰에 아래에 해당하는 영향이 있는지 문의 드립니다     1... 2 1 1380
he123
2019.11.07
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 93 Next
/ 93
default debug random = 0 / type = READ / detected = READ