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

acidsound

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

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

지난 글에서 잘 따라왔다면
./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}}

브라우저를 봅니다.

여기까지 어떠셨나요?
일단 화면 구성은 여기까지입니다.

helper를 사용하여 js에서 template으로 값을 전달하고
object를 반환하여 a.b 스타일의 dot notation으로 하위 키 값을 접근도 해보았고
helper가 복수개의 배열(Array)일때 {{#each.. in}}을 사용해서 반복하는 것도 해보았습니다.

다음엔 ethereum:accounts를 사용하여 실제 ethereum 계정과 연결해봅니다.

Stay tune! 팔로우 하시고 Upvote 해주세요!

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

Written by acidsound

function과 reactive를 좋아하는 플루티스트

Best Posts From acidsound

We have not curated any of acidsound's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

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