안녕하세요
Kovan 네트워크 사용해 Dapp 만들기 2탄입니다!
저번 포스팅에서는 Smart Contract를 작성하고 Kovan 네트워크에 배포후 확인까지 했었죠
오늘은 직접 클라이언트 화면을 만들어 데이터를 넣고 가져오는 실습을 진행 하겠습니다!
아주 간단한 그냥 숫자를 입력해 블록에 저장하고, 블록에서 숫자를 가져오는 웹을 만들거예요.
오늘 하는 내용을 바탕으로 각자의 Smart Contract를 만들어서 더 발전시키면 개인 능력 향상에 정말 도움이 될거라 생각됩니다.
자 먼저 빈 react프로젝트를 생성하겠습니다.
create-react-app 이라는 모듈을 설치하고, create-react-app 를 사용해 빈 react프로젝트를 생성할겁니다
-npm install -g create-react-app
-create-react-app 폴더이름
이런식으로 빈 프로젝트를 생성해주시면 되겠습니다.
프로젝트를 VsCode를 사용해 열어주세요
그리고 위 이미지처럼 아무폴더나 생성(저는 Abi라는 폴더)후 SimpleStorage.json이라는 파일을 하나 생성했습니다
바로 이부분에 저번시간에 배포했던 Contract의 Abi코드값을 넣을거예요!
SimpleStorage.json 파일안에
{
"contactName":"SimpleStorage",
"abi": [이부분에 Abi값을 붙여넣을거예요]
}
직접 작성해주세요!
저번 시간에 Abi값 복사를 안하신분을 위해 다시한번 Abi값을 확인하는 법을 알려드릴게요.
자신의 Kovan 네트워크 이더계좌주소를 복사해주세요!
https://kovan.etherscan.io/ 에 가셔서 붙여넣기!
Contract Creation이라고 써있는 부분을 눌러주시면 확인 가능합니다.
그리고 그냥 붙여넣기 해주세요!
이제 App.js에 가서 직접 코드를 작성해보도록 할게요.
정말 간단한 프로젝트니 따로 컴포넌트를 나누지는 않을게요.
저희는 web3를 사용할거기 때문에 web3 모듈을 설치해주세요
상단에 web3와 저희가 추가했던 abi를 선언해주세요
그리고 가장중요한 abi를 사용하기위해 인스턴스화를 시켜야겠죠.
const SimpleStorageInstance = new web3.eth.Contract(SimpleStorage.abi, '0x0b4B148C6AB76335899A1294c22f48964cB04869')
바로 이부분입니다. 앞에 변수는 abi파일을 추가하고, 뒤에변수는 전 시간에 배포한 컨트랙트의 주소를 써주면되요!
이더계좌주소가 절대아닙니다! 컨트랙트의 주소예요!!
그리고 세가지의 함수를 만들겠습니다.
블록에 데이터를 저장하는함수, 블록에서 데이터를 불러오는함수, handleChage 함수!
SetDate함수를 봐주세요.
this.state.SimpleStorageInstance.methods.set(this.state.data).send({ from : '자신의 이더리움 계좌주소'})
이부분에서 직접 계좌주소를 입력할게요! web3에서 defaultAccount를 가져오는 방법도있는데 일단 직접 입력하겠습니다.
두가지 변수를 추가해주세요!
그리고 클라이언트화면 입니다!
제가 예전에 작성했던 포스트를 읽어보시거나 기본적으로 이더리움 Dapp을 조금이라도 공부하셨던 분이라면
정말 무리없이 쉽게 코드를 작성하셨을거예요! 그래서 간단히만 설명했어요!
그리고 이제 npm start를 통해서 프로젝트를 실행해 보겠습니다.
대충 아무런 숫자나 입력하고 버튼을 누르고 메타마스크 창에서 승인을 누르면 블록에 데이터가 저장됩니다!
데이터는 숫자만 입력해주세요!
Solidity 코드를 작성할때 저장되는 형식이 int형이였어요..ㅎ
이제 보시면 정상적으로 블록에서 데이터까지 가져오는걸 확인하실수가 있습니다.
코반이더스캔에서도 tx가 정상적으로 생성되었죠!
이렇게 Kovan같은 네트워크를 사용하면 Ganache를 사용하면서 겪는 불편함 들이 사라집니다.
시간이 되시는 분은 Ropsten이나 Rinkby 이더리움 테스트넷도 한번 사용해보시길 권장드릴게요!