Solidity Event에 대해서 (Feat. dApp 개발)

dApp을 개발함에 있어서는 크게 두 파트로 나뉜다.

첫 파트는 블록체인과 연결되는 스마트 컨트랙트 코드. 그 다음은 프론트엔드 코드.

결국 스마트 컨트랙트 코드 + 프론트엔드 코드 + 기타를 합쳐서 dApp을 구성하게되는데, 이 때 프론트엔드 코드가 스마트 컨트랙트 코드 함수에서 실행되는 것에 대해서 소통을 하기 위해서 이용되는 것이 바로 Event이다.

스마트 컨트랙트가 Event를 send하면 프론트엔드 코드에서 listen하는 식으로 동작한다.

예를 통해 이해해보자.

요즘 1200만 달러를 유치해서 화제가 된 크립토키티에 대해 이 dapp이 실제로 정말 그만한 가치가 있는지 의문을 품는 크립토키티 안티팬들이 많다. 극성 안티팬이 kitty를 사냥하면 경험치를 주는 dApp을 만들려고 한다고 해보자.

스마트 컨트랙트 코드) i. 이벤트 정의: “Kitty 사냥 성공” 이벤트

이벤트를 정의할 때 parameter에는 프론트엔드에 전달할 데이터들을 정의한다. 이 경우 프론트엔드에 kittyId와 exp를 전달한다.

event HuntedKitty(uint kittyId, uint exp);

스마트 컨트랙트 코드) ii. 이벤트 발생: “Kitty 사냥 성공" 발생!

function huntKitty(uint kittyId, uint exp) {
  HuntedKitty(kittyId, exp); // 이벤트 발생! 프론트엔드 코드로 이벤트 전달
  delete kitties[kittyId]; // kitties 배열에서 사냥당한 kitty 삭제
}

프론트엔드 코드) iii. 이벤트 처리: “Kitty 사냥 성공" 이벤트 수신 및 처리

MyContract.HuntedKitty((error, result) => {
  showHuntedKittyWithExp(result.kittyId, result.exp); // 사냥한 Kitty와 얻은 경험치를 보여줌.
}

즉, 스마트 컨트랙트에 이벤트 정의, 이벤트에 대한 발생 코드를 작성하고, 프론트엔드 코드에서는 마치 웹소켓 메시지를 받아서 처리하는 것과 같이 해당 이벤트에 대한 콜백코드를 작성하면 된다.

*dApp을 만들 때 스마트 컨트랙트와 프론트엔드 코드간 소통하는 방법에 대해서 알아보았다.