[Klaytn] CountBApp

- Clone

CountBApp

GitHub - klaytn/countbapp

$ git clone https://github.com/klaytn/countbapp.git

 

 

- 오류 해결

node 버전이 node-sass 버전을 지원하지 않아 오류가 발생하는데, 이 때 node-sass 버전을 높이면 이후에 또 다른 오류가 발생한다.

그래서 nvm을 이용하여 node 버전을 낮추어주었다.

$ nvm install 14.5.4
$ nvm use 14.5.4

 

 

- 실행

$ npm install
$ npm run local

 

https://localhost:8888

https://127.0.0.1:8888

https://0.0.0.0:8888

 

 

 

---

 

- 디렉터리 구조

|-- contracts
|-- migrations
|-- truffle-config.js
|-- static  
|-- src  
    |-- styles
    |-- klaytn
      |-- caver.js
    |-- components
      |-- BlockNumber.js
      |-- Auth.js
      |-- Count.js
    |-- index.js
    |-- App.js
    |-- routes.js

contracts/ : 컨트랙트 소스 파일

migrations/ : 컨트랙트 배포를 처리하는 자바스크립트 파일

truffle-confg.js/ : 트러플의 환경설정 파일

static/ : 이미지 등의 정적파일

src/styles : CSS 파일

src/index.js : index 파일, ReactDOM.render 로직 존재

src/App.js : 루트 컴포넌트 파일

src/routes.js : route 정의

src/components : 프론트엔드 컴포넌트 파일

- BlockNumber.js : 현재 블록 넘버

- Auth.js :  로그인 기능

- Count.js : 배포된 컨트랙트를 이용한 상호작용

src/klaytn/caver.js : caver-js 인스턴스화

 

 

-  스마트 컨트랙트

솔리디티 버전을 지정한다.

pragma solidity ^0.5.6;

 

컨트랙트 이름을 지정한다.

contract [컨트랙트이름] { }

 

변수와 함수를 정의한다.

Count 컨트랙트는 plus 함수와 minus 함수가 존재하고, 마지막 참가자 주소를 저장한다.

uint256 public count = 0;
address public lastParticipant;

function plus() public {
    count++;
    lastParticipant = msg.sender;
}

function minus() public {
    count--;
}