TypeScript와 JavaScript¶

Kiro는 TypeScript 및 JavaScript 프로젝트를 위한 강력한 AI 지원 개발 기능을 제공하여 코드를 더 효율적으로 작성하고 디버그하고 유지 관리하는 데 도움을 줍니다.

사전 요구 사항¶

Kiro로 TypeScript 및 JavaScript 개발을 시작하기 전에 다음을 확인하세요:

Node.js: 플랫폼에 맞는 최신 버전 설치
TypeScript: 전역 또는 프로젝트에 로컬로 설치
패키지 관리자: npm (Node.js와 함께 제공) 또는 선호하는 패키지 관리자
Git: 버전 관리 및 협업용

권장 확장 프로그램¶

Kiro로 TypeScript 및 JavaScript 개발 경험을 향상시키려면 다음 유용한 확장 프로그램 설치를 고려하세요:

ESLint - JavaScript/TypeScript를 위한 실시간 코드 품질 피드백 및 린팅
Prettier - Code Formatter - 프로젝트 전체에서 일관된 스타일을 위한 자동 코드 형식 지정
Auto Rename Tag - 편집 시 쌍을 이루는 HTML/JSX 태그를 자동으로 이름 변경
JavaScript (ES6) code snippets - 현대적인 JavaScript 및 TypeScript 개발을 위한 유용한 코드 스니펫 제공

환경 작업¶

프로젝트 구성 및 구조¶

Kiro는 TypeScript 및 JavaScript 프로젝트의 구성 파일을 설정하고 유지 관리하며 Kiro의 모범 사례에 따라 프로젝트를 구성하는 데 도움을 줄 수 있습니다.

예를 들어 Kiro에게 다음을 요청할 수 있습니다:

"Create a tsconfig.json for a React TypeScript project using ES6 modules" "Update my ESLint config to enforce React best practices" "Set up a monorepo structure for my frontend and backend TypeScript code"

코드 분석 및 리팩토링¶

Kiro는 TypeScript 및 JavaScript 코드를 분석하여 문제를 식별하고 개선 사항을 제안할 수 있습니다:

코드 품질 분석: Kiro에게 잠재적인 버그, 성능 문제 또는 스타일 문제에 대한 코드를 검토하도록 요청합니다.
리팩토링 지원: 함수 추출, 변수 이름 변경 또는 코드 재구성에 대한 도움을 받습니다.
타입 추론: Kiro는 JavaScript 코드를 기반으로 TypeScript 타입을 제안할 수 있습니다.

예시 프롬프트:

"Analyze this function for potential bugs" "Refactor this code to use async/await instead of promises" "Convert this JavaScript file to TypeScript with proper types"

디버깅 지원¶

TypeScript 또는 JavaScript 코드에서 오류가 발생하는 경우:

오류 설명: Kiro는 난해한 오류 메시지를 평문으로 설명할 수 있습니다
솔루션 제안: Kiro는 일반적인 오류에 대한 실행 가능한 수정 사항을 제안할 수 있습니다
런타임 디버깅: Kiro는 디버깅 구성 설정에 도움을 줄 수 있습니다

예시:

"Explain this TypeScript error: TS2339: Property 'value' does not exist on type 'never'" "Help me debug this React useEffect infinite loop"

스티어링¶

스티어링을 사용하면 Kiro에게 프로젝트별 컨텍스트와 가이드라인을 제공할 수 있습니다. Kiro는 수정할 수 있는 스티어링 파일을 생성할 수 있습니다:

Product brief (product.md) - 제품, 목적 및 주요 기능에 대한 정보 포함
Technical Stack (tech.md) - 기술, 프레임워크 및 개발 가이드라인 상세 설명
Project Structure (structure.md) - 프로젝트 구성 방법에 대한 정보 제공

TypeScript 및 JavaScript 프로젝트의 경우 추가 사용자 정의 스티어링 파일을 만들어 더 구체적인 가이드를 제공할 수 있습니다.

사용자 정의 스티어링 파일 생성¶

다음 지침을 사용하여 프로젝트에 새 스티어링 문서를 추가합니다.

새 스티어링 문서 추가

사이드바의 Kiro 뷰로 이동합니다.
Agent Steering 섹션에서 + 버튼을 선택하여 새 스티어링 파일을 만듭니다.
설명이 포함된 제목으로 파일 이름을 입력합니다.
마크다운 규칙에 따라 사용자 정의 스티어링 콘텐츠를 추가합니다.

사용자 정의 스티어링 파일은 .kiro/steering/ 디렉토리에 저장되며 상호작용 중에 Kiro가 자동으로 인식합니다.

코드 스타일 및 규칙¶

프로젝트에 대한 사용자 정의 명명 규칙, 파일 구조 또는 관행을 정의할 수 있습니다.

js-conventions.md 스티어링 파일을 만들어 팀의 코딩 표준을 정의할 수 있습니다:

markdown

# TypeScript/JavaScript Conventions ## Naming Conventions - Use camelCase for variables and functions - Use PascalCase for classes and React components - Use UPPER_SNAKE_CASE for constants ## File Structure - One component per file - Group related components in folders - Use index.ts files for exports ## TypeScript Practices - Prefer interfaces over types for public APIs - Use explicit return types for exported functions - Avoid using 'any' type

프레임워크별 가이드라인¶

React 프로젝트의 경우 react-patterns.md 스티어링 파일을 만들 수 있습니다:

markdown

# React Development Guidelines ## Component Structure - Use functional components with hooks - Separate business logic from UI components - Follow the container/presentational pattern ## State Management - Use React Context for global state - Prefer useState for local component state - Use useReducer for complex state logic ## Performance Optimization - Memoize expensive calculations with useMemo - Prevent unnecessary re-renders with React.memo - Use useCallback for event handlers passed to child components

이러한 스티어링 파일은 Kiro가 팀의 특정 규칙 및 모범 사례를 따르는 코드를 생성하는 데 도움을 줍니다.

에이전트 훅¶

Kiro의 에이전트 훅은 일반적인 TypeScript 및 JavaScript 개발 작업을 자동화할 수 있습니다:

Kiro 패널의 Agent Hooks 섹션으로 이동
+ 버튼을 클릭하여 새 훅 만들기
자연어로 훅 워크플로우 정의

다음은 몇 가지 훅 예시입니다:

테스트 생성 훅¶

TypeScript 또는 JavaScript 파일을 저장할 때 자동으로 테스트를 생성할 수 있습니다:

"Create a hook that generates Jest tests when I save a new component"

타입 검사 훅¶

백그라운드에서 TypeScript 타입 검사를 실행할 수 있습니다:

"Set up a hook to run TypeScript type checking when I save files"

종속성 업데이트 훅¶

종속성을 최신 상태로 유지할 수 있습니다:

"Create a hook that checks for outdated npm packages"

ESLint 자동 수정 훅¶

When a JavaScript or TypeScript file is saved: 1. Run ESLint with auto-fix on the file 2. Report any remaining issues that couldn't be fixed automatically 3. Suggest fixes for complex issues

컴포넌트 문서화 훅¶

When a React component file is saved: 1. Extract the component's props interface 2. Update or create a documentation comment above the component 3. Generate usage examples based on the props 4. Update the component's README.md if it exists

MCP 서버¶

Kiro의 Model Context Protocol(MCP) 서버 지원은 전문화된 도구와 기능을 제공하여 TypeScript 및 JavaScript 개발 경험을 향상시킵니다. MCP 설정 및 사용에 대한 전체 가이드는 MCP 문서를 참조하세요.

Frontend MCP 서버¶

AWS Labs Frontend MCP Server는 React 애플리케이션을 위한 포괄적인 문서 및 가이드를 제공하여 현대적인 웹 애플리케이션 개발을 위한 전문화된 도구를 제공합니다:

json

{ "mcpServers": { "frontend": { "command": "uvx", "args": ["awslabs.frontend-mcp-server@latest"], "env": { "FASTMCP_LOG_LEVEL": "ERROR" } } } }

사용 예시:

"Get essential knowledge for React development" "Help me troubleshoot this React component issue" "Show me best practices for modern React applications"

AWS MCP Servers 및 Awesome MCP Servers 컬렉션에서 더 많은 MCP 서버를 탐색하세요.

#docs로 문서 액세스¶

Kiro는 #docs 참조 시스템을 통해 JavaScript, TypeScript 및 인기 있는 프레임워크에 대한 문서에 대한 내장 액세스를 제공합니다. 이를 통해 Kiro와의 대화에 관련 문서를 빠르게 가져올 수 있습니다. 채팅에서 #docs를 입력하고 다음과 같은 사용 가능한 문서 소스에서 선택하기만 하면 됩니다:

#Node.js - Node.js 런타임 문서
#TypeScript - TypeScript 언어 문서
#React - React 라이브러리 문서
#Svelte - Svelte 프레임워크 문서
#Express - Express.js 프레임워크 문서
#Vue.js - Vue.js 프레임워크 문서
#Alpine.js - Alpine.js 프레임워크 문서