시리즈 마지막 편입니다. 이번에는 코드 이야기가 아니라 프로젝트를 만들면서 느낀 점, 그리고 실제 프로덕션 트레이딩 플랫폼을 만든다면 어떤 점들을 더 고려해야 하는지 정리해봤습니다.전체 소스코드는 GitHub에 공개되어 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 이 프로젝트를 만들었는가평소에 궁금했던 게 있었습니다. 주식이든 코인이든, 트레이딩 화면을 보면 숫자가 쉴 새 없이 바뀝니다. 호가창, 체결 내역, 캔들 차트가 동시에 움직입니다. 이걸 프론트엔드에서 어떻게 처리하는 걸까?React로 일반적인 CRUD 앱을 만..

업비트 실시간 대시보드 시리즈 마지막 편입니다. 호가창(Order Book)을 3가지 방식으로 구현하고 실제 성능을 비교해봤습니다.전체 소스코드는 GitHub에 공개되어 있습니다. /benchmark 페이지에서 3가지 방식의 성능 차이를 직접 확인할 수 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev# http://localhost:3000/benchmark 접속1. 왜 호가창이 어려운가?호가창은 프론트엔드에서 구현 난이도가 가장 높은 컴포넌트 중 하나입니다. 이유는 단순합니다.업비트 WebSocket으로 초당 10~20회 호가 ..

업비트 실시간 대시보드 시리즈 2편입니다. 이전 글에서 WebSocket 파이프라인을 구축했고, 이번에는 그 위에 캔들 차트를 올립니다. REST API로 과거 200개 캔들을 불러오고, WebSocket 체결 데이터로 마지막 캔들을 실시간 업데이트하는 구조입니다.전체 소스코드는 GitHub에 공개되어 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 TradingView Lightweight Charts인가?금융 차트 라이브러리를 고를 때 D3.js, Recharts, ECharts 등을 검토했습니다. 결론은 Lightwe..

업비트 Public WebSocket API를 사용해서 실시간 암호화폐 트레이딩 대시보드를 만들어본 기록입니다. 이번 1편에서는 WebSocket 연결부터 React 훅으로 래핑하는 과정까지 다룹니다.전체 소스코드는 GitHub에 공개되어 있습니다. 직접 클론해서 돌려보실 수 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 WebSocket인가?실시간 암호화폐 데이터를 프론트엔드에서 보여주려면 선택지가 몇 가지 있습니다. Polling, SSE(Server-Sent Events), WebSocket.호가창은 초당 10~20..