Vibe 리팩토링은 vibe coding의 50%¶
이 모듈은 설정 지침에 따라 게임을 로컬로 이미 실행했다고 가정합니다.
이전 모듈에서 우리는:
이제 vibe coding에 대한 숨겨진 진실을 탐색할 시간입니다. 프롬프트의 최소 절반이 "vibe 리팩토링"이 아니라면 아마도 잘못하고 있는 것입니다.
1
문제 이해¶
AI는 예제 컨텍스트를 사용하여 새로운 솔루션을 구현하는 데 매우 능숙합니다. 불행히도 이것은 많은 중복 코드로 이어지는 경향이 있습니다. 이전 모듈에서 우리는 "E" 프롬프트를 살펴보기 시작했습니다. 더 자세히 살펴볼 시간입니다.
다음과 같은 프롬프트를 시도해 보세요:
Where is the interact prompt implemented in the components?
Kiro가 상호작용 프롬프트의 여러 복사본을 찾는 것을 볼 수 있습니다:
The interact prompt is consistently implemented across multiple interactive game objects (Computer, Workbench, Chest, Garbage, GameItem, PullLever, Dispenser)
Computer.vue, Workbench.vue, Chest.vue 등의 파일을 열면 각 컴포넌트에 유사한 CSS를 사용한 상호작용 프롬프트의 매우 유사한 구현이 있음을 알 수 있습니다.
그러나 유령을 게임 플레이 영역 주변으로 이동하면 미묘한 차이도 알 수 있습니다. 예를 들어, pull lever의 상호작용 프롬프트 크기가 작업대 상호작용 프롬프트 크기와 약간 다릅니다.
중복을 제거하여 코드를 개선할 수 있습니다. 여기에 반복되는 패턴이 있습니다. 상호작용 프롬프트를 모든 컴포넌트에서 공유할 수 있는 단일 컴포넌트로 리팩토링하는 것이 더 좋습니다.
2
리팩토링 수행¶
Kiro에게 이것을 리팩토링하도록 요청해 봅시다. "Chest.vue"와 같이 "E" 프롬프트가 포함된 파일을 엽니다. 그런 다음 다음과 같은 프롬프트를 시도합니다:
I want to DRY the "interact-prompt" into a separate component with standardized styles, reused across my components
팁
Kiro는 현재 열려 있는 파일을 컨텍스트로 사용합니다. 프롬프트를 보내기 전에 관련 파일을 여는 것을 고려하세요.
3
결과 확인¶
Kiro는 "interact-prompt" 요소가 있는 모든 컴포넌트를 발견하고 대신 새로운 공유 컴포넌트를 사용하도록 리팩토링해야 합니다:
확인할 사항:
- 원래 구현에는 부모 컴포넌트에 상대적인 다양한 위치의 상호작용 프롬프트가 있습니다: 위, 왼쪽, 오른쪽 등. 리팩토링 중에 손실되었나요?
- 화면 크기에 관계없이 상호작용 프롬프트 텍스트가 적절한 크기로 유지되도록 하는 두 가지 다른 접근 방식이 있었습니다. AI 모델은 어떤 접근 방식을 선택했나요?
팁
신뢰하되 검증도 하세요. AI 모델이 리팩토링을 환상적으로 수행할 수 있지만 리팩토링 중에 기능이 저하되지 않았는지 확인하기 위해 생성된 코드를 항상 다시 확인해야 합니다.
4
더 할 일 찾기¶
Kiro에게 다음과 같이 물어보세요:
Look through my components. Do you see any things that should be refactored or opportunities to implement best practices?
팁
AI 모델은 친절하고 순응적이 되도록 강화 학습을 통해 훈련됩니다. 따라서 모델은 거의 또는 전혀 비판을 시작하거나 요청한 내용에 의문을 제기하지 않습니다. 모델은 요청이 결함이 있더라도 요청한 대로 수행합니다.
그러나 명시적으로 잘못되었거나 개선이 필요한 것으로 보이는 것을 말하도록 요청하여 AI를 코드 검토자 또는 비평가로 사용할 수 있습니다.
이 모듈에서 두 가지 핵심 개념을 배웠습니다:
- Vibe coding은 작동하지만 일반 코딩과 마찬가지로 정기적인 리팩토링이 필요합니다. "vibe 리팩토링"도 수행하세요.
- AI는 직접적으로 모순되거나 요청에 반대하지 않지만 실수를 볼 수 없다는 의미는 아닙니다. 작업을 다시 확인하도록 요청하기만 하면 됩니다.
다음 작업으로 넘어가봅시다: