Web3.0이 온다! 프런트엔드 친화적인가요?

최근 web3.0에 대한 요구가 정말 점점 더 커지고 있고 점점 더 미쳐가고 있습니다. 프런트엔드에는 어떤 기술이 필요합니까? (학습 영상 공유: 웹 프론트엔드 )
web3.0 的呼声真的是越来越高，也越来越疯狂。对于我们前端来说，我们需要具备什么技术呢？（学习视频分享：web前端）

首先先介绍一下 web3.0

Internet

Web1.0

Web2.0

Web3.0

• Semantic Web - Web3.0의 핵심이며 기계가 데이터를 쉽게 처리할 수 있도록 해줍니다.

• AI - AI는 Web3.0 기술의 인기에 영향을 미치는 주요 핵심 요소 중 하나입니다. 사용자의 요구를 충족하기 위해 대량의 웹 데이터를 통해 기계가 더욱 스마트해질 수 있습니다.

• 3D 그래픽 - Web3.0은 2D보다 더 사실적인 3차원 온라인 세계를 제공하는 3차원 기술 덕분에 기존 인터넷을 능가했습니다.

• 유비쿼티(Ubiquity) - 동시에 존재하거나 어디에나 존재한다는 개념, 모바일 기기의 등장이 증가하면서 많은 사람들이 언제 어디서나 인터넷에 더 쉽게 접속할 수 있게 되었습니다.

• 개방성과 상호 운용성. 이는 애플리케이션 프로그래밍 인터페이스, 데이터 형식, 프로토콜 및 장치와 플랫폼 간의 상호 운용성 측면에서 개방성을 의미합니다.

• 글로벌 데이터 저장소, 프로그램과 네트워크 전반에 걸쳐 정보에 액세스하는 기능.

소개

• Web3: Ethereum 블록체인과 스마트 계약 스마트 계약 간의 연결입니다.
• 이더리움: 사용자가 스마트 계약을 생성하여 네트워크와 상호 작용할 수 있게 해주는 분산형 오픈 소스 블록체인 블록체인입니다. 기본 암호화폐는 이더리움입니다. 이더리움은 시가총액 측면에서 비트코인 ​​다음으로 가치가 높은 암호화폐입니다. 2013년 Vitalik Buterin이 만들었습니다.
• 스마트 계약: 사전 결정된 조건이 충족될 때 실행되는 블록체인에 저장된 컴퓨터 프로그램입니다. 스마트 계약은 Solidity 언어로 작성됩니다.
• 분산형: 데이터 상태가 중앙 엔터티, 플랫폼 또는 개인에 의해 수집되지 않습니다.
• 블록체인: 블록체인 네트워크는 여러 장치 간에 정보가 공유되는 지점 간 연결이므로 해킹이 거의 불가능합니다. 네트워크에 저장된 정보를 변경하기 어렵거나 불가능하게 하는 방식으로 정보를 기록하는 시스템입니다.
• Solidity: 스마트 계약 작성을 위한 객체 지향 프로그래밍 언어입니다. 다양한 블록체인 플랫폼, 특히 이더리움에서 스마트 계약을 구현하는 데 사용됩니다. Solidity의 구문은 javascript와 유사합니다. Solidity를 이해하려면 javascript와 같은 프로그래밍 언어에 대한 배경 지식이 있는 것이 가장 좋습니다. Solidity로 직접 뛰어드는 것은 나쁜 생각입니다.
• Dapp: Decentralized App의 약자입니다. 이는 분산 네트워크 또는 블록체인에서 백엔드 코드(주로 Solidity로 작성된 스마트 계약)를 실행하는 애플리케이션입니다. Dapp은 React, Vue 또는 Angular와 같은 프런트엔드 프레임워크를 사용하여 구축할 수 있습니다.
• 비트코인: 세계 최초로 널리 사용되는 암호화폐입니다.
• 암호화폐: 암호화폐, 분산형 디지털 화폐라고도 합니다.
• NFT: 대체 불가능한 토큰, 체인에 소유권이 기록된 디지털 자산입니다.
• DAO: 분산형 자율 조직, 분산형 자율 조직.
• 메타버스: 기술적 수단으로 창조된 가상 세계의 개념입니다.
• DeFi 분산형 금융: 분산형 금융 시스템.
• 토큰: 암호화폐, NFT 등 디지털 자산의 총칭으로 이해될 수 있습니다.
• GameFi: Game + DeFi, 체인 게임의 중국어 용어입니다. 게임 속 금융 시스템은 암호화폐와 NFT를 통해 현실로 매핑될 수 있습니다.

위 내용을 소개한 후, 개발자를 위한 블록체인 분류에 대해 이야기해보겠습니다. 주로 핵심 블록체인 개발(핵심 블록체인 엔지니어가 블록체인 시스템의 아키텍처 및 보안 프로토콜을 담당함)과 블록체인 소프트웨어 개발(이러한 블록체인 개발자는 핵심 블록체인 개발자가 제공한 설계 아키텍처를 사용하여 Dapp을 생성함)입니다.

Start

자세히 살펴보겠습니다. 프런트 엔드 개발을 위해 블록체인에 상주하고 상호 작용하는 분산형 애플리케이션을 개발하려면 web3.js 및 Ethers.js 라이브러리를 사용해야 합니다.

web3.js

web3.js는 JavaScript API 라이브러리입니다. Ethereum에서 DApp을 실행하려면 web3.js 라이브러리에서 제공하는 web3 개체를 사용할 수 있습니다. web3.js는 RPC 호출을 통해 로컬 노드와 통신하며 RPC 레이어를 노출하는 모든 Ethereum 노드와 함께 사용할 수 있습니다. web3에는 eth 개체인 web3.eth(이더리움 블록체인과 상호 작용하는 데 특화됨)와 shh 개체인 web3.shh(Whisper와 상호 작용하는 데 사용됨)가 포함되어 있습니다.

web3

을 추가하면 실제로 프로젝트에 web3이 도입됩니다. 기본적으로 기존 참조 방법과 일치합니다

• npm: npm install web3
• bower: bower install web3
• metor: meteor add ethereum:web3
• vanilla: dist./web3.min.js

사용

그런 다음 web3 인스턴스를 생성하고 공급자를 설정해야 합니다. Mist를 사용할 때와 같이 기존 공급자를 덮어쓰지 않도록 하려면 web3 인스턴스가 이미 존재하는지 확인해야 합니다

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

이 API는 로컬 RPC 노드와 상호 작용하도록 설계되었으므로 모든 기능은 기본적으로 동기화를 사용합니다. HTTP 요청. 비동기 요청을 하려는 경우. 대부분의 함수는 비동기식

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})

API의 특정 디렉터리를클릭하여 Ethereum 블록체인 및 생태계에 대한

Ethers.js

을 볼 수 있도록 매개변수 목록 다음에 선택적 콜백 함수를 전달할 수 있습니다. 시스템은 다음을 제공합니다. 원래 ethers.io와 함께 사용되었으며 현재는 보다 일반적인 라이브러리로 확장된 작지만 완전한 JavaScript API 라이브러리입니다. 이 기능은 기본적으로 web3.js와 유사합니다.

기능은 다음과 같습니다:

• 클라이언트 측에 개인 키를 안전하고 신뢰할 수 있게 보관하세요.
• JSON 지갑 파일(Geth, Parity 및 Crowdsale) 가져오기 및 내보내기 지원
• ABIv2 및 사람이 읽을 수 있는 ABI를 포함한 모든 계약 ABI에서 JavaScript 메타클래스 객체 생성
• JSON-RPC, INFURA, Etherscan 또는 MetaMask를 통한 Ethereum 노드 연결을 지원합니다.
• 라이브러리는 매우 작습니다(압축 ~88kb, 비압축 284kb)

Tools

물론 위 도구 외에도 개발 개선을 위해 많은 도구를 사용할 것입니다

• Truffle: 다음 방법을 제공합니다. 프로젝트의 빌드 종속성으로 사용되는 스마트 계약의 가상 머신 컴파일 및 테스트를 위해 Ethereum 개발 환경을 사용합니다.
• Remix IDE: 스마트 계약을 작성하고 사용하기 위한 완벽한 환경으로, 이를 사용하여 스마트 계약을 직접 생성, 수정 및 실행할 수 있습니다. 브라우저. 편집기에 가깝습니다.
• MetaMask: 브라우저에서 Ethereum 블록체인 네트워크에 연결할 수 있는 Chrome 확장 프로그램
• Ganache: 스마트 계약을 테스트하기 위한 로컬 블록체인 환경 제공

Build

우리는 풀 스택 구축Dapp 프로젝트에 사용자 인터페이스를 추가하려는 경우, ethers.js 또는 web3 .js를 사용하여 블록체인 네트워크와 쉽게 통합할 수 있는 React.js, vue.js 또는 angle.js가 좋은 자바스크립트 프런트엔드 프레임워크입니다. . 코드를 작성하지 않고도 완전한 Dapp을 생성할 수 있는 다양한 플랫폼이 있습니다: Bunz, Dapp builder, Atra io, Bubble io

결론

전반적으로 Web3.0은 기술이지만 개념입니다. 우리 프론트엔드 개발자는 기술이 어떻게 발전하든 항상 프론트엔드를 사용할 것입니다. 우리는 React.js, vue.js 또는 angle.js를 사용하여 자체 개발한 Dapp 애플리케이션을 위한 자체 플랫폼을 구축할 수도 있고, 전체 프로세스에서 제공하는 툴킷인 web3.js를 사용하여 nodejs를 사용하여 이를 완성할 수도 있습니다. 계약 컴파일, 릴리스 및 계약 메소드 호출.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 Web3.0이 온다! 프런트엔드 친화적인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!