JavaScript로 블록체인 만들기 #6
Javascript 로 블록체인 만들기 6단계입니다.
#6 UI 와 블록체인 탐색기
이제 Javascript 로 블록체인 만들기 시리즈의 마지막 6단계이다. 이번 단계에서는 실제 거래의 진행 상황 그리고 특정 지갑 주소의 잔고 등을 보여주는 UI 를 구현하였다.
main.ts 에서만 약간의 변화가 있다. [1]
개요
이번 챕터에서는 지갑의 UI와 블록체인 explorer 를 생성할 것이다. 이미 지금까지 구현해 온 노드는 HTTP 엔드포인트와 연결되어있기에 보여주고자 하는 결과를 시각화 할 수 있는 웹페이지를 만들려고 한다.
구현하기 위해서는, endpoint 를 추가하고 노드 설정을 해야한다.
아래의 상황들이 추가된 endpoint 와 설정된 노드를 사용하는 대표적인 상황예시일 것이다 :
- 블록과 거래에 대한 정보를 쿼리(query) 하기
- 특정 주소에 대한 정보를 쿼리(query) 하기
구현할 코드는 여기서 볼 수 있고 UI 부분은 여기서 볼 수 있다.
새로운 endpoints
블록 해시가 알려졌을 경우, 유저가 특정 블록을 쿼리 할 수 있는 endpoint 를 추가해보자.
특정 거래에 대한 쿼리를 하는 것 역시 비슷한 과정을 거친다 :
또한 특정 주소에 대한 정보도 보여주고자 한다. 해당 주소와 일치하는 UTXO 의 리스트를 반환하고 이를 통해 해당 주소의 잔고를 계산하려고 한다.
또한 이미 사용된 출력값에 대한 정보도 더하려고 한다. 이렇게 되면, 해당 주소와 연관된 거래 내역 전부를 볼 수 있게 된다.
프론트엔드
지갑과 블록체인 탐색기 UI 구현에는 Vue.js 가 사용되었다. 이 튜토리얼은 Front end 개발에 대해 다루는 것은 아니기에 코드 단까지 들어가 설명하지는 않겠다. UI 관련 repository 는 여기에 있다.
블록체인 탐색기
Blockchain Explorer, 블록체인 탐색기는 거래 및 주소에 대한 정보를 볼 수 있는 웹사이트이다. 전형적인 블록체인 탐색기는 특정 주소의 잔고를 파악하는 과정과 특정 거래가 블록체인에 포함되어 검증되었는지 확인하는 과정을 시각화해준다.
구현 방식 그 자체는 조금 간단히 하고자 한다. 요청을 노드에게 보내면 특정 방법으로 답변을 하는 방식으로 구현하려고 한다.
정보에 대한 답변을 얻는 형식의 요청만 보낼 뿐, 블록체인의 상태를 변화시키는 요청을 보내지는 않는다. 블록체인 탐색기는 요청한 정보에 대한 답변을 시각화하는 것으로 그 역할을 다한다.
블록체인 탐색기의 모습은 밑에 있다:
지갑 UI
지갑 UI도 웹사이트로 구현하려고 한다. 이를 통해 유저는 코인을 보낼 수 있고 해당 주소의 잔고를 볼 수 있을 것이다. transaction pool 도 보여주려고 한다.
지갑 UI 스크린샷은 아래에 있다 :
마무리
개발을 하시는 모든 분들은 공감 하겠지만, 100번 듣고 보고 공부하는 것보다는 한번 직접 구현해보고 그 결과를 보는 것이 더 잘 와닿는다. 필자도 그런 생각에 한번 직접 구현해보자는 마음에 여러가지 참고자료를 찾아보았다.
더 많은 언어로 구현해보고 싶은 마음에 저번에 진행했던 Python 으로 블록체인 만들기에 이어서 이번에 Javascript 로 블록체인 만들기도 진행하게 되었다.
해당 시리즈를 진행할 수 있게 허락해준 원작가에게 다시 한번 감사의 인사의 말씀을 올리며, 동시에 해당 시리즈가 많은 다른 블록체인 개발자들에게 조금이라도 도움이 되었으면 한다.
해당 시리즈 관련 문의 혹은 블록체인 내 다른 주제라도 같이 협업하거나 문의 사항이 있다면 언제든지 연락해주십시오
Facebook : https://www.facebook.com/CAUCLink/
Medium : https://medium.com/caulink
[1] main.ts 는 아래와 같은 변화가 생겼다.
app.get(‘/block/:hash’) 추가
app.get(‘/transaction/id’) 추가
app.get(‘/address/:address’) 추가
