이번 세미나는 10장. Our Larger DApp을 다룹니다.

이전 세미나에서 진행했던 내용과 어느 정도 일관성을 맞추기 위해 본문 내용을 일부 변경했습니다.

Starting with React Truffle Box

세미나 9에서 진행한 내용을 참고해서 fundraiser-dapp 프로젝트를 셋업합니다.

컨트랙트와 배포 스크립트는 이전 세미나(5, 6, 7)에서 작성한 fundraiser 프로젝트를 참고해서 작성합니다.
오픈제플린을 설치합니다.
- 프로젝트 디렉토리의 하위 디렉토리인 client로 이동해서 설치합니다.
  - npm install @openzeppelin/contracts
    - 웹 클라이언트 node module들과 함께 관리하기 위해서 입니다.
truffle-config.js에 솔리디티 컴파일러 버전을 “0.6.0” 또는 그 이상 버전으로 설정합니다. 이전 세미나 내용을 참고합니다.
- 최신 버전의 오픈제플린 컨트랙트에 컴파일러 버전이 ^0.6.0으로 명시되어 있습니다.
Fundraiser 컨트랙트를 변경합니다.
- 오픈제플린 설치 경로가 바뀌었기 때문에 임포트 경로를 변경해 줘야 합니다.
  - import ‘../client/node_modules/@openzeppelin/contracts/access/Ownable.sol’;
  - import ‘../client/node_modules/@openzeppelin/contracts/math/SafeMath.sol’;
- 솔리디티 버전 0.6.0 이상에서는 fallback 함수를 작성하는 방법이 바뀌었습니다. 자세한 내용은 아래 솔리디티 보강 부분을 참고합니다.
  - fallback() external payable로 함수 선언 부분을 바꿉니다.
트러플 개발 모드를 실행하고, 컨트랙트를 컴파일하고 배포합니다.

메타마스크 네트워크 변경 및 계정 임포트

세미나 9를 진행했다면 이 부분은 건너 뜁니다.
- 트러플 개발 모드는 동일한 니모닉을 생성하기 때문에 다시 실행해도 동일한 계정이 생성됩니다.

웹 클라이언트 UI 작성

리액트를 학습하기 위한 세미나가 아니기 때문에 UI 작성 부분은 본문 내용이 뭘 하려는 것인지 정도만 알고 넘어갑니다. UI 코드는 깃헙 코드를 복사해서 사용하거나 본문 내용을 참고해서 작성해 봅니다.

세미나 9를 통해 학습한 내용을 기반으로 UI의 어느 부분에 어떤 컨트랙트 관련 코드를 작성할 것인지에 대해서 알면 됩니다.

실제로 컨트랙트 관련 코드는 얼마 되지 않습니다. 아래 정리한 내용을 주의 깊게 다시 한 번 읽어 봅니다.

Creating Our New Fundraiser Page View

기금 모금 생성 정보에 따라 기금 모금을 생성합니다.

const handleSubmit = async () => { 
  await contract.methods.createFundraiser(
    ...).send({ from: accounts[0] })

const handleSubmit = async () => {

await contract.methods.createFundraiser(

...).send({ from: accounts[0] })

컨트랙트 호출은 비동기로 처리됩니다.

상태를 변경하므로 send에 해당합니다.

msg.sender로 accounts[0]을 설정합니다.

Displaying the Current Fundraisers List

기금 모금 목록을 구합니다. 기금 모금 목록의 개별 항목은 기금 모금 컨트랙트의 주소 입니다. 이 주소를 가지고 기금 모금 컨트랙트 인스턴스를 생성한 후 기금 정보를 구합니다.

const funds = await instance.methods.fundraisers(10, 0).call()
...

const instance = new web3.eth.Contract(FundraiserContract.abi, fund)
...

const name = await instance.methods.name().call()
const description = await instance.methods.description().call()
...

const funds = await instance.methods.fundraisers(10, 0).call()

...

const instance = new web3.eth.Contract(FundraiserContract.abi, fund)

...

const name = await instance.methods.name().call()

const description = await instance.methods.description().call()

...

솔리디티 보강

폴백 함수

폴백 함수는 데이터 없이 이더만을 전송하는 트랜잭션을 받거나 정의된 함수가 아닌 이름으로 호출될 때 실행되는 함수입니다.
솔리디티 0.6.0 부터는 폴더 함수의 두 가지 사용 사례를 각각 지원할 수 있도록 두 개의 함수로 분리했습니다.
- 이더 만을 전송하는 트랜잭션을 받았을 때(데이터가 비어 있는) 처리하는 함수는 receive입니다.
  - function keyword를 사용하지 않습니다. external payable로 작성합니다.
    - receive() external payable
- 데이터에 명시된 함수 이름이 없을 때나 데이터가 비어 있고 이더만 전달될 때 receive가 없을 때에 처리하는 함수는 fallback입니다. 즉 호출할 적당한 함수가 없을 때 실행합니다.
  - function keyword를 사용하지 않습니다. external로 작성합니다.
  - 이더를 받아야 한다면 payable을 작성해야 합니다. payable은 선택적입니다.
    - fallback() external payable