Meteor로 Dapp 만들기 - ethereum:account로 개인 지갑(Wallet)앱 만들기(1) - 화면 만들기
오늘의 목표는 간단합니다.
Metamask에서 접속한 지갑의 잔액을 조회하는 화면을 구성해 보는 것입니다.
이런 걸 구현해봅니다.
이번 글부터 보시는 분이라면 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>
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 을 변경해봅니다.
이렇게 나올 것입니다.
{{address}}와 {{balance}}를 지정하지 않았기 때문이죠.
하지만 별다른 오류를 발생하지 않고 nil, undefined, [object] 등과 같은 당혹스러운 결과를 보여주지도 않습니다. 나쁘지 않은 기분이군요 :)
Template.main.helpers({
address() {
return '0x1111111111';
},
balance() {
return '100000';
}
})
빠르게 정상화 시켜봅니다.
아까와 같은 상태로 돌아갔지만 이제 모르는 코드가 나왔네요.
궁금하시죠?
궁금하시면 팔로우(follow) 눌러주시고 다음편을 기다려주세요 :)
#kr 태그와 함께 개발자 태그인 #kr-dev 태그를 붙여주시면 더 많은 분들이 보실 수 있을것 같습니다 :)
tag를 좀 줄여야겠군요. 좋은 의견 고맙습니다.