지나가던 컴공생

- 리액트는 컴포넌트 상태(start)로 내부 상태를 관리한다. 만약 컴포넌트의 state를 변경하면(setState) 다시 렌더링된다. (이벤트 -> state 변경 -> 렌더링) - 우선 홈페이지를 귀여운 도지로 조금 꾸며보았다. 부트스트랩 버전에 따라서 사용법이 상이하므로 독스를 참고 바란다. 필자는 5버전 이상을 사용하였다. docs : https://getbootstrap.com/docs/5.0/forms/overview/ - CoinFlip.js에 컴포넌트 상태 코드를 넣어주자. // 컴포넌트 상태 state = { web3: null, accounts: null, contract: null, value: 0, checked: 0, // radio button houseBalance: 0, s..

- 사실 여기서부터는 버전 이슈때문에 인프런 강의와는 달라져서 강의와 다소 상이할 수 있다. - 이제 화면을 본격적으로 구성해 볼 것이다. 우선 동전의 앞, 뒤, 그리고 unknown 이미지를 public 폴더에 넣어준다. 그리고 src에 CoinFlip.js, src/css에 style.css 파일을 생성해준다. 우선 CoinFlip.js 파일을 작성하자 # CoinFlip.js import React, {Component} from "react"; import {Container, Row, Col, Panel, Image} from 'react-bootstrap'; import "./css/bootstrap.min.css"; import "./css/style.css"; class CoinFlip e..

- 이 Dapp의 화면을 구성하기 위해서 리액트의 부트스트랩을 사용할 것이다. 화면구성에 대한 대략적인 그림은 다음과 같다. - 프로젝트의 구조이다. public 폴더안에 index.html이 메인 홈페이지를 담당하는 html코드이고, src에 index.js가 리액트 관련 코드이다. - 아래는 화면을 구성하는 코드의 예이다. - 이제 react-bootstrap 모듈을 설치하자. 설치는 client 디렉토리에서 npm install react-bootstrap 명령어를 통해 설치할 수 있다. 이후 client/src 디렉토리에 bootstrap의 css와 fonts 파일들을 복사한다(링크). 다음으로 App.js를 약간 수정해준다. #App.js import React, { Component } fro..

- 전 글에서 작성한 코드가 제대로 작성되었는지 단위테스트를 진행해 볼 것이다. 단위테스트 목록은 다음과 같다. 1. 컨트랙트 배포자가 아니면 kill() 메소드가 실행되어서는 안된다. 2. 컨트랙트에 5 ETH를 전송하면 컨트랙트의 잔액은 5 ETH가 되어야 한다. 3. 0.1 ETH를 베팅하면 컨트랙트의 잔액은 5.1 ETH가 되어야 한다. 4. 플레이어는 베팅을 연속해서 두 번 할 수 없다(베팅한 후에는 항상 결과를 확인해야 한다). const coinFlips = artifacts.require("CoinFlips"); contract("CoinFlips", function(accounts) { // 컨트랙트 배포자가 아니면 kill() 메소드가 실행되어서는 안된다. it("self-destruc..

- 솔리디티 문법 중 몇 가지 추가로 알아두어야 할 것들이 있다. - storage : 함수내부에 선언된 로컬 변수가 레퍼런스 타입의 상태변수를 참조할 때 사용 (상태변수를 가리키는 포인터) - pure : pure가 붙은 메소드가 계정의 상태정보에 영향을 주지 않는 메소드라는 의미 (생략가능) - external : 다른 컨트랙트나 트랜잭션을 통해서만 호출될 수 있다. f()는 동작하지 않지만 this.f()는 동작한다. - internal : 내부적으로만 접근할 수 있음. 접근을 위해 this를 사용할 수 없다. - 솔리디티에는 null이 없음 address(0)이 null과 같은 의미 pragma solidity >=0.4.22 =0.4.24 Bet) bets; event Reveal(address..

- 지금까지는 아래 그림과 같이 자바스크립트 코드에서 ABI(application binary interface)를 참조하게 만들어 주었다. 이제부터는 ①번에 해당하는 솔리디티 구현을 해 볼 것이다. - 동전 던지기 게임을 구현할 것인데 아래 그림은 컨트랙트의 주요 로직이다. - 솔리디티에는 계정주소를 담는 address라는 타입이 있다.또한 솔리디티에서는 금액(value)의 단위를 설정하지 않으면 최소단위인 wei로 간주한다. 아래는 관련 코드이다. cf) 1 wei = 1 x 10^(-18) ETH address owner; // 계정 주소를 담을 수 있는 타입 // 생성자 constructor() public { owner = msg.sender; // 컨트랙트 관리를 위해 컨트랙트 소유자를 기록 ..

- Truffle Box는 쉽게 말하면 모듈 패키지이다. 'Boilerpates' 라고도 불리는데 시작 탬플릿 이라고 생각하면 쉬울 것 같다. 정리하면 Truffle Box는 Dapp 개발에 필요한 모듈들을 패키지화 한 것이라고 정의할 수 있다. Node.js의 npm으로 모듈 관리를 하며 자바스크립트 기술과 결합되서, 특히 UI + 스마트 컨트랙트로 구현되는 Dapp 개발환경을 빠르고 쉽게 구성할 수 있도록 한다. create-react-app과 유사한 역할을 한다. - 언박싱을 하기위해 파워쉘로 들어가 react-dapp 디렉토리를 생성하고 truffle unbox react를 해주었다. 아래와 같은 파일들이 생성되었다. - 이후 client 디렉토리의 package.json을 보자. 아래처럼 dep..

- 이번엔 truffle을 사용하여 단위 테스트를 해볼 것이다. 자바스크립트 또는 솔리디티로 테스트 스크립트를 작성하여 단위 테스트를 수행할 것이다. 자바스크립트 테스트 프레임워크 mocah를 기반으로 contract 함수를 사용할 것이다. 단위 테스트 묶음 contract()에서는 각 단위 테스트 케이스의 결과를 공유하므로 순서를 고려해야 한다. 대부분의 메소드들은 비동기적으로 동작하므로 결과도 비동기적으로 작성해야 한다(Promise, aysnc/await). - 아래코드를 test 디렉토리에 test_hello.js 파일을 만들어 작성하자. var hello = artifacts.require("HelloWorld"); contract("HelloWorld", function() { // say 메..

- 배포(deploy)관련 파일은 migration 폴더에 생성해준다. 파일이름은 2_deploy_HelloWorld.js로 하겠다. var hello = artifacts.require("HelloWorld"); module.exports = function(deployer) { deployer.deploy(hello, "Hello, World!"); } - 아래 코드에 에는 ABI를 입력하고, 에 ByteCode를 입력하면 배포를 할 수 있다. 하지만 번거롭고 실수할 여지가 많다. truffle을 사용하면 개발자가 이를 신경쓰지 않아도 된다. - 아래코드는 truffle-config.js의 코드중 일부이다. 배포 타겟을 설정하는 코드로, 아래와 같이 입력하면 로컬 가나슈에 배포하기위한 코드이다. //..

- 이번에는 솔리디티로 간단한 프로그램을 짜 볼것이다. - 이후 파워쉘(관리자)에서 임시로 디렉토리를 생성한 뒤, truffle init 한다. - intelij에서 해당 디렉토리를 open 해주고 contract 디렉토리에 동일한 이름으로 sol 파일을 만든다. - 컴파일 테스트를 위해 아래 코드를 입력한다. pragma solidity ^0.5.4; // 버전 프라그마 (해당 버전 아래에서는 컴파일링 안된다는 뜻) contract HelloWorld { string public greeting; // 생성자 constructor(string _greeting) public { greeting = _greeting; } function setGreeting(string _greeting) public ..