자산 리스트를 간략하게 보이는 테이블을 기본적으로 만들었습니다. 그러나 보통 자산테이블을 “티커, 이름, 미니차트, 가격 …” 이런 내용으로 되어 있습니다. 대표적인 테이블이 야후 파이낸스 입니다.
여기서 이 조그만 미니 차트를 ‘스파크라인(Sparkline)’ 이라고 부릅니다. 이와 만들거면 이런 차트가 있는게 보기가 좋겠죠
스파크라인(Sparkline)이란?
복잡한 X축(시간), Y축(가격), 눈금선 같은 것을 전부 떼어버리고 오직 ‘선(추세)’ 하나만 심플하게 보여주는 초소형 차트입니다. 테이블 안에 쏙 들어갈 만큼 작지만, 이 스파크라인 하나가 추가되는 순간 우리가 만든 투박한 표는 전문가가 만든 세련된 대시보드로 탈바꿈합니다. 상승장일 때는 빨간색 선이, 하락장일 때는 파란색 선이 직관적으로 시장의 분위기를 알려주죠.
SVG(Scalable Vector Graphics)란 무엇일까요?
쉽게 말해 외부에서 그림이나 차트 프로그램을 가져오는 것이 아니라, HTML 자체에 내장된 기능으로 ‘수학 좌표를 찍어 선을 그리는’ 기술입니다.
- “여기서부터 저기까지 선을 그어라”
- “위로 꺾고 아래로 꺾어라”
이 복잡한 수학 계산을 우리가 직접 코딩하려면 머리가 아프겠지만, 우리에겐 AI가 있습니다. 우리는 그저 데이터(가격 배열)만 던져주고, “이 데이터를 바탕으로 SVG 태그를 써서 선만 가볍게 그려줘”라고 지시하면 됩니다.
하나. 압도적인 가볍습니다. 무거운 프로그램 설치가 필요 없어 로딩 속도가 미친 듯이 빠릅니다.
둘. 서버 생존율 상승에 도움이 됩니다. 저사양 서버나 오래된 스마트폰에서도 버벅임 없이 쾌적하게 돌아갑니다.
셋. 깨짐 방지 기능이 있습니다. 수학으로 그린 선이기 때문에 화면을 아무리 확대해도 이미지가 깨지지 않습니다.
🛠️ 결론적으로 바이브 코더의 무기: 순수 ‘SVG’를 활용하라
그래서 우리는 AI의 제안을 단호하게 거절하고, **”라이브러리 쓰지 말고 순수 SVG로 그려줘!”**라고 프롬프트를 통제해야 합니다.
🚨 주의! AI의 달콤한 함정: “무거운 라이브러리를 설치하세요”
자, 이제 우리가 배운 내용을 모르는 상태에서 AI에게 “테이블 안에 미니 차트를 그려줘!”라고 바이브 코딩을 하면 우리의 천재 조수인 AI는 차트를 그려달라는 말을 듣자마자 십중팔구 Recharts, Chart.js, ApexCharts 같은 거창하고 무거운 외부 라이브러리를 설치 할 확률이 높습니다.
🤖 실전! 프론트엔드에 자산 관리 테이블 추가(2-11)
🧠 이번 실습은 프론트엔드에 자산 리스트를 표시하는 테이블을 추가하는 과정입니다.
사전작업
✨ 사용자의 의도(Vibe)
주식이나 코인 가격을 보여주는 심플한 ‘자산 리스트 테이블’을 프론트엔드의 Basic Table로 만드는데 다음 조건을 반드시 지켜줘
- 파일명 : frontend/src/components/tables/AssetsList.tsx
- 사이드 메뉴의 Tables/AssetsList 메뉴를 추가하고 리스트를 표시해줘
- 페이지네이션 기능을 넣어줘
- 컬럼 구성: 심볼 및 이름, 가격(전일 종가), 변동률(%), 변동가격, 거래량
- 미니 차트(Sparkline): ‘심볼 및 이름’ 컬럼 바로 옆에 최근 7일 가격 추세를 보여주는 아주 작은 미니 선 차트를 넣어줘.
- 외부 차트 라이브러리는 절대 사용하지 않고 SVG 태그와 자바스크립트로 해줘
- 조건부 색상: 7일 전 가격보다 현재 가격이 올랐으며 선 색깔을 빨간색으로, 내렸으면 파란색으로 처리해 줘. (숫자 색상도 상승은 빨강, 하락은 파랑)
💻 AI가 생성한 코드 (Syntax) 및 결과
- frontend/src/components/tables/AssetsList.tsx
"use client";import React, { useState } from "react";import { ChevronLeft, ChevronRight } from "lucide-react";// Simplified Sparkline using pure SVGconst Sparkline = ({ data, color }: { data: number[]; color: string }) => { };interface AssetData { id: number;생략}const sampleAssets: AssetData[] = [ { id: 1, symbol: "BTC", name: "Bitcoin", price: 68420.5, changePercent: 2.45, changePrice: 1640.2, volume: "35.2B", history7d: [64000, 65200, 64800, 66000, 67500, 67000, 68420], },}- 이하 생략 -
- 리스트가 내부에 실제 데이터가 아닌 더미(가짜) 데이터를 사용합니다. ✨ Vibe: AssetsList.tsx에서 티커 리스트는 와 가격을 백엔드 엔드포인트를 사용하게 해줘
- 리빌드(docker compose up -d –build frontend) 후 페이지 확인
- 오류가 있습니다.
- 백엔드 엔드포인트의 정렬이 오래된 파일부터 나오게 되어 있습니다. 즉 최신 값을 부르지 않고 오래된 값부터 나와 과거 값이 나옵니다.
- ✨ Vibe: “AssetsList.tsx에서 엔드포인트가 과거순으로 정렬되어 최신값으로 차트와 값이 표시안되 최신 값이 나오게 해줘” 리빌드후 확인
- 미니 차트가 같은 시작점에 있지 않고 자산 이름이 끝나는 부분에서 시작해서 스타일이 이상하게 보입니다.
- Vibe: “미니 차트가 같은 시작점에 있지 않고 자산 이름이 끝나는 부분에서 시작해서 스타일이 이상하게 보여 미니 차트는 미니 차트끼리 같이 시작하게 해줘” 리빌드후 확인
- 기타 폰트나 색상등은 본인의 취향에 따라 수정해달라고 하세요!