10-3. 지능형 사이드바와 다이내믹 메뉴
📖 상위 챕터:10장 프론트엔드에 전문가의 향기 입히기 사용자가 웹 브라우저를 켜고 여러 페이지를 넘나들 때 가장 많이 의존하는 인터페이스는 바로 화면 왼쪽에 상시 배치된 사이드바(Sidebar) 내비게이션입니다. 단순히 <a> 링크들을 일렬로 나열해 놓는 사이드바는 세련미가 떨어집니다.…
10-4. 지능형 사이드바와 테마 시스템(Dark/Light) 완성
📖 상위 챕터:10장 프론트엔드에 전문가의 향기 입히기 모든 완성도 높은 핀테크 또는 투자 분석 대시보드는 다크 모드(Dark Mode)와 라이트 모드(Light Mode) 전환을 필수로 지원합니다. 장시간 차트 캔들과 세부 시세 표를 쳐다봐야 하는 투자자들은 눈의 피로를…
8-5. 자산 리스트 테이블 추가
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 자산 리스트를 간략하게 보이는 테이블을 기본적으로 만들었습니다. 그러나 보통 자산테이블을 “티커, 이름, 미니차트, 가격 …” 이런 내용으로 되어 있습니다. 대표적인 테이블이 야후 파이낸스 입니다. 여기서 이 조그만…
10장 프론트엔드에 전문가의 향기 입히기
📂 상위 파트:[파트 2] 심화: 데이터 수집과 테이블 단순한 페이지를 ‘서비스’로 바꿔주는 내비게이션과 디자인 디테일입니다. 이전 장에서 백엔드의 실시간 데이터 파이프라인을 완성했다면, 이제는 사용자가 웹 브라우저를 켰을 때 “와, 이건 진짜 프로가 만든 금융 서비스구나!”라고…
9-2. 개별 컨슈머 등록
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 BaseConsumer로 웹소켓 수신의 기본 뼈대를 구성하였습니다. 7-2장에서 FMP 소개 있었습니다. 그중 주식에 대해 무료로 넉넉하게 웹소켓을 제공하는 것은 핀허브정도 입니다. 코인은 바이낸스를 사용하면 됩니다. 웹소켓 형식은 해당…
9-4. 프론트엔드 실시간 가격 표시
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 프론트엔드에 실시간 가격을 표시하기전에 프론트엔드에서도 정리하고 추가 해야 할 내용이 있습니다. Hook이란 개념인데 쉽게 프론트엔드에서 백엔드에 요청하는 api모음으라고 생각하면 됩니다. 이전 실습들에서 차트와 테이블에 api를 요청해 데이터를…
8-4. 고성능 히스토리 테이블 AG Grid Table
📖 상위 챕터:8장 프론트엔드 컴포넌트: 금융 데이터의 시각화 파이낸싱 금융 서비스에서 차트가 ‘흐름’을 보여준다면, 테이블은 ‘정확한 수치’와 ‘기록’을 보여줍니다. 수많은 기업용 웹 애플리케이션에서 표준으로 사용되는 AG Grid를 사용하여 투자 히스토리 테이블을 구축합니다. AG Grid는 수만…
10-1. 차트 고도화: 이동평균선 및 반감기 차트 구현
📖 상위 챕터:10장 프론트엔드에 전문가의 향기 입히기 주식이나 코인 투자자들이 차트를 볼 때 가장 먼저 추가하는 대표적인 지표가 무엇일까요? 바로 이동평균선(Moving Average)입니다. 그리고 비트코인 투자자들에게 나침반 역할을 하는 가장 핵심적인 이벤트는 반감기(Halving)입니다. 단순히 시세 캔들만…
9-1. FastAPI 웹소켓 핸들러
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 8장까지 우리는 바이브 코딩을 통해 꽤 그럴싸한 화면을 만들어냈습니다. 화려한 차트 및 테이블과 심플한 스파크라인이 들어간 자산 리스트 까지, 프로급 금융 대시보드의 핵심은 모두 만들었다고 해도 과언이…
9-3. 프론트엔드 실시간 데이터 표시
📖 상위 챕터:9장 실시간 마켓 펄스: 웹소켓(WebSocket) 연동 이제 실시간 가격변동을 볼수 있는 기초공사가 마무리 되었습니다. 그러나 웹상에 표시 할려면 프론트엔드에서도 어떤 자산이 현재 얼마의 가격인지를 알아야 됩니다. 데이터가 외부 거래소에서 출발해 최종적으로 사용자의 프론트엔드…