React성과 견고성을 갖춘 이더리움 트랜잭션 앱 구축

반응형

파트 1: 무엇을 만들 것인가. 여기서 라이브 데모와 Git Repo를 참조하십시오. 온라인 데모에서는 Ropsten 테스트 네트워크를 사용합니다.

도입

웹3 운동이 월드 와이드 웹에 파문을 일으키면서 개발자로 뛰어들어 이 블록체인 기술의 수혜자 중 한 명이 되어야 한다.

 

그런데 웹3가 뭐야? 블록체인 기반 탈중앙화가 적용된 월드 와이드 웹의 새로운 버전을 위한 개념이다. 즉, 데이터 자율성은 더 이상 한 개인이나 기업의 손에 넘어가지 않고 웹을 통해 배포될 것입니다. 다시 말해, 정보는 이제 네트워크를 통해 안전하고, 불변하며, 배포될 것입니다.

이 튜토리얼에서는 ReactJs 프런트엔드와 상호 작용할 분산형 블록체인 애플리케이션을 처음부터 구축하는 방법을 안내합니다.

2부작 시리즈 중 1부작으로, 여러분을 위한 블록체인 개발 환경 설정에 주력하고 리믹스 에디터에서도 스마트 컨트랙트를 만들겠습니다.

전제 조건

여기 저와 함께 제작해야 할 아이템 목록과 함께 작업하는 방법에 대한 설명이 있습니다.

 

• 메타마스크
• 리믹스 편집기
• 하드햇
• 알카미
• 리액트Js
• 뒷바람 CSS
• 견고함
• EthersJs
• 수도꼭지
• 비테

계속하려면 브라우저에 메타마스크를 설치하는 것부터 시작하겠습니다. Google Chrome이 이 튜토리얼에 권장되는 브라우저입니다. 설치 후, 당신은 또한 어떻게 당신의 지갑에 무료 에테르를 받을 수 있는지 생각하게 될 것이고, 그러면 당신은 우리의 어플리케이션을 만들 때 거래를 할 수 있을 것이다.

메타마스크 설치

이 링크가 있는 크롬 스토어로 이동하여 위 이미지와 같이 버튼을 클릭하여 메타마스크를 설치합니다.

 

설치 후 메타마스크가 계정 생성 과정을 안내할 것이며, 아래의 이미지에서 안내하는 대로 따라야 합니다.

 

이제 메타마스크 설치 단계에서 제공된 비디오의 설치 안내서를 따르십시오. 본 후 아래 그림과 같이 [다음] 단추를 클릭하십시오.

계정 생성 프로세스를 완료하면 아래 화면이 나타납니다.

 

그런 다음 위의 빨간색 화살표로 표시된 네트워크 드롭다운을 클릭하고 아래 이미지와 같이 테스트 네트워크를 표시하거나 숨깁니다.

이제 아래 이미지와 같이 테스트 네트워크를 ON으로 표시하고 맨 위로 스크롤한 다음 설정을 닫습니다.

 

이제 networks 탭을 클릭하면 사용자 지정 네트워크 추가를 위한 프로비저닝을 포함한 테스트 네트워크 목록이 표시됩니다(아래 이미지 참조).

우리는 이 튜토리얼에 린케비 테스트 네트워크를 사용할 것이며, 위 이미지와 같이 클릭한 후 에테르로 자금 지원을 진행합시다.

린케비 계좌에 자금 지원

 

나는 이 계좌를 사용해 왔고 당신은 나의 현재 잔고를 볼 수 있습니다. 메타마스크 계정을 만드는 경우 0이 되지만 걱정하지 마십시오. 계정 1의 주소를 복사하고 아래 이미지를 참조하십시오.

계정 주소가 당신을 가리키고, 세계 어느 곳이든 그것을 사용하여 당신에게 에테르를 보낼 수 있습니다. 주소를 복사하려면 클릭하십시오. 이제 테스트 목적으로 무료 에테르를 사용하여 이 링크를 방문하십시오. 이 에테르들은 가짜로 실제 이더리움 네트워크에서는 사용할 수 없지만 메인 네트워크에 배포하기 전에 이더리움 스마트 계약을 테스트하는 용도로 사용됩니다.

이 수도꼭지를 사용하면 지갑에 에테르를 무료로 보낼 수 있습니다. 무료 에테르를 받으려면 계정 1 지갑 주소를 입력하고 테스트 에테르 전송 버튼을 클릭하십시오. 아래 그림과 같이 거래가 진행되는 데 30초에서 1분 정도 걸립니다.

 

거래가 성공한 후 린케비 메타마스크 계정 1을 확인하면 지갑에 0.1에테르가 들어온 것을 확인할 수 있다.

이전의 잔액과 새로운 잔액을 비교해보니, 당신은 당신의 린케비 계좌로 0.1에테르를 받은 것을 알 수 있습니다.

만약 당신이 성공적으로 끝까지 해냈다면, 당신은 멋진 사람입니다. 다음으로 솔리드 스마트 계약을 코딩하기 위한 리믹스 편집기 설정을 진행하겠습니다.

 

스마트 계약 작성

스마트 계약을 구축하고 테스트하기 위해 리믹스 편집기를 사용할 것입니다. 리믹스를 진행하면 아래 이미지에 표시된 인터페이스가 나타납니다.

애초에 리믹스란 무엇일까요? 리믹스는 이더리움 블록체인 네트워크에 솔리드 프로그래밍 언어로 작성된 스마트 컨트랙트를 생성, 컴파일, 배포하는 온라인 에디터다.

이 스마트 계약을 어떻게 만들까요?

 

스마트 계약을 생성하려면 리믹스 편집기에서 contracts 폴더를 클릭하면 기존 파일 목록이 드롭다운에 나타납니다.

그런 다음 계약 디렉토리를 마우스 오른쪽 버튼으로 누르고 Transactions.sol이라는 이름으로 새 파일을 작성하십시오. 위의 이미지를 참조점으로 사용합니다.

파일이 생성되면 위의 이미지와 같이 코딩 인터페이스가 즉시 표시됩니다. 이제 코딩 작업을 시작하겠습니다.

// SPDX-라이센스-식별자: MIT

 

프라그마 견고성 ^0.8.0;

위의 코드는 리믹스 편집기에 당신의 스마트 컨트랙트가 어떤 소프트웨어 라이선스와 컴파일러의 버전을 사용할 것인지를 알려준다.

계약 트랜잭션 {

주소 개인 소유자;

int256 트랜잭션카운트;

 

매핑(주소 => uint) 잔액Of;

}

위의 코드는 트랜잭션이라는 이름의 솔리드 스마트 계약을 생성합니다. 파일 이름은 스마트 계약 이름과 동일합니다. 당신의 견고한 스마트 계약은 이 규칙을 따르는 것이 관례입니다.

소유자, transactionCounts 및 balanceOf는 속성 또는 변수입니다. 소유자 변수에는 지갑 주소만 포함됩니다. transactionCounts에는 서명되지 않은 정수가 포함되며 balanceOf는 스마트 계약과 상호 작용하는 사용자의 주소를 저장하는 배열입니다.

이벤트 전송(주소 인덱싱된 보낸 사람, 주소 인덱싱된 수신기, uint256 금액, 문자열 비고, uint256 타임스탬프);

 

구조 전달 구조 {

주소 발신자;

주소 수신자;

int256 금액;

현악기;

 

int256 타임스탬프;

}

TransferStruct[] 트랜잭션;

이 코드 블록에서, 우리는 두 계좌 간에 이체가 이루어질 때마다 이체 이벤트를 사용하도록 스마트 계약서에 지시하고 있습니다. 이 이벤트에는 보낸 사람과 받는 사람의 주소, 보낸 금액, 트랜잭션에 대한 메모, 그리고 거래가 이루어진 시간을 표시하는 타임스탬프의 기록이 포함됩니다.

또한, 우리는 우리의 스마트 계약 거래가 이어질 구조를 정의했습니다. 이것은 모든 것을 균일하게 유지하기 위해 필요합니다. 마지막으로, 우리는 이 스마트 계약에서 이루어지는 모든 거래를 추적하는 트랜잭션 어레이를 정의했습니다.

 

생성자 {}

소유자 = msg.보낸 사람;

잔액[tx.origin] = msg.발송인.균형;

}

함수 getOwner() 공용 보기 반환(주소) {

 

반환 소유자;

}

sendMoney 함수(주소 미지급 수신기, int256 금액, 문자열 메모리 비고) 공개 반환(붐 성공) {

(소유자 < 금액의 잔액)이 거짓으로 반환되는 경우

잔액[소유자] -= 금액;

 

잔액[수신기] += 금액;

트랜잭션 수 += 1;

트랜잭션.transactions.transactions()

TransferStruct()

주인

 

리시버,

양

발언

차단하다

)

 

);

송출(MSG.발송인, 수취인, 금액, 비고, 블록.타임 스탬프);

진실로 돌아오다;

}

getBalance(주소 addr) 공용 보기가 반환됨(uint) {

 

잔액을 반환합니다[주소].

}

getAllTransactions() 공용 보기를 반환(TransferStruct[] 메모리) {

반품 거래;

}

 

getTransactionsCount() 공용 보기가 반환됨(uint256) {

트랜잭션 수를 반환합니다.

}

이 마지막 블록은 이 스마트 계약에서 실행할 수 있는 여섯 가지 다른 메소드 또는 함수를 포함합니다. 첫 번째는 생성자 함수인데, 이 스마트 계약이 실행될 때마다 가장 먼저 실행됩니다. 그것은 소유자를 거래를 보내는 사람으로 설정하고 잔금도 받을 것입니다.

getOwner 기능은 이 스마트 계약으로 거래하는 사람의 주소를 반환합니다.

 

센드머니 기능은 송신자가 지정한 일정량의 에테르를 수신자에게 전송합니다. 이 기능은 보내는 사람과 받는 사람의 주소, 금액, 그리고 거래에 대한 언급이 필요합니다. 함수의 코드 블록에 보이는 로직으로 완료되면 터미널에서 볼 수 있는 전송 이벤트가 발생합니다.

마지막 세 기능은 이름 그대로 임무를 수행합니다. 다음은 우리 코드의 완전한 버전입니다.

환상적입니다, 리믹스 편집기에서 이 코드를 테스트해 보겠습니다.

스마트 계약 작성

 

스마트 계약을 컴파일하려면 리믹스 편집기에서 컴파일 버튼을 클릭하십시오. 컴파일러 목록에서 최신 버전을 선택하고 big blue compile 버튼을 클릭한다. 이 작업을 올바르게 수행했다면 아래 이미지와 유사한 보기를 볼 수 있습니다.

컴파일 탭에 있는 녹색 체크 라벨에 주목하세요, 이것은 우리의 스마트 계약이 성공적으로 컴파일되었음을 나타냅니다. 위의 이미지를 참조하십시오. 컴파일 시 오류가 없으므로 이제 네트워크에 이 스마트 계약을 배포할 차례입니다.

스마트 계약 구축 및 실행

 

스마트 계약을 배포하려면 배포 탭을 클릭하고 환경을 선택합니다. 이 프로세스에는 단순성을 위해 JavaScript VM(London)을 사용할 수 있습니다. 리믹스에는 스마트 계약을 배포하는 방법에 대한 다양한 옵션이 있습니다.

주황색 배치 버튼을 클릭하면 터미널에 트랜잭션 성공이 기록됩니다. 페이지 왼쪽 하단에 배포된 계약 해시 코드와 에테르 밸런스의 감소를 볼 수 있습니다.

일부 트랜잭션을 시작하려면 자바스크립트 VM(런던)의 두 번째 계정 주소를 복사하여 위의 이미지에 표시된 sendMoney 메서드에 수신자의 주소로 붙여넣으십시오. 그리고 원하는 금액, 비고, 그리고 거래 버튼을 클릭하세요. 이렇게 하면 입력된 금액이 수취인 계좌로 즉시 이체되며, 수표 잔고 기능으로 이들의 잔고를 확인할 수도 있습니다. 제대로 안내하려면 위의 이미지를 참조하십시오.

 

놀랍습니다, 솔리드 프로그래밍 언어로 첫 번째 스마트 계약을 완료하셨습니다. 이 튜토리얼의 두 번째 파트에서는 대응 프런트엔드와 병합할 것입니다. 다음 부분에서 만나요.

작성자 정보

가스펠 달링턴이 2016년 소프트웨어 엔지니어로서의 여정을 시작했다. 수년간, 그는 리액트, 리액트 네이티브, VueJs 등과 같은 자바스크립트 스택에서 완전한 기술을 발전시켰다.

그는 현재 프리랜싱, 고객용 앱 개발, 자신이 하는 일을 다른 사람들에게 가르치는 기술 튜토리얼 작성 등을 하고 있습니다.

가스펠 달링턴이 열려있고 당신의 소식을 들을 수 있습니다. 링크드인, 페이스북, 깃허브 또는 그의 웹사이트에서 그와 연락할 수 있습니다.

 

plainenglish.io에서 더 많은 콘텐츠를 확인하십시오. 무료 주간 뉴스레터에 가입하십시오. 우리 커뮤니티 Discords에서 글쓰기 기회와 조언을 독점적으로 이용하세요.