Web3.js

Web3.js 로고

Web3.js 로고와 글자

Web3.js는 모든 자료와 정보가 분산화, 분권화된 차세대 네트워크 구조로서, 서버가 없는 혁신적인 인터넷 분산형 웹이다. 자바스크립트(JavaScript) 기반으로 디앱(DApp)이나 서비스를 구현할 때 매우 유용하며, 내부적으로 HTTP 또는 IPC 를 통해 JSON-RPC API를 호출하도록 되어있다. 현재는 EthereumJ 도 Web3.js를 지원하는 작업을 하고 있다.평범한 웹, 모바일 어플리케이션을 만드는것과 같이, DApp(분산앱, 댑 또는 디앱으로 읽음)을 만드는 것은 컴퓨팅 자원, 파일 스토리지, 외부 데이터, 통화, 결제 등 어플리케이션을 구성하기 위한 몇가지 요소를 필요로 합니다. 지난 4년동안 커뮤니티는 개발 생태계를 진전시키는 데 큰 성과를 이루었습니다. 2014년까지만 해도 댑을 개발하는 데 어려움들이 있었지만, 현재는 최소한의 컴퓨팅 자원과 파일 스토리지만으로도 댑을 개발할 수 있다.

DApp Web 구조(DApp Web)

개요

1990년대 초, 월드와이드웹(WWW)이 정보화 시대를 앞당겨왔다. 10년 후, 인터넷은 훨씬 더 성숙하고 프로그래밍 가능한 환경으로 변모했습니다. 우리는 현재 Web2 라고 불리우는 인터넷 환경과 함께하고 있습니다. Web2는 SNS, e-커머스 플랫폼이라는 혁신적인 서비스를 생활 속에 자리잡게 했다. 이를 통해 사람들 간의 커뮤니케이션 및 정보의 제공자와 수혜자가 소통하는 방식이 완전히 바뀌었으며, 재화와 서비스들을 조금 더 생활 속에서 가깝게 접근 할 수 있게 되었고, 전세계적으로 P2P 소통이 가능해졌다. 하지만 현존하는 인터넷의 대부분 의사소통은 두 대상 ‘A’와 ‘B’ 사이에 서로 알지 못하고 신뢰하기도 어려운 중개인(middleman 또는 intermediary)이 존재합니다. 몇몇 플랫폼들이 놀라운 P2P 경제를 구축하여 유익한 컨텐츠를 제공하고 있기는 하지만, 고객들의 데이터를 수집하고 P2P 거래에 한계가 발생하는 등의 문제점을 내포하고 있다. 이러한 상황에서, 블록체인은 다음 세대의 인터넷으로 인류를 이끌어 줄 원동력으로 작용할 것이다. 분산 웹(또는 Web3)과 함께하는 블록체인은 인류에게 진정한 의미의 중개인 없는 P2P 거래를 가능하게 할 것이며, 비트코인은 이것이 가능함을 수년 동안 보여주어왔다. 비트코인은 은행이나 은행 담당자 없이도 사용할 수 있는 P2P 화폐로 사용되며, 비트코인을 실현한 블록체인 기술은 산업 전반에 응용되고 있다. 우버 없는 차량 공유, 에어비앤비(AirBNB) 없는 주택 공유, 페이스북이나 트위터 없는 SNS 등 중개인을 배제한 진정한 의미의 P2P 경제가 우리 생활로 다가오고 있다.

기능

web3.js 는 JavaScript 기반으로 Dapp 이나 서비스를 구현할 때 매우 유용하며, 현재는 EthereumJ 도 web3.js 를 지원하는 작업을 하고있다. 실질적으로 JSON RPC API 와 함께 Ethereum 의 표준 API 로 보면 되겠다. web3.js 는 내부적으로 HTTP 나 IPC 를 통해 JSON RPC API 를 호출하도록 되어있다.이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 노드에 질의를 보내 1.스마트 컨트렉트의 주소 2.실행할 함수 3.함수에 전달할 변수들 을 전달해야한다. 이더리움 노드들은 JSON-RPC로만 소통할 수 있고, 이는 개발자에게는 불편한 일이기 때문에 web3.js는 질의를 알지 못하는 개발자들도 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있도록 해 준다. web3.js 는 github/ethereum/web3.js 의 dist 내에 있는 web3.js 를 받아도 되지만, Browser 에서 사용하려면 bower 를 사용하거나 Node.JS 를 사용한다면 npm 을 사용하면 된다.

모듈

web3.js 마이크로소프즈웨어 393호 발췌 (web3.js 구조도)

• web3-eth: 이더리움 블록체인 및 스마트 컨트렉트와 상호 작용하는 데 사용되는 모듈 클래스.
• web3-shh: 프로토콜에 p2p 및 브로드캐스트을 전달하는 데 사용하는 모듈 클래스.
• web3-bzz: 분산된 파일 저장을 위한 모듈 클래스.
• web3-utils: DApp 개발자를 위한 유용한 도무미 기능이 포함된 모듈 클래스.

사용 방법

• NPM | NPM 패키지 사용하여 web3.js 추가 (npm install web3)
• Browser| Browser 사용하여 web3.js 추가 (bower install web3)
• 깃허브 사용하여 설치| 깃허브 저장소(github repository)에서 소스 코드를 다운로드하여 프로젝트에 추가하여 사용

전망

블록체인에서 프론트엔드 개발은 중요하다. 결국 서비스와 사용자가 만나는 접점은 클라이언트에서 이뤄지기 때문이다. 각 블록체인 플랫폼은 자바스크립트 API를 내놓고 있다. 현재 가장 레퍼런스가 많은 이더리움 web3.js로 블록체인 프론트엔드 개발을 시작해보는 것은 나쁘지 않은 선택이다. web3.js 라이브러리를 크롬 확장 프로그램(Chrome Extension) 메타마스크(Metamask)와 함께 살펴본다. 간단하게 잔액 조회 및 이더리움 전송 샘플 프로그램을 자바스크립트(Javascript)로 제작한다. 그리고 web3.js 깃헙(Github) 저장소에 있는 예제로 컨트랙트(Contract)에 어떻게 접근하는지 알아본다. web3.js는 JSON RPC(Remote Procedure Call, 원격 프로시저 호출) 스펙을 구현한 이더리움 자바스크립트 API다. 쉽게 말하면 JSON RPC 스펙에 대한 처리를 web3.js에 맡기고, JSON RPC가 아닌 자바스크립트로 Dapp(Decentralized application)을 개발할 수 있도록 지원하는 라이브러리다.

참고자료

• 룸 네트워크 공식 홈페이지 - https://cryptozombies.io/ko/lesson/6/chapter/1
• status Korea, 〈네이버〉, 《네이버 블로그》 2018-08-13
• 오세용 기자, 〈web3.js "[마소 393호 web3.js로 시작하는 블록체인 프론트엔드"]〉, 《IT Chosun》, 2018-08-03

같이 보기

• 자바스크립트
• 디앱

이 Web3.js 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반