[dapp/react]해쉬 값을 이용한 카드 게임[1]

인프런 강의를 토대로 개발한 프로젝트입니다.

https://www.inflearn.com/course/ethereum-dapp

[무료] Ethereum 실전! 초보자를 위한 Lottery Dapp 개발 - 인프런 | 강의

Stack

BackEnd - Solidity

• Truffle Framework

 

FrontEnd - React

• 함수형 컴포넌트로 진행 

 

UI - BootStrap

 

환경 

• Ganache-cli 를 이용한 로컬 블록체인 환경 구현
• Client 와 Server 연결을 위한 전자 지갑 서비스 Metamask 이용(Chrome Extension)

 

---

게임 소개 

게임 페이지

4개의 카드를 조합해  블락 해시의 첫 두글자를 맞추는 게임이다.

두글자중 한글자를 맞추면 DRAW > 사용자가 소모한 금액만큼 지급

두글자를 맞추면 WIN > 사용자에게 누적 금액 지급

모두 틀리면 FAIL > 금액 누적

• 마지막으로 쌓인 블럭 4개는 아직 결과가 나오지 않은 상태이고 블락들이 쌓이면 차례대로 결과가 확인된다.
• 실제 해시값은 랜덤해야 하지만 결과 확인을 위해 0x00으로 고정 해두었음

---

BackEnd 

처음 접해보는 Solidity다 보니 문법 적응이 다소 까다로웠지만, 결국 베이스는 JAVA이므로 쉽게 적응 할 수 있었다.

FrontEnd와 연동 전 이벤트 로그 확인을 위해 처음으로 단위테스트를 진행해보았다

단위테스트 중 DRAW 이벤트 확인

 

---

FrontEnd

강의 영상에서는 React 예제를 클래스 컴포넌트 방식으로 진행했지만, 

굳이. 굳이. 나는 함수 컴포넌트 방식으로 진행해서 하다 보니 개발 기간의 80%를 잡아먹었다.

 

FrontEnd와 BackEnd 연동을 위해 필요한 것

• ABI( Application Binary Interface ) 
• 컨트랙트 주소
• Web3 라이브러리

연동을 위한 initWeb3() 작업 진행 ( ComponentDidMount )

  useEffect(()=>{
    initWeb3()
  },[])

 

---

실제 initWeb3() 소스 중 일부

    window.connection =  await new window.web3.eth.Contract(lotteryABI,lotteryAddress)
    // source 수정 필요(window)
    const connection = window.connection;

    setLoading(false); 
    
    let pot =  await connection.methods.getPot().call();

Contract주소와 ABI들 인스턴스화

로직상 보이는 connection.methods.getPot 메소드는 실제 Solidity 로직에 존재하는 내 로직이다.

호출이 가능한 이유는 lotteryABI에 해당 메소드들 정보가 들어있기 때문.

---

 

롱풀링 방식을 이용한 데이터 긁어오기

  useEffect(()=>{
    const time =  setInterval(pollData,2000)
      return ()=> clearInterval(time)  //componentWillUpdate 사이클에서 setinterval함수가 재호출되므로 전 호출 clear
  },[finalRecords]);

UseEffect

• ComponentDidMount - 2초마다 pollData 호출
• ComponentDidUpdate - finalRecords 값 변경시 동작
• ComponentWillUnmount - 다시 업데이트 됐을 경우, 그 전에 존재했던 interval 클리어 필요(남아있으면 계속 호출이 쌓임)

위 예시는 클래스 컴포넌트와 비교 하였을때 드는 예시이며, 조금 차이가 있습니다.

---

ISSUE

• 비동기처리에 대한 지식 부족으로 시간 소요
• React에 대한 생명주기 미숙지로 시간 소요

 

 

issue [ˈɪʃuː][ˈɪsjuː] Eng



1.issue

[명사] (논의논쟁의 중요한) 주제[안건], 쟁점, 사안

2.Issue

[Noun] A Monacan Indian; a member of a Mestee group originating in Amherst County, Virginia.

3.non-issue

[명사] 하찮은[중요하지 않은] 주제

4.back issue

[명사] (신문·잡지의) 과월호, 지난 호

5.side issue

[명사] 부차적인[지엽적인] 문제

6.발행 發行

(도서·잡지 등의) [명사] publication, [동사] publish, issue, bring out

7.발급 發給

[명사, 동사] issue

8.발표 發表

[명사] announcement, statement, presentation, [동사] announce, issue, make public; (의견·연구 결과 등을) present; (책 등을) publish; (책·음반 등을) release

9.쟁점 爭點

(controversial) issue

10.이슈 issue

issue

 

{"mean":["issue<br/><br/>[명사]\n\t\t \t\t(논의논쟁의 중요한) 주제[안건], 쟁점, 사안","Issue<br/><br/>[Noun] A Monacan Indian; a member of a Mestee group originating in Amherst County, Virginia.","non-issue<br/><br/>[명사]\n\t\t \t\t하찮은[중요하지 않은] 주제","back issue<br/><br/>[명사]\n\t\t \t\t(신문·잡지의) 과월호, 지난 호","side issue<br/><br/>[명사]\n\t\t \t\t부차적인[지엽적인] 문제","발행\n \t\t\t發行<br/><br/>(도서·잡지 등의) [명사] publication, [동사] publish, issue, bring out","발급\n \t\t\t發給<br/><br/>[명사, 동사] issue","발표\n \t\t\t發表<br/><br/>[명사] announcement, statement, presentation, [동사] announce, issue, make public; (의견·연구 결과 등을) present; (책 등을) publish; (책·음반 등을) release","쟁점\n \t\t\t爭點<br/><br/>(controversial) issue","이슈\n \t\t\tissue<br/><br/>issue"],"word":"\n\t\t\t\t\t\tissue\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=39287c5f5df53f06419fe17c30541df69d1b6345d00f8f3f661243716bb06e91ef5ce7d862f54071991c6f25dc27805d915144b46471d510c22d0948d85bfeeec353cb191a0f3af01a79a6bd2fb605b2214cac6f7cdfffbf90ce74249e36e0143be5dfcfd1ea81c030b645ab506192e9a68e53ae377811d68147818e32253ffd","phoneticSymbol":"[ˈɪʃuː][ˈɪsjuː]"}