개요

api 서버 및 프론트엔드 개발한 내용을 정리해 보겠다.
클로드 코드를 이용해 바이브 코딩을 하면서 만난 문제점도 있었다.

내용

서버

프론트엔드에게 api 명세를 넘기기 위해서 swagger를 활용했다.

원래 계획은 배치를 돌면서 예전 데이터를 크롤링해서 db에 저장시킬 계획이었다. 그러나 해당 말이 경주를 또 했을 경우 데이터가 업데이트 되어야하는 상황이 발생하여 일단 멱등성을 활용한 api 설계를 했다. db 조회 후 없으면 크롤링 후 pdf에서 데이터를 추출해 MongoDB에 저장 후 응답하는 구조로 만들었다.

개발을 하면서 axum route에 등록하는 과정에서 계속 에러가 발생하는데 claude code가 에러를 잡지 못하는 이슈가 있었다. 그래서 직접 오류를 수정하였다.

수정한 내용에 대한 포스팅은 아래 링크를 참조하면 된다.

https://velog.io/@wang_ki/rust-axum-error-수정

프론트엔드

프론트엔드는 전혀 모르기 때문에 요즘 유행하는 next js로 만들어달라 했다.

// app.md
# 원하는 설계도 
1. 우측 상단에 날짜를 고를 수 있는 달력이 있다. (참고로 경마는 금토일 만 한다. )
2. 날짜를 누르게 되면 경주 정보가 나온다 
    ex) 서울 1경주, 서울 2경주 .... 

3. 서울 1경주를 누르게 되면 각 말들의 데이터를 보여준다.


# api 
## api 명세 
http://localhost:3001/swagger-ui#/Board%20PDF/download_board_pdf

진짜 간단하게 적고 알아서 만들어 달라고 했더니 위와 같은 ui로 만들어주었다.

전체 경주가 나오고 원하는 경주를 클릭하면 해당 경주에 대한 정보로 이동하게 된다.

전체적으로 ui 가 통일성있고 깔끔하게 잘 나온 것 같다.

결론

바이브 코딩은 좋지만 에러가 발생했음에도 ai agent가 잡아주지 못하는 경우에는 직접 수정해 줘야 하는 경우가 생기는 것 같다. 직접 코드를 작성한 것이 아니므로 코드 베이스를 파악하는 데 시간이 걸렸던 것 같다. 프론트엔드쪽에서 문제가 발생하면 살짝 당황스러울 것 같지만 오히려 좋다는 마인드로 모르는 부분 공부하면서 하면 될 것 같다. 어차피 프론트쪽은 크게 알빠가 아니라서....

대충 구조가 잡혔으니 이제 좋은 말을 고르기 위한 알고리즘을 만들어야겠다.