< 작업 목록으로
HASH: 0x0024...2025
Beatoz Scan Frontend
Blockchain Explorer
시스템 설명
블록, 거래, 검증자, 계정, 토큰을 탐색하는 Beatoz 블록체인 익스플로러 프론트엔드입니다. 실시간 블록·거래 업데이트를 Web Worker에서 처리해 메인 UI의 부담을 줄였습니다.
기술 스택
ViteReactTypeScriptReact RouterRecoilAxiosSocket.IOWeb WorkerWeb3
ROLE: SOLO_DEVELOPERDOMAIN: BLOCKCHAIN
!
문제도전 과제
실시간 블록/트랜잭션 업데이트를 UI 성능에 영향을 주지 않게 처리해야 했고, 환경별(API/Socket/RPC) 엔드포인트를 분리해 운영/배포 전환이 쉬워야 했습니다.
✓
해결해결 방식
Vite + React + TypeScript 기반으로 React Router v6 라우팅과 Recoil 전역 상태를 구성했습니다. Axios API 클라이언트와 Web3/RPC 모듈을 구현하고, Web Worker + Socket.IO로 실시간 업데이트를 메인 스레드에서 분리했습니다. env 파일로 환경을 분리했습니다.
구현 범위
블록, 거래, 검증자, 계정, 토큰을 탐색하는 Beatoz 블록체인 익스플로러 프론트엔드입니다. 실시간 블록·거래 업데이트를 Web Worker에서 처리해 메인 UI의 부담을 줄였습니다.
증빙 자료
공개 가능한 증빙 자료가 등록되지 않았습니다.
기술 상세
개요
- ▶1인 개발로 진행한 Beatoz 블록체인 탐색기 프론트엔드입니다.
핵심 구성
1) 빌드/진입점
- ▶Vite 기반 빌드 및 앱 진입점(
src/main.tsx→src/app-entry.tsx)을 구성했습니다.
2) 라우팅/상태 관리
- ▶React Router v6로 도메인 라우팅을 구성하고, Recoil로 전역 상태(atom)를 관리했습니다.
3) API/Web3 연동
- ▶Axios 인스턴스(
VITE_API_URL) 기반 REST 호출과 RPC(Web3) 연동 모듈을 구성했습니다.
4) 실시간 업데이트
- ▶Web Worker + Socket.IO로 블록/트랜잭션 실시간 수신을 처리했습니다.
5) 환경 분리
- ▶env 파일로 API/Socket/RPC 노드를 환경별로 분리했습니다.