< 작업 목록으로
HASH: 0x0024...2025
Beatoz Scan Frontend
Blockchain Explorer
시스템 설명
1인 개발로 진행한 Beatoz 블록체인 탐색기(Explorer) 프론트엔드입니다. 블록/트랜잭션/검증자/계정/토큰/자산 화면과 실시간 업데이트를 제공합니다.
기술 스택
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 파일로 환경을 분리했습니다.
구현 범위
1인 개발로 진행한 Beatoz 블록체인 탐색기(Explorer) 프론트엔드입니다. 블록/트랜잭션/검증자/계정/토큰/자산 화면과 실시간 업데이트를 제공합니다.
증빙 자료
공개 가능한 증빙 자료가 등록되지 않았습니다.
기술 상세
개요
- ▶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 노드를 환경별로 분리했습니다.