Skip to content

Latest commit

 

History

History
70 lines (42 loc) · 7.46 KB

10-wrappingitup.md

File metadata and controls

70 lines (42 loc) · 7.46 KB
title actions requireLogin material
마무리하기
checkAnswer
hints
true
saveZombie zombieDeck
false
zombie hideSliders answer
lesson
6
true
1

축하하네! 자네 스마트 컨트랙트와 상호작용 하는 첫 번째 Web3.js 프론트엔드를 성공적으로 작성했네.

하나의 보상으로, 자네는 자네만의 The Phantom of Web3 좀비를 얻었네! 레벨 3.0(Web 3.0을 의미하여 😉)이고, 여우 마스크를 가지고 있지. 오른쪽에서 이 좀비를 확인해보게.

다음 단계

이번 레슨은 일부러 기초적인 것을 다뤘네. 우리는 자네에게 스마트 컨트랙트와 상호작용 할 때 필요한 핵심 로직을 보여주고 싶었네. 하지만 코드에서 Web3.js 부분은 꽤 반복적인 게 많기 때문에 전체 구현을 하는 데에 너무 많은 시간을 쓰고 싶지는 않았네. 이번 레슨을 더 길게 만들어 다른 새로운 개념을 소개하지도 않을 것이네.

그러니 이런 구현은 기초적인 것으로 놔두고, 우리 좀비 게임 프론트엔드의 완전한 구현을 위해 생각해볼 것들의 체크리스트를 알려주겠네. 자네가 이걸 자네만의 것으로 만들어보고 싶다면:

  1. attack, changeName, changeDna, 그리고 ERC721 함수인 transfer, ownerOf, balanceOf 함수를 구현하게. 이런 함수들의 구현은 우리가 다룬 모든 다른 send 트랜잭션과 동일할 것이네.

  2. 자네가 setKittyContractAddress, setLevelUpFee, 그리고 withdraw를 실행할 수 있는 "관리 페이지"를 구현하게. 다시 한번 말하지만, 프론트엔드에 더 특별한 로직은 없네 - 이러한 구현들은 우리가 이미 다룬 함수들과 동일할 것이네. 자네는 그저 해당 컨트랙트를 배포했던 이더리움 주소에서 이 함수들을 호출했는지 확인하면 되네. 이 함수들은 onlyOwner 제어자를 가지고 있으니 말이야.

  3. 이 앱에서 구현하고 싶은 다른 몇 가지 화면이 있을 수 있네:

a. 개별 좀비 페이지: 특정 좀비에 대한 영구적인 링크를 통해 그 좀비의 정보를 볼 수 있는 곳이지. 이 페이지에서는 좀비의 외관과 이름, 주인(사용자 프로필 페이지에 대한 링크와 함께), 승리/패배 횟수, 전투 기록, 기타 등등을 보여줄 것이네.

b. 사용자 페이지: 영구적인 링크를 통해 사용자의 좀비 군대를 볼 수 있는 곳이지. 개별 좀비를 클릭하여 해당 페이지를 볼 수 있을 것이고, 자네가 메타마스크에 로그인되어 있고, 군대를 가지고 있다면 좀비를 클릭해 공격할 수도 있을 것이네.

c. 홈페이지: 현재 사용자의 좀비 군대를 볼 수 있는, 사용자 페이지의 한 종류이지(우리가 index.html에서 구현학 시작헀던 곳이네).

  1. UI 상에서 사용자가 크립토키티를 먹이로 줄 수 있는 방법이 있어야 하겠지. 홈페이지에서 각 좀비 옆에 "먹이 주기" 같은 버튼을 만들고, 사용자가 고양이의 ID를 입력하게 하는 텍스트 박스를 만들 수 있겠지(또는 그 고양이의 URL, 예를 들면: https://www.cryptokitties.co/kitty/578397). 이 버튼은 feedOnKitty 함수를 호출할 것이네.

  2. UI 상에서 한 사용자가 다른 사용자의 좀비를 공격할 수 있는 방법이 있어야 할 것이네.

이를 구현하는 하나의 방법은 한 사용자가 다른 사용자의 페이지로 들어가면, "이 좀비 공격하기" 버튼을 보여주는 것이네. 사용자가 그 버튼을 클릭하면, 현재 사용자의 좀비 군대를 포함하는 모달 창을 띄우고 "어떤 좀비로 공격하시겠습니까?" 메세지를 보여주면 되네.

또 사용자의 홈페이지에서 각 좀비 옆에 "좀비 공격하기" 버튼을 둘 수도 있네. 사용자가 그걸 클릭하면, 사용자가 좀비의 ID를 입력하여 찾을 수 있는 찾기 영역을 가지는 모달 창을 띄울 수 있겠지. 또는 "아무 좀비나 공격하기" 같은 옵션을 줘서 임의로 찾을 수도 있을 것이네.

그리고 쿨다운 기간이 아직 다 지나지 않은 사용자의 좀비는 회색 처리를 할 수도 있겠지. UI 상에서 사용자에게 해당 좀비로는 아직 공격할 수 없고 얼마나 더 기다려야 하는지 보여줄 수 있도록 말이야.

  1. 사용자의 홈페이지에는 각 좀비의 이름 또는 DNA를 바꾸고, 일정 비용을 내고 레벨업을 할 수 있는 옵션이 있을 수 있네. 사용자의 레벨이 충분하지 않으면 어떤 옵션들을 회색 처리를 할 수 있곘지.

  2. 새로운 사용자들을 위해, createRandomZombie()를 호출해 군대의 첫 번째 좀비를 만들 수 있는 입력 창과 함께 환영 메세지를 보여줄 수 있네.

  3. 마지막 챕터에서 논의한 것처럼, 우리 스마트 컨트랙트에 indexed 프로퍼티로 사용자의 address를 가지는 Attack 이벤트를 추가하고 싶을 수 있네. 이를 통해 실시간 알림을 만들 수 있을 것이네 - 사용자에게 그의 좀비가 공격당하면 알림 창을 띄워 알려주어, 그를 공격한 사용자/좀비를 보여주고 복수할 수 있게 하는 것이지.

  4. 또한 일종의 프론트엔드 캐시 계층을 구현하여 똑같은 데이터를 위해 Infura에 계속 접근하지는 않도록 하고 싶을 수 있네(우리의 현재 displayZombies 구현은 인터페이스를 새로고침할 때마다 각 좀비에 대해 getZombieDetails를 호출하지 - 하지만 현실적으로 우리의 군대에 추가된 새 좀비에 대해서만 이 함수를 호출하면 되네).

  5. 실시간 채팅방을 만들어 자네가 다른 사용자들의 군대를 부술 때마다 그 사용자를 도발할 수 있도록 하는 것? 제발 만들어 주게...

이건 시작일 뿐이네 - 우리는 더 많은 기능들을 생각해낼 수 있을 것이야 - 그리고 이미 많은 목록을 만들었지.

이런 전체 인터페이스를 만드는 데에는 많은 프론트엔드 코드를 써야 할 것이기에(HTML, CSS, 자바스크립트, 그리고 React나 Vue.js 같은 프레임워크), 이런 전체 프론트엔드를 만드는 것은 이것만으로 10개 레슨으로 전체 코스를 만들어야 할 것이야. 그러니 이 엄청난 구현은 자네에게 맡기겠네.

참고: 우리 스마트 컨트랙트는 분산화되어 있지만, 우리 DApp과 상호작용 할 수 있는 이 프론트엔드는 어딘가의 웹 서버에 완전히 중앙화되어 있을 것이네.

하지만, 우리가 Loom Network에서 만들고 있는 SDK를 쓰면, 중앙화된 웹 서버 대신 곧 자신만의 DAppChain에서 프론트엔드를 제공할 수 있을 것이네. 이더리움과 Loom DAppChain 간의 저런 방식으로, 전체 앱이 100% 블록체인 상에서 돌아갈 것이네.

결론

이것으로 레슨 6이 끝났네. 이제 자네는 스마트 컨트랙트를 작성하고 사용자가 이와 통신할 수 있게 하는 프론트엔드를 만드는 모든 기술을 배웠네!

다음 레슨에서는, 이 퍼즐에서 마지막 잃어버린 조각을 다룰 것이네 - 스마트 컨트랙트를 이더리움에 배포하는 것이지.

"다음 챕터"를 클릭하여 보상을 받도록 하게!