Claude, Claude-Dev 및 Aider를 사용하여 티켓팅 시스템을 구축하는 부분-파이썬 튜토리얼-php.cn

1부 링크

집에서 함께 놀고 싶다면 프로젝트가 오픈 소스로 제공됩니다: https://github.com/joegiglio/helpdesk-claude-dev-ai

3부 -

이제 지식 베이스에 몇 가지 기본 기능을 추가하고 싶습니다. 지금은 뼈대 UI만 있습니다. Claude가 이를 사용하여 유용한 작업을 수행할 수 있는지 살펴보겠습니다.

[즉시]
이제 기술 자료에 몇 가지 기본 기능을 추가하고 싶습니다. 현재 지식 기반 URL에는 자리 표시자 UI가 표시되지만 유용한 작업을 수행해 보겠습니다. 다음부터 시작해 보겠습니다.
"지식 기반 설정"에 대한 왼쪽 탐색 모음에 링크를 추가합니다. 이는 이러한 설정이 포함된 새 템플릿에 연결되어야 합니다.
기술 자료 설정 페이지 내에서 자리 표시자 이미지와 자리 표시자 텍스트를 추가합니다.
기술 자료 설정 페이지 내에서 최종 사용자가 생성할 "주제"에 대한 링크를 추가합니다. 이러한 주제에는 향후 단계의 기사가 포함됩니다. 이러한 변경 사항을 지원하기 위해 필요한 데이터베이스 업데이트를 수행하세요.
[/즉시]

Claude는 필요한 변경을 수행했지만 라이브러리 누락 문제가 발생했습니다. 다시 한 번 상기시켜야 할 가상 환경인 .venv에 대한 추적을 잃었습니다.

[즉시]
.venv
라는 이름의 가상 환경 디렉터리를 사용하고 있는지 확인하세요. [/즉시]

이미지가 누락되고, 몇 가지 다른 글꼴이 있고, 주제 관리 버튼이 작동하지 않는 이 UI를 사용하게 되었습니다. 나는 클로드에게 청소를 부탁했다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
지식창고 설정 페이지의 UI를 일부 변경해야 합니다.

자리 표시자 이미지가 누락되었습니다.
몇 가지 다른 글꼴이 있습니다. 하나를 선택하고 그대로 유지하십시오.
주제 관리 버튼은 아무 작업도 수행하지 않습니다. 이에 대한 프레임워크가 없는 것 같으니 기능적으로 만들어 보겠습니다.
주제를 담을 테이블을 생성하여 데이터베이스를 업데이트하세요. 지금은 Topic이라는 필드 하나만 있으면 됩니다.
사용자가 새 주제를 만들고 삭제할 수 있도록 페이지를 만듭니다. 삭제를 확인합니다. [/즉시]

Claude는 다시 로컬 자리 표시자 이미지를 사용하려고 했지만 2부에서 설명한 대로 via.placeholder.com 서비스를 사용하라고 상기시켰습니다.

출력을 보면서 Claude가 수정할 수 있었던 DB 마이그레이션 오류를 발견했습니다.

DB 마이그레이션 중 예외 발생:
raise ValueError("제약조건에는 이름이 있어야 합니다.")
ValueError: 제약조건에는 이름이 있어야 합니다

일부 정리 후에는 마음에 들지 않는 UI였습니다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
통합/Slack 페이지를 지침으로 사용하여 지식 베이스/설정 페이지의 UI를 업데이트하세요. 글꼴을 개선하고 자리 표시자 이미지를 기술 자료(책 등)를 나타내는 로컬 이미지로 바꾸세요.
[/즉시]

API 제한이 강화되고 있습니다!

429 {"type":"error","error":{"type":"rate_limit_error","message":"요청 토큰 수가 분당 속도 제한을 초과했습니다(https://docs. anthropic.com/en/api/rate-limits), 현재 사용량에 대한 응답 헤더를 확인하세요. 프롬프트 길이나 요청된 최대 토큰을 줄이거나 나중에 https://www.anthropic에서 영업팀에 문의할 수도 있습니다. .com/contact-sales에서 요금 한도 인상 옵션에 대해 논의하세요."}}

요청이 진행되는 것을 보면서 Claude가 cURL 명령을 사용하여 기술 자료를 나타내는 아이콘을 다운로드하는 것을 보았습니다. 그런데 로딩이 되지 않았습니다. 질문을 받았을 때 Claude는 SVG 파일이 다운로드되었지만 PNG로 저장되었다고 말했습니다. 그것은 새로운 것입니다. 한 번 더 반복하면 문제가 해결되어 다음과 같은 메시지가 남습니다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

큰 주제 관리 버튼이 있는 레이아웃이 마음에 드는지 잘 모르겠지만 지금은 괜찮을 것 같습니다. 주제 관리로 이동:

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

나쁜 것은 아니지만 이미 존재하는 주제 이름을 추가하려고 하면 예외가 발생합니다.

sqlalchemy.exc.IntegrityError: (sqlite3.IntegrityError) UNIQUE 제약 조건 실패: Knowledge_base_topic.name
[SQL: INSERT INTO Knowledge_base_topic (이름) VALUES (?)]
[매개변수: ('주제 1',)]

이는 이전에 생성할 때 문제가 있었던 것과 동일한 제약 조건입니다. 클로드가 고칠 수 있을지 지켜보겠습니다.

[즉시]
이미 존재하는 주제 이름을 생성하려고 하면 예외가 발생합니다. 고쳐주세요? sqlalchemy.exc.IntegrityError: (sqlite3.IntegrityError) UNIQUE 제약 조건 실패: Knowledge_base_topic.name
[SQL: INSERT INTO Knowledge_base_topic (이름) VALUES (?)]
[매개변수: ('주제 1',)]
[/즉시]

…그리고 또 다른 429 오류:

클로드가 큰 타격을 받았나 봐요! 오늘 밤에는 거의 사용할 수 없습니다…

[즉시]
이제 동일한 이름으로 여러 주제를 생성하는 것이 차단되었지만 몇 가지 문제가 있습니다. 1. "오류" 플래시 메시지에 대한 스타일이 누락되었습니다. 배경색은 아마도 빨간색일 것입니다. 2. 주제 이름은 대소문자를 구분해야 합니다. "topic"이 이미 존재하는 경우 "TOPIC"을 생성하는 것도 허용되지 않아야 합니다.
[/즉시]

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

또 429 오류가 발생했습니다. 정말 힘들다...

일일 한도에 도달할 때까지 요청을 한 번 더 몰래 받을 수 있었습니다.

429 {"type":"error","error":{"type":"rate_limit_error","message":"요청 토큰 수가 일일 비율 제한을 초과했습니다(https://docs.anthropic. com/en/api/rate-limits), 현재 사용량에 대한 응답 헤더를 확인하세요. 프롬프트 길이나 요청된 최대 토큰 수를 줄이거나 나중에 https://www.anthropic.com에서 영업팀에 문의할 수도 있습니다. /contact-sales에서 비율 제한 인상 옵션에 대해 논의하세요."}}

오늘 밤 Claude와 별로 많은 일을 하지 않았지만 금세 토큰 한도에 도달했습니다. 그것이 어떻게 계산되는지는 잘 모르겠지만 오늘 밤 API는 매우 제한적인 것 같습니다. 내가 할 수 있는 건 웃으며 내일까지 기다리는 것뿐이다.

다음날:

[즉시]
다음과 같이 변경하여 기술 자료 항목 UI를 계속해서 개선하겠습니다. 1. 항목 이름은 대소문자를 구분해야 합니다. "topic"이 이미 존재하는 경우 "TOPIC"을 생성하는 것도 허용되지 않아야 합니다. 2. 생성할 수 있는 주제 수를 10개로 제한하고 이 수를 UI에 표시합니다. 주제가 10개일 경우 주제 생성 버튼을 비활성화하고 적절한 메시지를 표시합니다.
[/즉시]

Claude는 주제 수와 대소문자 구분을 확인하기 위해 멋진 클래스 함수 코드를 생각해 냈습니다. 꽤 우아함:

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

내가 보내는 모든 프롬프트에 적용되는 시스템 프롬프트에서 Claude에게 최대 길이를 적용하라고 지시했음에도 불구하고 주제 이름에 최대 길이가 적용되지 않는 것을 발견했습니다. 실망스럽다…

데이터베이스의 필드가 100자를 허용하도록 구성되어 있음에도 수천 개의 주제 이름을 제출했는데 아무 일도 일어나지 않았습니다. 모든 것이 어떻게 작동하는지 잘 모르겠지만 내가 어디에서 왔는지는 강제 제한이 부족하여 문제가 발생합니다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
주제 이름에 길이 제한을 적용하는 것 같지 않습니다. 맞나요?
[/즉시]

당신 말이 맞습니다. 중요한 세부 사항을 간과한 점 사과드립니다. 주제 이름에 길이 제한을 추가해 보겠습니다. 주제 이름의 최대 길이는 50자로 설정됩니다. 백엔드와 프런트엔드 모두에서 이 제한을 적용하기 위해 필요한 변경을 수행하겠습니다.

Claude가 일부 코드를 추가했지만 이는 일반 Javascript였고 이미 프로젝트의 일부인 jQuery를 원했습니다. 내 시스템 프롬프트에도 jQuery가 있지만 그것도 무시하는 것 같습니다. Claude는 이를 jQuery로 변경하고 문자 카운터도 추가했습니다(좋은 터치입니다!). 그런데… 안되네요!

[즉시]
문자 카운터를 추가했지만 작동하지 않습니다. 웹 콘솔에 오류가 표시되지 않습니다. 고쳐주세요.
[/즉시]

Claude는 스크립트 태그 순서를 몇 가지 변경했으며 이제 작동합니다. 이번에도 이전과 비슷한 문제가 발생했습니다.

[즉시]
주제 관리 페이지에서 UI를 몇 가지 더 조정해 보겠습니다. 1. 주제를 알파벳 순서로 정렬하고 대소문자를 구분합니다. 2. 주제 개수를 "기존 주제" 헤더 옆으로 이동하여 주제 생성 버튼 아래에서 제거합니다.
[/즉시]

이번 반복 중에 일일 API 한도에 다시 도달했습니다. 최근 Anthropic이 "신속한 캐싱"으로 변경한 내용은 나에게 아무런 도움이 되지 않았습니다. 더 심해진 것 같습니다.

물론

400 {"type":"error","error":{"type":"invalid_request_error","message":"귀하의 크레딧 잔액이 너무 낮아 Claude API에 액세스할 수 없습니다. 요금제 및 청구로 이동하여 다음을 수행하세요. 업그레이드하거나 크레딧을 구매하세요."}}

현재 UI 입니다. 나쁘지 않아요!

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

다음날로... 다음은 지식베이스에 글을 추가하는 코드를 작성해보겠습니다.

[즉시]
이제 지식 베이스에 기사를 추가할 수 있는 또 다른 기능을 만들고 싶습니다. 일부 요구 사항:
각 기사는 주제에 속해야 합니다.
주제에 기사가 있는 경우 해당 상위 주제가 삭제되면 기사도 삭제되어야 합니다. 삭제 확인은 얼마나 많은 기사가 삭제될 것인지 사용자에게 경고해야 합니다. 사용자는 기사가 있는 경우 주제 삭제를 확인하기 위해 "삭제"(대소문자 구분 안 함)라는 단어를 입력해야 합니다.
주제 이름을 클릭하면 해당 주제에 포함된 기사를 볼 수 있습니다.

다음 프롬프트에서는 기사 생성 페이지에 대한 UI를 구축하겠습니다. 지금은 자리 표시자 이미지와 텍스트가 포함된 자리 표시자 페이지를 구성하세요.

이 기능을 지원하려면 파일 및 데이터베이스 구조를 필요에 따라 변경하십시오.
[/즉시]

매우 의미 있는 메시지입니다. 클로드가 어떻게 하는지 볼까요…

Claude가 다시 .venv를 감지하지 못해서 발생한 것으로 보이는 데이터베이스 마이그레이션 관련 몇 가지 문제가 있었습니다.
환경. Claude-Dev의 시스템 프롬프트 설정에 이를 추가하겠습니다. 도움이 되길 바랍니다.

이러한 문제를 해결한 후 결과가 꽤 좋았습니다. 물론 몇 가지 빠른 테스트 후에 몇 가지 조정이 필요합니다. 다음 메시지에서 이 항목을 선택하겠습니다.

[즉시]
기사 작성 구현에 몇 가지 조정이 필요합니다. 다음과 같이 변경하세요.
주제를 삭제할 때 항상 확인 메시지를 표시해야 합니다. 그러나 주제에 기사가 포함된 경우에만 사용자에게 대소문자를 구분하지 않고 "삭제"라는 단어를 입력하도록 요구하는 확인을 요청해야 합니다.
기사를 삭제하고 삭제를 확인하는 메커니즘을 추가합니다.
기본 지식 기반 페이지에서 주제가 없으면 검색 창과 자리 표시자 메시지를 숨깁니다. 아직 주제가 없다는 자리표시자 텍스트를 추가하세요.

사용자가 기사를 작성하고 편집하는 동안 형식을 지정할 수 있도록 고급 기사 편집기를 추가하세요. 저장 및 검색 시 기사 텍스트를 인코딩 및 디코딩하여 잠재적으로 위험한 문자로부터 보호합니다.
[/즉시]

클로드가 어떤 기사 편집자를 선택할지 궁금했어요. TinyMCE와 함께 진행되었습니다. 그러나 그것은 나타나지 않았습니다.

[즉시]
좀 더 조정이 필요합니다:
주제 관리 페이지에는 각 주제에 몇 개의 기사가 있는지 표시되어야 합니다.
주제에 기사가 없으면 "모든 기사 보기" 버튼이 나타나지 않아야 합니다. 대신 "이 주제에는 기사가 없습니다"와 같은 텍스트를 표시하세요.
기사 추가 및 편집을 위해 TinyMCE 편집기를 추가하려고 시도했지만 표시되지 않습니다. 콘솔에는 오류가 없습니다.
[/즉시]

TinyMCE가 아직 작동하지 않습니다. 이것은 Claude가 문제를 해결할 수 없고 요청이 부족한 또 다른 웹소켓 및 JIRA 티켓 문제처럼 느껴집니다. 나는 그렇지 않기를 바란다. 더 많은 조정이 필요합니다!

[즉시]
좀 더 조정이 필요합니다:
주제에 기사가 없는 경우 주제 관리에는 기사 카운터와 "이 주제에 기사가 없습니다"라는 텍스트가 모두 표시됩니다. 둘 다 표시할 필요는 없으므로 "이 주제에 대한 기사가 없습니다"라는 텍스트를 삭제하세요.

"지식 기반" 페이지에는 해당 주제에 대한 기사가 없는 경우에도 "모든 기사 보기" 버튼이 표시됩니다. 대신 "이 주제에는 기사가 없습니다"와 같은 텍스트를 표시하세요.
기사를 추가하거나 편집할 때 TinyMCE 편집기가 여전히 표시되지 않습니다. 콘솔에는 오류가 없습니다.
[/즉시]

지금 TinyMCE UI가 로드 중이지만 API 키를 요청하고 있습니다. 대신에 더 간단하고 무료로 사용할 수 있는 편집기가 있는지 Claude에게 물어보겠습니다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
이제 TinyMCE 편집기가 표시되지만 API 키를 요구합니다. 키가 필요하지 않은 다른 편집기가 있습니까? 현재로서는 기본 서식 옵션이 문제가 없습니다. 찾으시면 TinyMCE로 바꿔주세요.
[/즉시]

Claude는 TinyMCE를 CKEditor로 교체했고 이제 로드됩니다! 그러나 문제가 없는 것은 아닙니다. 이미지를 업로드할 수 없고 기사를 저장할 수 없습니다. 개발 콘솔의 오류:

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
CKEditor를 볼 수 있지만 몇 가지 문제가 있습니다.
기사를 저장할 수 없습니다. 개발자 콘솔에 다음 오류가 표시됩니다. new:1 이름='content'인 유효하지 않은 양식 컨트롤에 포커스를 둘 수 없습니다.
이미지를 업로드할 수 없습니다. 개발 콘솔에 다음 오류가 표시됩니다: ckeditorerror.ts:140 filerepository-no-upload-adapter
고쳐주세요?
[/즉시]

클로드의 말:

발생한 문제에 대해 사과드립니다. 두 가지 문제를 모두 해결해 보겠습니다.
"name='content'인 유효하지 않은 양식 컨트롤은 포커스를 받을 수 없습니다." 오류는 CKEditor가 텍스트 영역을 자체 요소로 대체하여 양식 유효성 검사에 문제가 발생하기 때문에 발생할 수 있습니다. 이 문제를 처리하려면 양식 제출 프로세스를 업데이트해야 합니다.
CKEditor에 대한 업로드 어댑터를 구성하지 않았기 때문에 "filerepository-no-upload-adapter" 오류가 발생합니다. 이미지 업로드를 처리하려면 간단한 업로드 어댑터를 구현해야 합니다.

첫 번째 수정은 쉬워 보였지만 Claude는 파일 업로드를 수용하기 위해 매우 복잡한 Javascript 코드를 추가하고 있었습니다. 나는 뒤로 물러섰다:

[즉시]
업로드 어댑터에 대한 매우 복잡한 코드처럼 보입니다. CKEditor에 내장된 솔루션처럼 더 간단한 솔루션이 없다고 확신하시나요?
[/즉시]

클로드:

복잡한 점에 대해 사과드립니다. 맞습니다. CKEditor의 내장 기능을 사용하는 더 간단한 솔루션이 있습니다. 이미지 업로드는 포함하지 않지만 기본 형식 지정 옵션을 제공하는 CKEditor의 기본 패키지를 사용하여 접근 방식을 단순화해 보겠습니다. 이렇게 하면 복잡한 업로드 어댑터 없이도 두 가지 문제가 모두 해결됩니다.

파일 업로드 기능을 원하지만 이 연습 중에는 그것 없이도 살아갈 수 있습니다. 안타깝게도 일일 API 한도에 도달하여 오늘 활동은 여기까지입니다. 이런 모멘텀 킬러...

하지만 Claude의 수정 사항 중 일부를 미리 살펴보았습니다. 이제 기사를 저장할 수 있지만 미리보기에 HTML 코드가 표시됩니다. 실제로 전체 기사를 볼 수 있는 방법도 없습니다. 내 부분에 대한 감독. 수정해야 합니다!

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

UI를 구축할 때 이전 프롬프트의 일부 단점으로 인해 관리자를 위한 페이지 및 기능이 최종 사용자의 기능과 혼합됩니다. 요즘엔 그걸 청소해야 할 것 같아요. 지금은 몇 가지 수정과 조정을 계속해 보겠습니다. 여기에 또 다른 중요한 내용이 있습니다. 크레딧이 곧 부족하지만 시작합니다!

[즉시]
아직 수정해야 할 몇 가지 버그와 단점이 있습니다.
기사를 작성하고 편집할 때 이미지를 업로드할 수 있는 옵션이 여전히 있습니다. 이미지를 업로드하려고 하면 ckeditorerror.ts:140 오류가 표시됩니다. 에디터를 이용해서 이미지를 업로드할 수 있었으면 좋겠는데 수정 부탁드립니다. 필요한 경우 업로드된 이미지를 저장하기 위해 /static/uploads/ 디렉토리를 사용할 수 있습니다.

주제/[주제 번호] 페이지로 이동하면 기사 미리보기가 표시되지만 HTML 코드가 표시됩니다. 이 페이지는 기사 미리보기 역할을 해야 하며 아마도 이 기사 시작 부분의 일반 텍스트 버전을 볼 수 있을 것입니다. 나중에 이를 조정해야 할 수도 있습니다.
기사를 보려면 새로운 경로가 필요하며 기사는 올바른 형식으로 표시되어야 합니다. 지금은 기사를 클릭하면 편집 모드로 이동합니다. 보기와 편집을 분리해야 합니다.

주제 관리 페이지에서 각 주제에 대해 새 기사를 생성할 수 있는 방법이 있어야 합니다.
새 기사를 작성할 때 페이지 하단에 주제 드롭다운이 있습니다. 이 드롭다운은 사용자가 속한 주제를 상황에 맞게 인식하지 못합니다. 드롭다운은 올바른 주제를 반영해야 합니다.
[/즉시]

Claude가 파일 업로드 기능을 위한 코드를 작성하는 것을 보면서 두 개의 서로 다른 파일에서 동일한 Javascript 블록을 생성하고 있음을 발견했습니다.

[즉시]
new_article.html 및 edit_article.html 파일에 유사한 Javascript 코드가 있는 것 같습니다. 이것을 공통 파일로 생성하고 대신 코드를 공유할 수 있나요?
[/즉시]

클로드:

당신 말이 맞습니다. 좋은 제안입니다. CKEditor 구성을 위한 공통 JavaScript 파일을 생성하고 이를 new_article.html 및 edit_article.html 모두에서 사용하겠습니다.
먼저 static/js 디렉터리에 ckeditor_config.js라는 새 파일을 생성해 보겠습니다.

정말 많은 변화가 있었습니다. 코드 변경 사항을 검토하는 동안 app.py 파일에서 많은 코드가 제거되고 "# … (기존 코드의 나머지 부분)"이라는 텍스트로 대체되는 차이점을 발견했습니다. 나는 이것을 이전에 본 적이 없었고 Claude가 대용량 파일을 처리하는 방법이었을 수도 있고 실제로 기존 코드를 삭제하지는 않을 것입니다. 글쎄, 내가 틀렸어!

Claude가 이러한 조정을 완료했을 때 홈 페이지에 접속하려고 했더니 404였습니다. 많은 코드와 경로가 제거되었으며 80행은 문자 그대로 "# … (기존 코드의 나머지 부분)"입니다. 와, 안 좋네요! 이 문제를 해결할 수 있기를 바라지만 API 제한이 숨어 있는 것 같습니다!

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
안 돼! 마지막 변경 후 app.py 파일에서 많은 코드가 손실된 것 같습니다. app.py의 29행과 80행에서 많은 경로가 사라졌고 "# ... (기존 코드의 나머지 부분)"으로 대체되었습니다. 고쳐주세요!
[/즉시]

클로드:

부주의한 점 사과드립니다. 당신 말이 맞습니다. 이 문제를 즉시 해결하겠습니다. app.py 파일에서 누락된 코드를 복원해 보겠습니다.

Claude가 코드를 고칠 수 있었지만 와, 정말 안 좋은 코드네요. 대체 그게 무슨 소리였나요?

[즉시]
"새 기사" 버튼을 생성하려고 하면 다음 오류가 발생합니다: jinja2.Exceptions.UndefineError: 'csrf_token'이 정의되지 않았습니다
[/즉시]

Claude는 이제 Flask-WTF 패키지가 필요하며 pip를 사용하여 설치할 것이라고 말했습니다. .venv 디렉토리를 사용하라는 시스템 프롬프트가 작동하는지 확인해 보겠습니다…

안돼! Claude가 다시 해냈습니다. 코드 병합 중에 모든 코드를 삭제했습니다! 생성된 코드를 받아들이는 것뿐만 아니라 주의를 기울여야 합니다.

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
이 코드는 받아들일 수 없습니다! 31행 "has # ... (기존 코드의 나머지 부분)"이고 나머지 코드를 다시 제거했습니다!
[/즉시]

Claude가 완료되었을 때 서버가 다시 시작을 시도했지만 "ModuleNotFoundError: 'flask_wtf'라는 모듈이 없습니다"라는 메시지와 함께 실패했습니다. 이는 .venv 디렉터리를 사용하고 있지 않음을 나타내므로 시스템 프롬프트가 작동하고 있다고 생각되지 않습니다. 이는 Claude-Dev 확장 프로그램의 문제일 수 있습니다.

[즉시]
"ModuleNotFoundError: 'flask_wtf'라는 모듈이 없습니다." 오류가 발생하므로 새 라이브러리를 추가할 때 .venv 가상 디렉터리를 사용하고 있는지 확인하세요!
[/즉시]

클로드:

부주의한 점 사과드립니다. 맞습니다. 가상 환경에 Flask-WTF를 설치해야 합니다. 지금 해보자.

그리고… 시계처럼:

좋은 소식은 Claude가 올바른 가상 환경을 사용할 수 있었고 서버가 시작되었다는 것입니다.

나쁜 소식은 새 기사를 제출하려고 하면 또 다른 CSRF 오류가 발생한다는 것입니다. 일어나세요, 클로드. 할 일이 있어요!

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
다음 버그를 수정해주세요:
새 기사를 제출하려고 하면 '잘못된 요청입니다. CSRF 토큰이 누락되었습니다.”
기사를 보려고 하면 HTML 태그가 보입니다. 기사는 태그 없이 형식으로 표시되어야 합니다.

[/즉시]

누군가 기분이 안 좋아서 일어났는데... 거의 사용하지 않고 있는데 벌써 속도 제한에 걸리네요.

[즉시]
아직 몇 가지 버그를 찾는 중입니다. 이것들은 모두 매우 기본적이므로 코드에 넣지 말았어야 했습니다. 코드를 수정해야 할 때마다 비용이 발생하므로 코드를 더 주의 깊게 확인하세요! 아마도 애플리케이션이 충분히 복잡해지고 있어 각 코드 변경 시 실행될 자동화된 테스트를 추가해야 할 때가 아닐까요? 내가 발견한 문제:
기사/2에 있는 것과 같은 기사를 보려고 하면 여전히 HTML 마크업이 표시되고 형식화된 기사가 렌더링되지 않습니다. 아마도 기사가 저장되면 이것이 깨질 것입니까? 나는 그것을보고있다; 그리고 gt; 데이터베이스에서 app.py 라인 416에 "content = html.escape(content)"가 있는지 확인하세요.
새 주제를 만들려고 하면 "잘못된 요청입니다."라는 메시지가 나타납니다. CSRF 토큰이 누락되었습니다.”
새 기사를 작성하려고 하면 "UndefineError jinja2.Exceptions.UndefineError: 'form' is undefine"이 발생합니다.
[/즉시]

클로드가 코드를 변경하는 모습을 보니 녹아내리는 것 같아요. 왜 이 코드를 또 다 삭제하는 걸까요??

Part Using Claude, Claude-Dev and Aider to Build a Ticketing System

[즉시]
왜 그 코드를 모두 다시 삭제하시나요? 35행에는 # ...(기존 모델 정의 및 도우미 함수는 모두 유지)이 있고 다른 모든 코드는 삭제됩니까? 조심하세요!
[/즉시]

클로드:

혼선을 드려 죄송합니다. 당신 말이 옳습니다. 세부 사항에 관심을 가져 주셔서 감사합니다. 기존 코드를 모두 그대로 유지하면서 필요한 사항을 변경해 보겠습니다. 구체적으로 수정이 필요한 부분만 업데이트 하겠습니다.
변경이 필요한 부분에만 집중해서 app.py 파일을 업데이트해보겠습니다

한숨…

[즉시]
35, 37, 46행에는 여전히 해당 주석이 있으며 엄청난 양의 코드 블록을 삭제하게 됩니다. 왜요?
[/즉시]

물론이죠-

저만 이런 문제를 겪을 수는 없습니다. 다른 사람들은 Claude와 함께 수백만 달러를 벌고 있다고 말하는데 나는 모든 버그를 찾는 것 같습니다! 이렇게는 살 수 없어서 Claude-Dev Github 프로젝트에 이슈를 열었습니다: Github 링크

좀 더 조사한 결과, 내 프로젝트가 Github 문제에 설명된 특정 유형의 토큰 제한에 도달한 것 같습니다. 이는 실제로 작업할 수 있는 프로젝트의 복잡성을 제한하며 프로젝트가 더욱 복잡해짐에 따라 많은 API 제한 오류가 발생할 가능성이 있는 원인입니다.

문제를 올바르게 이해하면 코드 품질을 높이기 위해 Claude-dev에서 활성 파일의 전체 내용을 요청으로 주고받습니다. 이로 인해 토큰이 소모되고 어느 시점에서 내 app.py 파일이 너무 커서 관리할 수 없게 되었습니다. 한 가지 제안은 코드를 더 작은 파일로 나누는 것입니다. 1부에서 이것이 우리가 가고 있던 방향이었지만 순환 수입과 Uvicorn에 문제가 있어서 여기까지 왔습니다...

지금은 이 프로젝트를 보류하고 업데이트를 위해 Github 스레드를 팔로우할 것 같습니다. 이는 다가오는 Claude 업데이트가 고통을 덜어줄 것이라는 희망을 줍니다: Github 코멘트

다음: 커서? 지난번 시도했을 때 UX가 그다지 마음에 들지 않았지만 많은 사람들이 전환한 것 같습니다. Cursor는 생산성을 높이기 위해 UI를 사용하는 개발자들에게 새로운 아이인 것 같습니다. 지금 우리에게 필요한 것은 또 다른 IDE이기 때문입니다.

돌고 돌고…

그럼 결론은요?

Claude는 소프트웨어 엔지니어를 교체할 준비가 되어 있나요? 아, 아직은 아니지만 기존 엔지니어의 생산성을 높일 수 있습니다. API 제한은 소규모 프로젝트, 리팩토링, 버그 수정 및 가상 쌍 프로그래머로 사용하는 것 이상으로 제한적입니다.

Claude가 복잡한 코드베이스를 읽고 그 안의 버그를 수정할 수 있다는 이야기를 읽었습니다. 내 경험에 따르면 자체 생성된 코드에 대한 상당히 간단한 프로젝트에서 수정할 수 없는 몇 가지 버그가 발생하여 따뜻함과 모호함을 제공하지 못했습니다. 복잡한 파일 구조를 가진 수십 명의 사람들이 작성한 오래된 코드베이스에서는 어떻게 될까요? Claude는 비즈니스 컨텍스트가 전혀 없었으며 UI 버그를 수정하라는 요청을 받았을 때 이 간단한 프로젝트에서 기존 UI 및 UX 흐름을 일치시키는 데 큰 도움이 되지 않았습니다. 자체적으로 정리하려면 여러 번의 반복이 필요했습니다.

저는 백엔드 코드가 프런트엔드 코드보다 '쉽다'고 생각해서 개인적으로 프로젝트 구조와 뼈대 UI를 구축하는 데 백엔드 코드를 사용하고 싶습니다. Claude의 강점 중 하나는 파일을 업로드하고 Claude에게 코드로 다시 생성하도록 요청할 수 있는 "컴퓨터 비전"입니다. 웹사이트의 UI가 마음에 든다면 이 UI가 좋은 출발점이 될 것입니다. 아마도 이것은 새로운 "소스 보기"일 것입니다. 사람들이 말하는 대로 포용하고 강화하세요.

최초의 메시지 중 하나가 Claude에게 부트스트랩을 사용하여 반응형 UI를 만들라고 요청했지만, 처음으로 모바일 보기를 확인한 결과 iPad Mini 해상도보다 작은 것에서는 실제로 작동하지 않는다는 것을 알았습니다. 좋아 보여요. 그러니 어떤 가정도 하지 마세요. Claude의 코드에는 다른 코드와 동일한 양의 테스트가 필요합니다.

사실 코드 체크인 전에 실행할 수 있는 자동화된 테스트 장치를 구축하는 것이 합리적입니다. 누구도 그런 작업을 좋아하지 않습니다. Claude에게 테스트 작성, 유지 관리 및 실행을 책임지게 하세요. 확실히 탐험해 볼 가치가 있는 거리입니다.

Claude에게 마지막 메시지 중 하나에서 자동화된 기능을 생성해 달라고 요청했지만 토큰 및 API 제한으로 인해 도달하기도 전에 이 실험이 중단되었습니다.

작가 소개

작가소개

Joe Giglio는 소프트웨어 업계에서 25년 이상 경력을 쌓은 베테랑입니다. 그의 경력 중 그는 지역 전화 접속 ISP, 모든 규모의 신생 기업, 잘 확립되고 느리게 움직이는 기업에서 근무했습니다. 매 정거장마다 중요한 교훈을 얻었습니다.

그의 최근 프로젝트는 다음과 같습니다.

원격근무 교육 및 컨설팅: Chiefremoteofficer.com

킨들북 "원격근무, 당신을 위해 일하라"

원격 회사 순위. "원격 기업을 위한 Glassdoor"를 생각해보세요: Remotescorecard.com

Joe의 기본 원칙은 원격 우선, 품질 중심, 고객 옹호, 평생 학습입니다. 그는 내성적이었고 멋있기 전부터 사회적 거리두기를 실천했습니다!

현재 노스캐롤라이나에 거주하고 있는 그는 항상 새로운 기회, 우수한 사람들을 만나고 흥미로운 프로젝트에 대해 배우는 데 관심이 있습니다.

Joe Giglio에 문의하세요: joe -AT- joegiglio.org | 트위터 | 링크드인