<aside> 📌 Intro

</aside>

이 글은 블록체인 4번째 프로젝트 '거래소 & 익스플로러 제작' 중 익스플로러, 그 중에서도 내가 담당한 ‘차트’를 구현하는 과정을 설명한다.

Stack

프론트엔드 : React.js 백엔드 : Express, MongoDB, Axios

Teamwork Tool

• MongoDB Compass

MongoDB Compass

• Github https://github.com/project4-altcoin/ydcexplorer

익스플로러의 레이아웃은 클레이튼 스코프(https://scope.klaytn.com/)를 참고했다.

클레이튼 스코프의 모습.

요들코인(yordlecoin) 익스플로러

블록 수(Block Height), 차트(시간당 트랜잭션), 최근 블록정보(Recent Transaction) 등의 정보를 담고 있다.

익스플로러의 차트는 크게 2단계를 거쳐 구현된다.

1. 먼저 백엔드에서 express, jsonrpc, 반복문을 통해 빌드한 알트코인(yordlecoin)의 블록 데이터를 읽는다.
2. 읽은 블록 데이터를 프론트에 전달하고, 전달받은 데이터를 가공하여 프론트의 차트에 그려낸다.

1. 백엔드에서 블록 데이터 읽어오기

블록을 한번에 많이 조회하고 그 안에서 필요한 만큼 가공해서 쓰는 방식이다.