8-4. 고성능 히스토리 테이블 AG Grid Table

파이낸싱 금융 서비스에서 차트가 ‘흐름’을 보여준다면, 테이블은 ‘정확한 수치’와 ‘기록’을 보여줍니다. 수많은 기업용 웹 애플리케이션에서 표준으로 사용되는 AG Grid를 사용하여 투자 히스토리 테이블을 구축합니다.

AG Grid는 수만 개의 데이터를 처리하면서도 엑셀처럼 부드럽게 작동하며, 정렬, 필터링, 그룹화 기능을 기본으로 제공합니다.

왜 AG Grid를 선택했는가?

AG Grid는 압도적인 퍼포먼스를 보여줍니다. 수천 줄의 투자 기록을 불어와도 화면 멈춤(렉) 없이 즉각적인 필터링이 가능합니다.

또한 사용자 친화적 기능으로 컬럼의 순서를 바꾸거나, 특정 단어로 검색하는 기능을 별도의 코딩 없이 설정값(Option)만으로 구현할 수 있습니다.

그리고 바이브 코딩에 최적화 되어 있어 AI에게 “수익률 컬럼에 따라 행 색깔을 바꿔줘” 혹은 “엑셀 내보내기 버튼을 추가해줘”라고 요청했을 때, AG Grid의 표준화된 API 덕분에 가장 정확한 코드를 얻을 수 있습니다.

🤖 실전! 프론트엔드에 AG-Grid 테이블 추가(2-10)

🧠 이번 실습은 프론트엔드에 금융데이터의 히스토리테이블을 담당할 AG Grid를 추가하는 과정입니다.

사전작업

1. frontend/src/components/tables/AgGridBaseTable.tsx파일을 추가합니다.

"use client"import React, { useMemo } from 'react'import { AgGridReact } from 'ag-grid-react'import { ModuleRegistry, AllCommunityModule, themeQuartz, ColDef, GridOptions } from 'ag-grid-community'ModuleRegistry.registerModules([AllCommunityModule])export interface AgGridBaseTableProps<T = any> {    rows: T[]    columns: ColDef<T>[]    height?: number    gridOptions?: GridOptions<T>    loading?: boolean    error?: string | null}export default
function AgGridBaseTable<T = any>({    rows,    columns,    height = 600,    gridOptions,    loading,    error,}: AgGridBaseTableProps<T>) {    const gridTheme = useMemo(() => {
return themeQuartz.withParams({            rowHoverColor: 'rgba(0,0,0,0.04)',            selectedRowBackgroundColor: 'rgba(0, 123, 255, 0.08)'        })    }, [])    const containerStyle = useMemo<React.CSSProperties>(() => {        const isAuto = gridOptions && (gridOptions as any).domLayout === 'autoHeight'
return {            width: '100%',            height: isAuto ? 'auto' : `${height}px`,        }    }, [gridOptions, height])    if (loading)
return <div className="p-4 text-center text-gray-500">Loading...</div>    if (error)
return <div className="p-4 text-red-600 text-center">{error}</div>
return (        <div style={containerStyle} className="ag-theme-quartz dark:ag-theme-quartz-dark">            {/* Note: dark mode theme might need specific configuration or CSS */}            <AgGridReact                rowData={rows}                columnDefs={columns}                theme={gridTheme}                pagination                paginationPageSize={10}                paginationPageSizeSelector={[10, 25, 50, 100, 200]}                defaultColDef={{ resizable: true, sortable: true, filter: true }}                gridOptions={gridOptions}            />        </div>    )}

💡이 코드는 AG Grid테이블의 UI스타일이 유지 되는 최적 코드입니다.

1. AG Grid/Docs에서 좌측 Tutorials/Greating a Basic Grid를 클릭합니다.
2. 데모 테이블 하단에 </> Code를 클릭하고 복사합니다. =>index.jsx, useFetchJson.jsx
3. temp/temp.md에 기존 내용을 삭제하고 붙여 넣기 합니다.

✨ 사용자의 의도(Vibe)

temp/temp.md에 있는 AG Grid 기본코드를 참조하여 AgGridBaseTable.tsx에서 상속받은 AgGridHistoryTable을 만드는데 아래 내용을 적용하고 계획 수립후 적용해줘

• 파일명은 frontend/src/components/tables/AgGridHistoryTable.tsx
• 사이드 메뉴에 Tables/History Tables을 추가하고 AgGridHistoryTable.tsx를 적용
• 사이드 메뉴의 Charts/Line Chart에 있는 “자산관리(Asset Overview)도 Tables/History Tables페이지 상단에 나타내고 “차트보기” 버튼을 “히스토리”로 변경하고 해당 티커를 선택하면 히스토리 테이블이 보이도록 해줘

💻 AI가 생성한 코드 (Syntax) 및 결과

1. Implementation Plan 생성 => Proceeded(실행)=> 완료
2. 🪄 바이브: “프론트엔드 컨테이너를 리빌드 리스타트 해줘” (프론트엔드 리빌드 리스타트 안했다면 )

~my-project > docker compose up -d --build frontend

1. 🚨몇가지 문제가 있습니다.

• 날짜 포맷을 YY.MM.DD로 하고 시간 표시는 삭제합니다.
• 시가, 고가, 저가,종가가 나오지 않습니다. (엔드포인트와 테이블의 이름이 다를확률이 높습니다.)
• 🪄 바이브: “작성된 AgGridHistoryTable.tsx테이블의 날짜 포맷을 YY.MM.DD로 하고 시간 표시는 삭제해줘 그리고 시가, 고가, 저가,종가가 나오지 않아 엔드포인트와 테이블의 이름이 같은지 확인하고 가격이 나오게 해줘”