AI로 홈페이지 만들기, 상세 페이지 HTML 편집기!

AI로 홈페이지 만들기, 상세 페이지 HTML 편집기!

그동안의 목차 : https://itadventure.tistory.com/772

지난번에는 운영툴을 뚝딱 만들었지요.
오늘은 운영툴에서 도서 상세 페이지를 꾸미는 HTML 편집기를 구성하고
홈페이지 도서 목록에서 상세 페이지를 보는 기능을 추가하겠습니다.

먼저 가볍게 sqlite mcp 연결 체크를 하고, ( 비용 절약 측면에서 이때는 무료 모델 사용 )

sqlite mcp 의 도서 목록 조회해줘

윈드서프가 새로 영입해온 클로드4! 이 친구를 이용하겠습니다.

프로젝트를 분석하고 운영툴에 도서의 상세 페이지 HTML 편집 기능을 구현해줘.
HTML 편집기는 ckeditor 를 달아줘.
그리고 홈페이지 도서 목록에서 도서를 클릭하면 이동하는 상세 페이지를 추가해줘.

통상적인 개발 프로세스는 아래와 같습니다.
1) 도서 테이블에 상세 페이지를 넣을 항목을 추가 ( 보통 Text 타입 )
2) 운영툴에 HTML 편집기 기본 기능 구현
3) 운영툴 책 상세 페이지 편집에 편집기 연결, 저장/불러오기 구현
4) 상세페이지를 표현할 도서 상세 페이지 마련
5) 도서목록에서 상세 페이지 연결

어디한번 이 순서로 작업하는지 살펴볼까요? 엇...
위 6줄을 쓰는 동안 다 끝냈다고??! 그 짧은 시간동안?

도서 목록에서 책을 선택하니 상세페이지가 나오네요.

상세 페이지에는 시키지도 않은 추천도서까지 넣어주었습니다.
그래! 너 잘하는구나~!

운영툴을 보니 HTML 편집기가 떡하니 들어와 있네요. 대박!

편집 후 저장하려니 엇, 오류 ?

도서 저장 중 오류 발생: SQLSTATE[HY000]: General error: 1 no such column: description_html
데이터베이스 파일: /cray7/www/HappyBooks9/db/sqlite.db
파일 존재 여부: 예
테이블 구조: [{"cid":0,"name":"id","type":"INTEGER","notnull":0,"dflt_value":null,"pk":1},{"cid":1,"name":"title","type":"TEXT","notnull":1,"dflt_value":null,"pk":0},{"cid":2,"name":"author","type":"TEXT","notnull":1,"dflt_value":null,"pk":0},{"cid":3,"name":"pages","type":"INTEGER","notnull":0,"dflt_value":null,"pk":0},{"cid":4,"name":"price","type":"REAL","notnull":0,"dflt_value":null,"pk":0},{"cid":5,"name":"image_url","type":"TEXT","notnull":0,"dflt_value":null,"pk":0}]

이러 이러한 오류가 발생했다고 오류 메시지를 몇번이나 알려 주는데 클로드가 좀처럼 고치지 못하는 겁니다.
음 좀 실망인데..?

개발 신공을 발휘해 코드를 검토해보았는데요.
상세 페이지 들어갈 항목도 분명 추가되었고 코드상 이상 없어 보이는데 왜 그렇지?
클로드 심정이 이해가 되는 겁니다.. 이럴 때 보통 오래된 개발용어로 '쥐를 잡는 중'이라고 표현하지요 

그러던 중.. 퍼뜩 생각이 났습니다!
MCP 로 연결한 sqlite DB 는 MCP 서버가 꽉 잡고 있어 변경사항을 인지하지 못해 그렇다구요.
mcp 개발할 때도 그것 때문에 고생했거든요.

해결책은 간단합니다. 윈드서프를 껐다가 켜면 됩니다.
그러면 MCP 연결이 끊어졌다가 다시 연결되거든요.
어디 한번.. 운영툴을 테스트해보니.. 잘 됩니다!!

미안하다. 클로드야. 애꿎은 너를 탓했구나!

성능 좋은 클로드4!
실제로는 한번의 프롬프트로 3분 안에 오늘 일정을 소화해낸 대견한 녀석!

오늘 결과물은 아래 URL에서 확인하실 수 있습니다.

https://cray7.mycafe24.com/HappyBooks9/books.php

흥미로운 주제가 되셨을까요?
오늘도 방문 감사합니다!