훅으로 자산 관리¶

이 모듈은 설정 지침에 따라 게임을 로컬로 이미 실행했다고 가정합니다.

이전 모듈에서 우리는:

이제 Kiro를 사용하여 이 게임을 코딩하는 데 수반되는 보일러플레이트 작업을 제거하는 데 도움이 되는 자동화를 설정할 것입니다.

1

문제 이해¶

client/src/systems/preloader-system.ts 파일을 엽니다. 이 파일은 게임이 시작되기 전에 모든 게임 자산이 미리 로드되도록 하는 독립형 시스템입니다. 사용자가 여전히 인증 화면에 있는 동안 사전 다운로드를 시작하고 서버 이벤트를 통해 로드할 새 자산을 감지하는 것과 같은 몇 가지 영리한 기능이 있습니다.

그러나 프리로더 시스템은 /client/src/assets/index.ts에서 가져온 정적 자산 목록에도 의존합니다. 프리로더 시스템은 게임 컴포넌트 자체와 완전히 분리되어 있습니다. 이것은 개별 게임 컴포넌트가 프리로더에 대한 호출을 수동으로 구현할 필요가 없도록 하는 깔끔한 설계입니다.

그러나 잠재적인 문제가 발생합니다: 개발자가 새 자산이 있는 새 게임 컴포넌트를 추가하고 프리로더의 정적 자산 목록에 추가하는 것을 잊을 수 있습니다. 이를 피하는 데 도움이 되는 자동화된 훅을 추가하는 동시에 게임 개발자의 시간을 절약해 봅시다.

2

자산 인덱서 훅 생성¶

IDE 사이드바에서 유령 아이콘을 클릭하여 Kiro 패널을 엽니다. "Agent Hooks" 섹션을 찾아 플러스 아이콘을 클릭하여 새 훅 작성을 시작합니다.

훅에 대한 사용자 정의 프롬프트를 사용해 봅시다. 자연어로 입력하여 원하는 일이 일어나도록 설명할 수 있습니다. 예를 들면:

When a file is created in the assets folder, ensure that the assets folder index.ts file is appropriately updated

alt !!alt

Kiro는 자연어 쿼리를 설명한 동작에 대한 에이전트 훅 구성으로 확장합니다. 훅은 .kiro/hooks 폴더에 저장됩니다. 다음과 같이 보일 것입니다:

alt !!alt

json

{ "name": "Image Asset Indexer", "description": "Automatically adds references to newly added image files in the assets folder to the index.ts file", "version": "1", "when": { "type": "fileCreated", "patterns": [ "client/src/assets/*.png", "client/src/assets/*.jpg", "client/src/assets/*.jpeg", "client/src/assets/*.gif", "client/src/assets/*.svg" ] }, "then": { "type": "askAgent", "prompt": "A new image file has been added to the assets folder. Please update the index.ts file in the assets folder to include a reference to this new image. First, check the current structure of the index.ts file to understand how images are referenced. Then add an appropriate export statement for the new image file following the existing pattern. Make sure to maintain alphabetical order if that's the current convention." } }

3

자산 제거 훅 생성¶

이제 에이전트 훅에 대한 예제 템플릿이 있으므로 .kiro/hooks 폴더에 새 파일을 만들어 수동으로 새 훅을 만들 수도 있습니다.

자산 인덱서 훅을 복제하고 자산 제거 훅으로 편집하여 이것을 시도해 봅시다. 기존 훅을 복사하여 다음과 같은 내용으로 image-asset-remover.kiro.hook으로 붙여넣습니다:

json

{ "name": "Image Asset Remover", "description": "Automatically removes references to newly deleted image files in the assets folder to the index.ts file", "version": "1", "when": { "type": "fileDeleted", "patterns": [ "client/src/assets/*.png", "client/src/assets/*.jpg", "client/src/assets/*.jpeg", "client/src/assets/*.gif", "client/src/assets/*.svg" ] }, "then": { "type": "askAgent", "prompt": "An image file has been removed from the assets folder. Please update the index.ts file in the assets folder to remove any references to this removed image." } }

alt !!alt