nuxt 3

[계좌 리팩토링] 16편(시각화). "숫자만으론 안 보여!" 봇의 뇌 구조를 들여다보는 웹 HTS 시뮬레이터 구축

1. 텍스트 로그(CLI)가 가진 치명적인 한계안녕하세요! 내 계좌를 위한 자동매매 시스템을 빚어가는 [계좌 리팩토링] 시리즈 16편입니다. 지난 15편에서는 실전과 완벽하게 동일한 로직(evaluateTick)으로 돌아가는 강력한 CLI 기반의 백테스팅 엔진을 완성하고, VWAP와 EMA를 활용한 눌림목 전략을 테스트해 보았습니다.CLI에서 수백 일치의 과거 데이터를 돌리면 '총 거래수 50회, 승률 45%, 순수익 15%' 같은 결과가 터미널에 텍스트로 찍힙니다. 하지만 개발자이자 트레이더로서 우리는 곧 깊은 갈증을 느끼게 됩니다."도대체 이 매매는 왜 여기서 진입한 거지? 수익이 나긴 했는데, 정말 내가 의도한 예쁜 눌림목(Pullback) 자리였나? 아니면 운 좋게 반등한 휩쏘(거짓 신호)였나?"..

[계좌 리팩토링] 12편(안정성). 대시보드 UI를 완벽하게 지키는 법: Playwright와 Storybook을 활용한 VRT 구축

기능이 추가될수록 불안해지는 화면, 어떻게 방어할까?안녕하세요! 내 계좌와 코드를 튼튼하게 다지는 [계좌 리팩토링] 시리즈 12편입니다. 지난 11편에서 우리는 Nuxt를 활용해 봇의 상태를 실시간으로 보여주는 멋진 웹 대시보드를 구축했습니다.앞으로 이 대시보드에는 10편에서 다룬 일목균형표 차트, 호가창 애니메이션, 매매 내역 검색 필터 등 수많은 기능이 추가될 것입니다. 그런데 기능이 늘어날수록 개발자에게는 새로운 두려움이 생깁니다. "새로운 CSS를 한 줄 추가했는데, 어제까지 잘 보이던 잔고 표시 카드 레이아웃이 엉뚱하게 깨지면 어떡하지?"이러한 불안감을 해소하고 UI의 무결성을 보장하기 위해, 이번 시간에는 Playwright와 Storybook을 결합한 시각적 회귀 테스트(VRT, Visual..

[계좌 리팩토링] 11편(심화). 내 봇의 상태를 한눈에! Nuxt로 실시간 트레이딩 대시보드 만들기

터미널의 검은 화면을 넘어, 나만의 종합 상황실로안녕하세요! [계좌 리팩토링] 시리즈 11편입니다. 우리는 지금까지 Node.js를 이용해 백엔드에서 묵묵히 돌아가는 강력한 트레이딩 봇을 완성했습니다. 10편의 일목균형표 알고리즘이 매일 시장을 분석하고, 9편의 텔레그램 연동을 통해 결과도 스마트폰으로 잘 받아보고 계실 겁니다.하지만 진정한 시스템 트레이더의 로망은 무엇일까요? 바로 영화에 나오는 펀드매니저들처럼 내 봇의 실시간 수익률, 현재 포지션, 그리고 매매 로그가 차례대로 올라오는 멋진 '웹 대시보드(Dashboard)'를 띄워두는 것 아닐까요?이번 시간에는 모던 웹 프레임워크인 Nuxt(Vue.js 기반)를 활용하여, 우리 봇의 상태를 시각적으로 모니터링할 수 있는 프론트엔드 웹 페이지를 구축해..