프론트엔드에서 Binance Smart Chain 스마트계약 연결하기

개요

binance smart chain integration에서 실행되는 스마트 계약과 사용자의 웹 브라우저에서 실행되는 프런트엔드 구조

바이낸스 스마트 체인을 실행하는 소프트웨어를 클라이언트라고 합니다. 

클라이언트가 노출하는 어떤 스팟의 API에 계약 기능과 스마트 계약과 상호 작용하기 위한 여러 end point가 있습니다.
트랜잭션을 보내서 데이터를 수정하고 호출하여 프론트엔드의 스마트계약은 html,css,javascript가 있는 웹페이지를 갖게됩니다.

스마트계약과 트랜잭션할 자바스크립트 코드를 사용하여 바이낸스 일치의 API와 직접 상호작용할 수 있지만 너무 많은 작업이 될 것입니다. 두개의 엔드포인트를 사용하여 트랜잭션을 전송하고 매개변수에 대한 특정 인코딩이 필요하며 이를 처리하는 것이 너무 번거롭기 때문입니다.

그래서 자바스크립트 라이브러리를 사용해 복잡한 작업을 수행합니다.

1. Web3
2. Ethers

Web3는 더 오래된 라이브러리입니다. 이더는 더 최신이고 더 간단한 API를 가지고 있으며 더 많은 트랜잭션을 얻고 있습니다. 따라서 우리는 이더를 사용할 것 이지만 나중에 web3 이더를 사용하는 것을 선호 하더라도 API에 도달할 때 까지 인터넷을 통해 http요청을 보낼 것인지 여부는 중요하지 않습니다. 

바이낸스 스마트 체인의 api에 도달할 때까지 인터넷은 요청을 실행할 evm 또는 이더리움 가상 머신으로 보내지고 마지막으로 응답을 다시 보냅니다. 프론트엔드 또 다른 매우 중요한 부분은 프론트엔드에 있는 사용자의 지갑입니다.

기술적으로 블록체인 앱의 일부는 아니지만 여전히 상호작용해야합니다.
일반적으로 메타마스크와 같은 크롬확장이지만 모바일 지갑이나 하드웨어지갑일 수 있습니다.
이 지갑은 스마트계약에 트랜잭션을 보내려고 할 때 사용됩니다.

지갑에는 사용자의 개인 키가 있고 머신으로 보내기 전에 트랜잭션에 서명합니다. 매우 중요한 세부 사항은 개인 키 절대 사라지지 않는다는 것 입니다. 블록체인앱은 이 키에 절대 접근할 수 없습니다. 

자바스크립트 코드는 지갑에 요청해 이 거래를 보내고 싶습니다.  사용자는 거래 서명에 동의하는지 확인하면 지갑에 팝업이 표시됩니다. 사용자에게 그리고 동의하는 경우에만 트랜잭션이 서명되고 블록체인으로 보내집니다.