Meteor로 Dapp 만들기 - ethereum:account로 개인 지갑(Wallet)앱 만들기(2) - Helper를 사용한 Data 연결하기

acidsound (48)in #dapp • 7 years ago (edited)

지난 글에서 잘 따라왔다면
./client/main.html

<head>
  <title>dapp1</title>
</head>

<body>
{{> main}}
</body>

<template name="main">
    <h1>My ethereum wallet</h1>
    <div>
        <label for="wallet">Wallet Address</label>
        <span id="balance">{{address}}</span>
    </div>
    <div>
        <label for="balance">Balance</label>
        <span id="balance">{{balance}} Wei(ETH)</span>
    </div>
</template>

./client/main.js

Template.main.helpers({
  address() {
    return '0x1111111111';
  },
  balance() {
    return '100000';
  }
})

처음 프로젝트에서 이 두개의 파일을 변경한 상태일 것입니다.
http://blazejs.org/guide/spacebars.html#Attribute-Helpers 참조하세요.

{{attribute}}로 사용한 것은 javascript(이하 js)에서 Template.<템플릿이름>.helpers 함수에 object형태로 인자를 넘겨 정의할 수 있습니다.
html 에서 <template name="main">에서 사용한 name 속성인 main과 같은 이름으로 Template.main.helpers 호출하고 key/value 형태의 JSON Object를 넘겨줍니다.
원래대로 JSON Object형태라면

{
  address: '0x1111111111',
  balance: '100000'
}

와 같은 모양이겠지만 주소(address)와 잔액(balance)은 언제나 변할 수 있습니다. 심지어는 화면을 보고 있는 도중에도 말이죠.
그런 경우를 가정하여 값으로 함수를 넘겨주도록 합니다.

{
  address: function() {
    return '0x1111111111';
  },
  balance: function() {
    return '100000';
  }
}

Meteor는 자체적으로 babel을 통한 ECMA6를 지원합니다.
따라서 function을 값으로 갖는 경우엔

{
  address() {
    return '0x1111111111';
  },
  balance() {
    return '100000';
  }
}

이와 같이 function을 축약해서 사용할 수 있습니다. function을 매번 functino로 오타를 내는 저에겐 꽤 유용했습니다 :)

이렇게 각각 helper를 줄 수도 있지만 address와 balance를 account라는 하나의 object로 묶어서 보낸다고 치면 어떻게 할까요?

{
  account() {
    return {
      address: '0x1111111111',
      balance: '100000'
    };
  }
}

그리고 template에선 {{address}}, {{balance}} 대신 {{account.address}}, {{account.balance}} 를 통해 받을 수 있습니다.
여기까지 적용해 보면
./client/main.html

<template name="main">
    <h1>My ethereum wallet</h1>
    <div>
        <label for="wallet">Wallet Address</label>
        <span id="balance">{{account.address}}</span>
    </div>
    <div>
        <label for="balance">Balance</label>
        <span id="balance">{{account.balance}} Wei(ETH)</span>
    </div>
</template>

./client.main.js

Template.main.helpers({
  account() {
    return {
      address: '0x1111111111',
      balance: '100000'
    };
  }
});

이와 같습니다.
helpers 에서 두번 return 하던 것이 줄어들어서 기분이 좋습니다.

만일 account 하나가 아니라 accounts라는 이름으로 여러개의 계정이 있다면 어떨까요?

Template.main.helpers({
  accounts() {
    return [
      {
        address: '0x1111111111',
        balance: '100000'
      },
      {
        address: '0x2222222222',
        balance: '200000'
      }
    ];
  }
});

이와 같은 배열(Array)형태로 들어오겠죠.
우리는 여기서 Block helpers를 사용하여 간단하게 복수 array를 처리할 수 있습니다.
기존의

    <div>
        <label for="wallet">Wallet Address</label>
        <span id="balance">{{account.address}}</span>
    </div>
    <div>
        <label for="balance">Balance</label>
        <span id="balance">{{account.balance}} Wei(ETH)</span>
    </div>

html template을 수정하여
accounts에서 하나씩 account를 뽑아내도록 {{#each account in accounts}}로 시작해서 {{/each}}로 끝나는 Blockhelper로 감싸줍니다.

    {{#each account in accounts}}
    <div>
        <label for="wallet">Wallet Address</label>
        <span id="balance">{{account.address}}</span>
    </div>
    <div>
        <label for="balance">Balance</label>
        <span id="balance">{{account.balance}} Wei(ETH)</span>
    </div>
    {{/each}}

브라우저를 봅니다.
multi accounts
여기까지 어떠셨나요?
일단 화면 구성은 여기까지입니다.