Beatoz Scan Frontend

1인 개발로 진행한 Beatoz 블록체인 탐색기(Explorer) 프론트엔드입니다. 블록/트랜잭션/검증자/계정/토큰/자산 화면과 실시간 업데이트를 제공합니다.

역할: 1인 개발 · 아키텍처, 구현, 운영 도구
기간: 2025
맥락: Beatoz Labs

01 / 핵심 요약

1인 개발로 진행한 Beatoz 블록체인 탐색기(Explorer) 프론트엔드입니다. 블록/트랜잭션/검증자/계정/토큰/자산 화면과 실시간 업데이트를 제공합니다.

DECISION / A시스템 과제

무엇이 시스템을 어렵게 만들었는가.

실시간 블록/트랜잭션 업데이트를 UI 성능에 영향을 주지 않게 처리해야 했고, 환경별(API/Socket/RPC) 엔드포인트를 분리해 운영/배포 전환이 쉬워야 했습니다.

DECISION / B엔지니어링 해법

어떤 경계와 흐름으로 답했는가.

Vite + React + TypeScript 기반으로 React Router v6 라우팅과 Recoil 전역 상태를 구성했습니다. Axios API 클라이언트와 Web3/RPC 모듈을 구현하고, Web Worker + Socket.IO로 실시간 업데이트를 메인 스레드에서 분리했습니다. env 파일로 환경을 분리했습니다.

03 / 기술 필드

01Vite02React03TypeScript04React Router05Recoil06Axios07Socket.IO08Web Worker09Web3

04 / 상세 기록

개요

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 노드를 환경별로 분리했습니다.

05 / 실제 증거

ACTUAL PROJECT ASSET / NOT GENERATED