Meteor로 Dapp 만들기 - ethereum:account로 개인 지갑(Wallet)앱 만들기(1) - 화면 만들기

오늘의 목표는 간단합니다.
Metamask에서 접속한 지갑의 잔액을 조회하는 화면을 구성해 보는 것입니다.
result
이런 걸 구현해봅니다.

이번 글부터 보시는 분이라면 Meteor 설치 후

meteor create dapp1

과 같이 새로 Project를 생성하시고 이전 글을 보신 분이라면 계속 따라해보시면 됩니다.

먼저, 화면을 구성해봅니다.
현재 Meteor 1.5 기준으로 프로젝트를 생성하면

`-.meteor
`-client
 `-main.css
 `-main.html
 `-main.js
`-server
 `-main.js

이런 구조일 것입니다.
main.js는 다시 쓸 것이니 깨끗하네 내용을 지우거나 파일을 삭제하시고
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">0x1111111</span>
    </div>
    <div>
        <label for="balance">Balance</label>
        <span id="balance">100000 Wei(ETH)</span>
    </div>
</template>

UI layout

client/main.html은 간단한 코드지만 약간 설명해야할 부분이 있습니다.
Meteor에서는 기존에 존재하는 front-end template engine(ex. angular, react, vue 등등)을 사용할 수 있지만 별다른 옵션없이 생성하였을 경우엔 Blaze template을 사용하여 HTML 요소를 구성할 수 있습니다.

기존 html과 다른 점을 몇가지 발견할 수 있는데

<html></html>태그가 없다.
{{ }} 로 감싼 형태의 helper를 사용.
<template name="TemplateName"> 형태의 html 코드 조각을 구성.
이는 Blaze(handlebars에서 시작해서 개량을 거친 Template Engine) 자체의 특성으로 별다른 빌드 스크립트 없이 코드를 작성하는 것만으로 지속적인 개발과 실행을 반복하도록 합니다.

`<html></html>`태그가 없다.

Blaze에선 html 파일 이름은 중요하지 않습니다. 생성한 html 파일들을 Meteor 가 자동으로 이어붙입니다.
따라서 html tag는 파일들을 전부 모은 후에 마지막에 추가합니다.
또한, js 파일이나 css 파일들은 따로 <script>나 <link> 태그로 직접 추가하지 않아도 알아서 불러옵니다.
단, 글꼴이나 이미지 같은 경우 경로를 직접 지정하기 위해 ./public 디렉토리안에 넣고 사용할 수 있습니다.

{{ }} 로 감싼 형태의 helper를 사용.

동적인 화면 구성과 내용 분리를 위해 {{ }} (오른쪽으로 회전한 모습이 자전거 핸들 같다고 해서 handlebar라고 합니다) 기호를 사용합니다.
{{helper (argument)}}와 같이 helper 이름을 써서 js로부터 값을 받아오고
다른 템플릿을 참조할 때 >과 함께 {{> 템플릿이름 }} 형식으로 가져올 수 있습니다.

`<template name="TemplateName">` 형태의 html 코드 조각을 구성.

Single Page 형태의 HTML 문서를 구성하다보면 한 파일에 너무 긴 코드를 작성하게 되어 효율적이지 않습니다.
{{> }}와 함께 의미있는 단락을 기준으로 문서를 나눌 수 있습니다.
예를 들어 아래와 같이

  <h1>Menu</h1>
  {{> side}}
....

<template name="side">
  <ul>
    <li>Menu1</li>
    <li>Menu2</li>
  </ul>
</template>

template을 사용했을 경우 실제로 화면에 보일 땐

  <h1>Menu</h1>
  <ul>
    <li>Menu1</li>
    <li>Menu2</li>
  </ul>

이와 같이 template 내용이 {{> }} helper 안으로 들어갑니다.
Template 안에서 Template을 불러들이는 것도 역시 가능합니다.

자세한 내용은 http://blazejs.org/guide/spacebars.html#Template-inclusion 을 참조하시길 바랍니다.

다음으로 계속 진행해 봅니다.
임의로 html 문서안에 Wallet Address와 Balance값을 넣었는데 이걸 프로그램, 즉 javascript(이하 js)에서 받아오도록 변경해 봅시다.
Helper를 사용하여 html template과 js를 연결합니다.

<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>

이런 식으로 main template 을 변경해봅니다.
add helpers
이렇게 나올 것입니다.
{{address}}와 {{balance}}를 지정하지 않았기 때문이죠.
하지만 별다른 오류를 발생하지 않고 nil, undefined, [object] 등과 같은 당혹스러운 결과를 보여주지도 않습니다. 나쁘지 않은 기분이군요 :)

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

빠르게 정상화 시켜봅니다.
아까와 같은 상태로 돌아갔지만 이제 모르는 코드가 나왔네요.
궁금하시죠?

궁금하시면 팔로우(follow) 눌러주시고 다음편을 기다려주세요 :)

Meteor로 Dapp 만들기 - ethereum:account로 개인 지갑(Wallet)앱 만들기(1) - 화면 만들기

<html></html>태그가 없다.

{{ }} 로 감싼 형태의 helper를 사용.

<template name="TemplateName"> 형태의 html 코드 조각을 구성.

`<html></html>`태그가 없다.

`<template name="TemplateName">` 형태의 html 코드 조각을 구성.