이더리움 기반 Dapp 개발 연습 #5 (Truffle React Unboxing)

- Truffle Box는 쉽게 말하면 모듈 패키지이다. 'Boilerpates' 라고도 불리는데 시작 탬플릿 이라고 생각하면 쉬울 것 같다.    정리하면 Truffle Box는 Dapp 개발에 필요한 모듈들을 패키지화 한 것이라고 정의할 수 있다.

  Node.js의 npm으로 모듈 관리를 하며 자바스크립트 기술과 결합되서, 특히 UI + 스마트 컨트랙트로 구현되는 Dapp

  개발환경을 빠르고 쉽게 구성할 수 있도록 한다. create-react-app과 유사한 역할을 한다.

 

- 언박싱을 하기위해 파워쉘로 들어가 react-dapp 디렉토리를 생성하고 truffle unbox react를 해주었다.

  아래와 같은 파일들이 생성되었다.

 

- 이후 client 디렉토리의 package.json을 보자. 아래처럼 dependencies에 truffle-contract가 없는 것을 볼 수 있다.

-  clinent 디렉토리에서 npm install truffle-contract로 모듈을 설치해주자.

 

- 리액트 박스를 설치하고 난 후 정상적으로 동작하는지 확인을 해보자. 우선 가나슈를 실행해준다.

  그리고 truffle compile로 컴파일을 한 번 해준다. 그리고 truffle migrate --network development로

  배포를 해준다. 그전에 우리는 파일을 새로 만들었으므로 truffle-config.js에 가서 네트워크 설정을

  해 주어야 한다는 것을 꼭 기억하자.

 

 

- 배포를 완료했으면 SimpleStorage의 컨트랙트 주소를 복사해두자.

 

- 이제 크롬 웹스토어에서 메타마스크를 깔 것이다. 예전에 메타마스크를 사용했었어서 설치 과정은 생략한다.

  메타마스크 로그인을 한 후 로컬 가나슈 네트워크를 추가해 줄 것이다. 가나슈의 체인 ID는 1337이다.

   

- 메타마스크에 네트워크가 정상적으로 추가되었다면, 이제 가나슈 계정에서 새로만들어진 메타마스크 계정으로

  이더리움을 전송해야 한다. 우선 truffle console --network development로 트러플 콘솔창에 들어간다.

  

- 이후 react-dapp에 send.js 파일을 만들어 아래와 같이 코드를 작성해 주었다.

 

module.exports = function(callback) {
    web3.eth.sendTransaction({
    from: "가나슈 account address",
    to: "메타마스크 account address",
    value:web3.utils.toWei("30", "ether")}, callback);  // 이더리움 전송량 30
}

 

- 코드를 작성 하였으면 트러플 콘솔에서 exec ./send.js로 스크립트를 실행한다.

 

 

- 위와 같이 정상적으로 로컬 가나슈에서 메타마스크로 이더리움을 전송하였다.

  

 

- 이제 파워쉘에서 client 디렉토리를 열고 npm run start를 통해 리액트를 실행해보자

 

 

 

- 위의 트랜잭션을 수락하면 

 

 

- 위와 같이 이더리움이 소모되면서 The stored value 값이 바뀌는 것을 볼 수 있다. 

 

 

 

 

ref) https://www.inflearn.com/course/dapp/dashboard