코딩 없이 맞춤 주식 모듈 설계 개발

지난달에 커서를 시험 사용해 봤는데, 무료 한도 제한 때문에 복잡한 기능 개발은 하지 않고 간단히 테스트만 했습니다. 그때쯔음에 바이트(Byte)도 유사한 제품을 출시했고, 두 제품 모두 기반으로 하는 대규모 언어 모델이 Claude-3.5였습니다.

바이트의 제품인 트레이인데, 먼저 맥 버전으로 출시했고, 올해 2월에 드디어 윈도우 버전이 나왔어. 대기업 제품은 역시 좋지, 무료로 사용할 수 있고 돈을 내지 않아도 무제한으로 Claude-3.5를 사용할 수 있는데, 이 모델의 성능은 아주 괜찮아.

최종적으로 K라인 차트 개발에 막혀버렸습니다. 개인적으로 React에 대한 기본 지식이 부족하여 포기할 수밖에 없었습니다. 계속 개발하려면 저자가 프론트엔드 기초 지식을 보충하고, “K라인 차트 개발”과 같이 큰 작업을 바로 주지 않고 더 세분화된 작은 작업으로 나누어야 합니다.

발견된 문제

해외 AI 모델 사용으로 인해 Vue3 + Element-Plus의 학습 데이터가 부족하여, 프론트엔드 프레임워크로 React를 선택했습니다
문법 오류가 발생할 수 있으므로, 사람이 직접 수정해야 합니다
일부 복잡한 문제 해결에는 사람의 지침이 필요합니다
코드 구조 최적화는 수동 지침이 필요합니다

가장 시간이 오래 걸린 부분은 프론트엔드 코드를 컨테이너에 패키징하는 것이었는데, 작성자가 기초 지식이 전혀 없어서 .env.production tsconfig.json 같은 개념도 전혀 알지 못했습니다. 중간에 도움을 받은 덕분에 겨우 논리를 파악할 수 있었습니다. 프론트엔드 개발의 dev 모드와 build 모드는 코드 검사에서 큰 차이가 있습니다. 백엔드 데이터베이스 및 서비스 컨테이너 스크립트는 총 5분 만에 처리했습니다.

AI는 현재 개발 효율성을 높이는 데 더 중점을 두고 있으며, 기본기가 가장 중요하며 AI가 모든 문제를 해결해 주는 것은 아닙니다

창고 주소

제목에서 언급했듯이, 이번에는 코딩하지 않고 AI와 직접 대화하며 자체 선택 주식 모듈을 설계하고 개발해 보겠습니다. 최종적으로 어떤 결과물이 나올지 지켜보죠.

저장소 주소: https://github.com/ttf248/trae-demo

자세한 사용 방법은 창고의 README.md 파일을 참조하십시오

창고에는 많은 제출 기록이 포함되어 있는데, 대부분은 저와 Trae의 대화 기록과 제가 Trae의 몇몇 기능들을 테스트한 내용이며, 해당 기능을 구현하기 위해 수동 개입이 이루어졌는지에 대한 메모가 달려 있습니다

Prompt

프로젝트는 처음부터 시작되었으며, 프로젝트 프롬프트는 다음과 같습니다

基于项目原型图，开发功能：自选股，需要支持合约的新增、删除、修改、查询。自选股界面需要展示基础的行情数据。支持多个不同的市场切换。

前端：react
后端：golang gin gorm
数据库：PostgreSQL

服务端需要支持跨域请求，同时需要考虑数据的校验和错误处理，如果后端服务不可用，前端需要告警提示。

后端需要展示请求和应答的日志；前端也打印通讯的日志，方便排查问题。

UI 및 상호작용 최적화

프론트엔드 인터페이스 디자인은 완전히 Grok에 의존하고 있으며, 우리는 먼저 Trae에서 제품의 초기 형태를 만들었지만 심미적인 부분은 부족했습니다. 사용한 모델은 코드 능력은 강력하지만 다른 기능은 상대적으로 약하기 때문에 Grok을 사용하여 프론트엔드의 UI를 최적화해야 합니다.

현재 인터페이스의 스크린샷을 찍어 Grok에 업로드한 다음, Grok이 우리 UI를 최적화하도록 하고, 여러 가지 최적화 제안을 한 번에 받은 뒤, 저희가 수동으로 평가하고 Trae에서 실행하여 최적화 효과를 관찰합니다

기술 스택

프론트엔드: React + TypeScript
백엔드: Golang + Gin + GORM
데이터베이스: PostgreSQL 17

시스템 아키텍처

백엔드 아키텍처

백엔드는 Golang의 Gin 프레임워크로 구현된 RESTful API이며, 주요 모듈은 다음과 같습니다:

데이터베이스 모듈

GORM을 ORM 프레임워크로 사용하세요
환경 변수를 통해 데이터베이스 연결을 구성할 수 있습니다
자동으로 데이터베이스 테이블 마이그레이션 수행

라우팅 모듈

RESTful API 설계
통일된 오류 처리 메커니즘
내장 요청 로깅

영역 간 처리

로컬 개발 환경 간의 교차 도메인 접근을 지원합니다
구성 가능한 CORS 정책
쿠키 크로스 도메인 지원

프론트엔드 아키텍처

프론트엔드는 React + TypeScript로 구축되었으며, 다음과 같은 기능을 구현했습니다:

주식 목록 표시
자선주 관리
시장 데이터 표시
오류 표시 메커니즘