[크립토 좀비 실습] - Lesson 6
스마트 컨트랙트 공부
벌써 마지막 Lesson6 입니다!
지금까지의 레슨을 통해 기본적인 솔리디티 작성방법과 문법, 형식에 대해서 많이 배웠는데요. 이를 통해 기본적인 스마트 컨트랙트에 대해서 많이 배운 시간이었습니다.
다음 공부를 위해 어서 마지막 Lesson6를 끝내 봅시다!
챕터1에서는 지금 까지 만들어온 DApp을 상호작용할 수 있는 웹 페이지를 만들기 위해 Web3.js에 대해서 배웁니다. Web3.js에 대한 간단한 설명을 듣고 나서 사용 방법에 대해서 알려주는데요 한번 해봅시다.
다음과 같이 Web3.js를 사용하기 위해 코드를 작성해 줍시다.
챕터 2에서는 웹3 프로바이더라는 Dapp을 개발할 때 개별 노드들을 운영할 필요가 없는 서비스에 대해서 설명해 줍니다. 그 예로 Infura, 메타마스크에 대해서 설명하고 메타마스크 사용법을 알려줍니다. 따라해 봅시다.
다음과 같이 메타마스크 Web3 프로바이더를 사용하기 위해 코드를 작성해 줍니다.
챕터 3에서는 스마트 컨트랙트와 통신을 할 수 있도록 컨트랙트 주소와 컨트랙트 ABI를 활용하는 방법에 대해서 소개합니다.
head부분에 크립토좀비 abi.js를 포함한 뒤 크립토 좀비라는 이름으로 변수를 선언하여 여기에 컨트랙트를 인스턴스화 하여 web3js.eth.Contract를 할당해 줍니다.
챕터4는 이제 컨트랙트 설정이 다 끝난 후 통신을 할 수 있으며 call과 send에 대한 설명을 합니다. Call의 경우 블록체인에 트랜잭션을 만들 지 않지만 Send는 트랜잭션을 만드렁 블록체인 상의 데이터를 변경한다고 합니다. 즉 view, pure가 아닌 모든 함수에 이것을 사용한다고 합니다.
다음과 같이 작성해 주어서 id를 매개변수로 받아서 zombieToOwner에서 매핑한 주소를 불러오게 됩니다. 마찬가지로 getZombiesByOwner를 통하여 owner를 매개변수로 받아서 자신 소유의 좀비를 보여주는 것을 반환시킵니다.
챕터 5에서는 전에 만든 getZombiesByOwner 함수에서 address를 인자로 받는데 어떻게 메타마스크에서 주소를 받을 지에 관한 설명입니다. 왼쪽에 나와있는 예시들을 보고 바로 직접해보기로 넘어갑시다.
다음과 같이 변수를 선언한뒤 setInterval을 만들어서 메타마스크 계정이 맞는 지 확인하여 그 주소를 사용해 getZombiesByOwner 함수에 이용합니다.
챕터6 입니다. 전 챕터에서 받은 데이터를 실제로 보여주기 위해 jQuery를 이용하여 좀비의 이름, dna, level등을 표현할 수 있도록 다음과 같이 만들어 줍니다.
개인적으로 jQuery를 아직 배우지 않은 상태에서 문법을 이해하려니 힘들지만 대충대충 append, empty 이런 함수들의 의미를 생각하면서 이해하시면 편하실 것 같습니다!
챕터 7에서는 트랜잭션을 보내기 위해 send 함수와 call의 차이점에 대해서 설명합니다. 또한 좌측 코드에서는 메타마스크를 사용해 Web3.js에서 함수를 호출하는 방법의 예제로 receipt와 error에 대해서 말해주는데 어떠한 구조로 이루어지는 지 보시면 좋을 것 같습니다.
두 개의 함수를 만들어 주시고 좌측 화면의 있는 코드를 활용하여 다음과 같이 만들어 줍니다.
챕터 8은 저번에 설명드렸던 payable함수를 이용하기 위해 wei의 단위를 바꾸고 send를 이용해 돈을 보내는 것에 대해서 설명하고 있습니다.
코드를 다음과 같이 짜줍시다.
챕터 9입니다. 이곳에서는 저번 레슨에서 직접 해보기나 코드를 작성하실 때에 event라는 것을 본적이 있었을 텐데요 그 이벤트를 구독하여 좀비가 생성되는 등의 어떠한 행동이 있을 때마다 알림을 보내고 현재 사용자가 만든 것에 대해서만 알림을 보내기 위해 indexed라는 키워드를 사용하는 것에 대해서 말해줍니다. 또한 getPastEvents를 이용해 저렴한 형태의 storage로 사용해 지난 이벤트들에 대한 질의를 할 수 있다고 합니다. 바로 직접 해봅시다.
다음과 같이 만들어주어 Transfer 이벤트를 감지할 수 있는 코드를 만들었습니다. 그리고 UI를 업데이트 할 수 있도록 getZombiesByOwner(userAccount).then(displayZombies); 이 부분을 넣어줍시다.
이렇게 해서 기초적인 Web3.js 프론트엔드를 성공적으로 마쳤습니다. 벌써 이렇게 끝나다니 아쉽네요,, 하지만 이렇게해서 기본적인 솔리디티와 스마트 컨트랙트에 관한 공부를 할 수 있었던 것 같습니다. 다른 분들도 도움이 되셨기를 바라며 이만 마치겠습니다. 감사합니다!
이정민(dlwoabsdk@gmail.com)
