10장 프론트엔드에 전문가의 향기 입히기
📂 상위 파트:[파트 2] 심화: 데이터 수집과 테이블 단순한 페이지를 ‘서비스’로 바꿔주는 내비게이션과 디자인 디테일입니다. 📋 이 챕터의 하위 글 10-1. 차트 고도화: 이동평균선 및 반감기 차트 구현 10-1. 대시보드 및 자산 상세 페이지 구성…
9-4. 프론트엔드 실시간 가격 표시
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 프론트엔드에 실시간 가격을 표시하기전에 프론트엔드에서도 정리하고 추가 해야 할 내용이 있습니다. Hook이란 개념인데 쉽게 프론트엔드에서 백엔드에 요청하는 api모음으라고 생각하면 됩니다. 이전 실습들에서 차트와 테이블에 api를 요청해 데이터를…
9-3. 프론트엔드 실시간 데이터 표시
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 이제 실시간 가격변동을 볼수 있는 기초공사가 마무리 되었습니다. 그러나 웹상에 표시 할려면 프론트엔드에서도 어떤 자산이 현재 얼마의 가격인지를 알아야 됩니다. 데이터가 외부 거래소에서 출발해 최종적으로 사용자의 프론트엔드…
9-2. 개별 컨슈머 등록
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 BaseConsumer로 웹소켓 수신의 기본 뼈대를 구성하였습니다. 7-2장에서 FMP 소개 있었습니다. 그중 주식에 대해 무료로 넉넉하게 웹소켓을 제공하는 것은 핀허브정도 입니다. 코인은 바이낸스를 사용하면 됩니다. 웹소켓 형식은 해당…
9-1. FastAPI 웹소켓 핸들러
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 8장까지 우리는 바이브 코딩을 통해 꽤 그럴싸한 화면을 만들어냈습니다. 화려한 차트 및 테이블과 심플한 스파크라인이 들어간 자산 리스트 까지, 프로급 금융 대시보드의 핵심은 모두 만들었다고 해도 과언이…
9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동
📂 상위 파트:[파트 2] 심화: 데이터 수집과 테이블 지금까지는 정적인 데이터 즉 디비에 저장된 데이터를 단순하게 몇번 받아오는 과정이었다면 지금 부터는 실제로 거래되고 있는 가격데이터를 실시간으로 가져오는 방법을 알아보겠습니다. 이를 구축하고 실시간 가격을 볼수 있는…
8-5. 자산 리스트 테이블 추가
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 자산 리스트를 간략하게 보이는 테이블을 기본적으로 만들었습니다. 그러나 보통 자산테이블을 “티커, 이름, 미니차트, 가격 …” 이런 내용으로 되어 있습니다. 대표적인 테이블이 야후 파이낸스 입니다. 여기서 이 조그만…
8-4. 고성능 히스토리 테이블 AG Grid Table
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 파이낸싱 금융 서비스에서 차트가 ‘흐름’을 보여준다면, 테이블은 ‘정확한 수치’와 ‘기록’을 보여줍니다. 수많은 기업용 웹 애플리케이션에서 표준으로 사용되는 AG Grid를 사용하여 투자 히스토리 테이블을 구축합니다. AG Grid는 수만…
8-3. 초경량 TradingView Lightweight 차트
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 우리가 8-1장에서 다룬 Highcharts Stock Tools가 ‘전문가용 정밀 분석 도구’였다면, 이번 장에서 배울 TradingView Lightweight Charts는 ‘압도적인 퍼포먼스와 가성비’에 집중한 컴포넌트 차트입니다. 특히 1GB RAM VPS정도에서 사용할…
8-2. HighChart stock-tools 추가
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 HighCharts에는 Stock Tools이란 강력한 GUI도구가 있습니다. 이 툴은 차트 위에서 직접 분석 도구를 사용할 수 있게 하는 기능 모음(UI 툴바)입니다. 즉, 유명한 TradingView처럼 차트 위에 선을 긋거나…