Beatoz Scan Frontend
블록, 거래, 검증자, 계정, 토큰을 탐색하는 Beatoz 블록체인 익스플로러 프론트엔드입니다. 실시간 블록·거래 업데이트를 Web Worker에서 처리해 메인 UI의 부담을 줄였습니다.
블록, 거래, 검증자, 계정, 토큰을 탐색하는 Beatoz 블록체인 익스플로러 프론트엔드입니다. 실시간 블록·거래 업데이트를 Web Worker에서 처리해 메인 UI의 부담을 줄였습니다.
무엇이 어려웠는가.
새 블록과 거래를 실시간으로 갱신하면서도 화면의 스크롤과 입력이 느려지지 않아야 했고, 배포 환경마다 API·Socket·RPC 주소를 바꿀 수 있어야 했습니다.
어떻게 풀었는가.
블록과 거래 수신을 Web Worker와 Socket.IO로 옮겨 메인 스레드와 분리했습니다. REST와 RPC 모듈은 공통 클라이언트로 묶고, 환경별 주소는 env 설정으로 나눴습니다.
ViteReactTypeScriptReact RouterRecoilAxiosSocket.IOWeb WorkerWeb3
개요
- 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 노드를 환경별로 분리했습니다.