P4: NMM X Harmony Wallet-BlockExplorer-txDaemon

1. 역할과 기여

1. 팀장
2. 블록체인 익스플로러 구현
3. 프로젝트 발표 및 문서화

---

2. 프로젝트 소개

1. 프로젝트 배경

원화거래가 이루어지고 있는 거래소에 아직 상장되지 않은 코인 중 상장 될 가능성이 있다고 생각하는 유망한 코인을 분석해보고 해당 코인에 대한 지갑, 익스플로러, 입출금데몬을 만들어 보고자했다.

 

2. 하모니를 선택한 이유

• 향후 거래소에 상장될 유력한 코인 중 하나라 판단했다. (리서치 결과 팀 의견)
• 하모니는 현재 가장 핫한 코인 중 하나이다. (2조 이상 시가총액 & 전체 70위권)
• 현재 블록체인 업계의 중요한 주제인 ‘확장성 해결’ 을 위한 암호화폐라고 생각한다.
• 이더리움의 레이어2 솔루션으로, 이더리움의 향후 미래를 엿볼 수 있어 선택했다.
• 각광받고 있는 샤딩 기술이 어떤 특징을 갖고 있는지 학습하고 싶어 선택했다.

---

3.  블록체인 익스플로러의 기능

데몬으로 특정 시간마다 우리의 데이터베이스로 샤드별 블록과 트랜잭션을 저장한다. 익스플로러에서는 특정시간마다 해당 데이터를 불러와 필터하며 화면에 출력하게 된다. 하모니는 일반 이더리움 네트워크와 다르게 샤드라는 것이 있고 샤드별로 계정이 가진 발란스, 트랜잭션기록, 블록기록이 모두 다르게 된다. 그래서 화면에서 샤드별로 사용자가 원하는 데이터를 볼 수 있도록 처리하는 것이 중요하다.

 

• 최신 블록 실시간 업데이트
• 최신 트랜잭션 실시간 업데이트
• 수동 동기화
• 계정 발란스 및 입출금내역 조회
• 블록 상세 정보 조회
• 트랜잭션 상세 정보 조회
• 샤드별 선택 조회 기능

4. 조건

1. 하모니 테스트 네트워크 기준으로 구현되었다.
2. 샤드 별로 계정 발란스와 트랜잭션, 블록 등 데이터가 다르게 출력된다.
3. 계정 정보 확인 탭에서는 발란스 외 데몬으로 우리의 DB에 적재된 입출금관련 트랜잭션만 출력한다.
4. HRC-20, HRC-721 콤보박스는 구현 중에 있다.
5. 블록 정보와 다르게 트랜잭션 정보는 샤드 별이 아닌 샤드0에 속한 데이터만 보여주고 있다. 이는 사용자가 원하는 샤드 별 정보를 보여주게 할 수 있지만 테스트네트워크는 처리 데이터가 적어 샤드0에서만 처리가 이루어지고 있기 때문이다.
6. 익스플로러를 실행하는 명령어이다.

   server> npm run start
   //서버 실행
   client> npm run start
   //클라이언트 실행

    

5. 개발 방향 및 사용 기술 ( 맡은 역할 중심 )

개발에 앞서 각자 직장이나 업무가 있어 풀타임으로 개발하기는 힘들었고 프로젝트를 진행하는 기간이 1주일 밖에 되지않았기 때문에 개발하고자 하는 3가지 지갑, 익스플로러, tx데몬의 역할을 나누고 지속적으로 하모니에 대한 자료수집을 해서 정보를 공유하면서 개발하는 방향을 잡았다. 나는 데몬같은 경우 이전 프로젝트에서 비슷하게 진행해본 적이 있었고 지갑같은 경우도 크롬익스텐션이 웹을 기반으로 만들어지니 기준으로 정한 코인에 대한 지식만 잘 가지고 있다면 블록 익스플로러와 같이 크게 어려움이 없을거라 생각했다. 블록과 트랜잭션 그리고 샤드를 통한 프론트에 출력이라는 점에서 흥미가 생겨 프론트도 더 공부해보고자하는 마음으로 익스플로러를 개발해보기로 정했다. 

 

tx데몬으로 크론탭을 써서 특정 시간마다 샤드별 블록 정보와 트랜잭션을 DB에 적재하면 블록 익스플로러에서는 특정 시간마다 DB를 조회하여 화면에 출력시키고 화면에서 특정 데이터를 검색하면 DB조회 외에도 하모니 테스트네트워크로 JSON-RPC 요청을 보내고 응답을 받아 화면에서 필요한 데이터를 필터하여 보여주는 식으로 진행하였다.

 

블록 익스플로러와 데몬시스템은 데이터베이스에서 연결되어있고 샤드라는 것이 존재하니 데몬을 만드는 팀원과 계속해서 DB에 적재 할 데이터스키마에 대해 상의를 하였고 처음에 데몬으로 DB에 블록이나 트랜잭션을 쌓기전까지는 목데이터를 직접 몽고DB에 생성하여 테스트하는 과정을 거쳤다. 익스플로러를 만들려면 우선 블록과 트랜잭션의 관계 그리고 우리가 요소를 조회했을 때 나타나는 정보에 대해 기본적으로 이해하고 있어야한다. 또한 샤드 별로 데이터를 표현해야한다는 점에서 샤드와 하모니에 대한 기초학습이 꼭 필요했고 자료를 찾아보면서 하모니에서 제공하는 API doc를 잘 활용하고 이해하는 방식으로 접근하였다.

 

또한 UI디자인을 생각해서 웹에서 구할 수 있는 기본 템플릿을 사용할 수 있었지만 프론트스택을 더 배워보고 익스플로러의 핵심적인 기능을 보여주는데 중점을 두고싶어 직접 UI를 뼈대부터 구현하였고 부족했던 부분과 잊고 있었던 부분들도 상기하며 배워가면서 프론트스택을 쌓는 방향으로 진행하였다.

 

 

[Stack]

 

6. 데이터베이스 구조

샤드에 따른 Block00~03까지 동일한 스키마구조

 

---

7. 개발 회고

Keep & Problem:

-샤드 별로 가진 블록과 정보들이 다르다.

:이는 원하는 데이터를 불러오기 위해선 모든 샤드에 있는 데이터를 찾아봐야합니다. 익스플로러 입장에서는 사용자가 원하는 데이터 얻기 위하거나 원하는 샤드를 선택하여 조회 할 수 있어야 하고 JSON-RPC로 외부에 요청할 때는 샤드 별 다른 엔드 포인트를 써야합니다. 모든 블럭과 트랜잭션을 보여주는 메인프론트에서는 샤드 별 데이터를 모두 불러오면 처리시간이 늦어지게 됩니다. 이는 선택된 샤드에서만 요청을 날려 데이터를 받게 해야했습니다.

 

-State로 저장 중인 원하는 샤드번호가 초기화되어 api를 요청하게 된다.

:콤보박스로 선택한 샤드번호는 State로 저장되어 api를 요청할 때 원하는 엔드포인트로 요청을 처리하게됩니다. 하지만 어떤 샤드를 선택해도 샤드0의 응답만 받고 있어 요청 페이로드를 확인해보니 state가 초기화가 되고 있었습니다. 이를 State로 관리하여 저장 중인 params를 보낼게 아니라 절대적인 값을 날릴 수 있도록 URL에서 추출하여 날려 해결해보았습니다.

 

-지갑을 통한 전송이 이루어지고 나서 익스플로러에서 특정 계정의 입출금을 확인하면 바로 확인 할 수 없다.

:전송이 이루어지면 체인에 기록이 됩니다. 우리의 익스플로러는 데몬으로 외부에서 받은 트랜잭션과 블록 응답을 특정주기마다 DB에 저장시키고 있고 입출금내역은 저장된 DB에서 Filter하여 프론트에 내놓습니다. 전송이 이루어져도 데몬이 블록을 담는 주기를 한번 거치지않았다면 찾을 데이터가 없고 프론트가 보여줄 입출금 내역은 없습니다. 하지만 우리의 빠르고 정확한 Daemon은 다시 우리 DB에 적재를 해줄 것이고 얼마지나지 않아 원하는 정보를 얻을 수 있습니다.

 

Try: 

-블록이 샤드 별로 모든 데이터를 모아 프론트로 가져오고 이것을 보여주기에 처리속도가 느리므로 선택한 샤드별로 데이터를 받게하자 

-메인넷은 더 많은 트랜잭션을 처리하므로 트랜잭션도 샤드별로 출력하게함과 동시에 우리의 DB 공간을 해결 할 방법을 찾아 메인넷도 지원해본다.

-HRC721 관련 데이터 처리도 구현해본다.

 

8. 작동 화면

<익스플로러 메인>

 

---

<검색 기능>

 

---

<샤드 별 기능>

 

 

---

9. 코드 및 주소

< Github >

GitHub - codestates/BTC1stProject-01

 

< Team Notion >

1팀