기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Amazon Q Developer를 코딩 어시스턴트로 사용하여 생산성 향상 *Ram Kandaswamy, Amazon Web Services* ## 요약 이 패턴은 tic-tac-toe 게임을 사용하여 다양한 개발 작업에 Amazon Q Developer를 적용하는 방법을 보여줍니다. 단일 페이지 애플리케이션(SPA)으로 tic-tac-toe 게임에 대한 코드를 생성하고, UI를 개선하며,에 애플리케이션을 배포하기 위한 스크립트를 생성합니다 AWS. Amazon Q Developer는 소프트웨어 개발 워크플로를 가속화하고 개발자와 비개발자 모두의 생산성을 높이는 데 도움이 되는 코딩 도우미 역할을 합니다. 기술 전문 지식에 관계없이 비즈니스 문제에 대한 아키텍처 및 설계 솔루션을 생성하고, 작업 환경을 부트스트랩하고, 새로운 기능을 구현하고, 검증을 위한 테스트 사례를 생성하는 데 도움이 됩니다. 자연어 지침과 AI 기능을 사용하여 일관된 고품질 코드를 보장하고 프로그래밍 기술과 관계없이 코딩 문제를 완화합니다. Amazon Q Developer의 주요 장점은 반복적인 코딩 작업에서 벗어나는 기능입니다. `@workspace` 주석을 사용하면 Amazon Q Developer는 통합 개발 환경(IDE)에서 모든 코드 파일, 구성 및 프로젝트 구조를 수집 및 인덱싱하고 창의적인 문제 해결에 집중할 수 있도록 맞춤형 응답을 제공합니다. 혁신적인 솔루션을 설계하고 사용자 경험을 개선하는 데 더 많은 시간을 할애할 수 있습니다. 기술적이지 않은 경우 Amazon Q Developer를 사용하여 워크플로를 간소화하고 개발 팀과 더 효과적으로 협업할 수 있습니다. Amazon Q Developer **코드 설명** 기능은 자세한 지침과 요약을 제공하므로 복잡한 코드 베이스를 탐색할 수 있습니다. 또한 Amazon Q Developer는 하급 및 중급 개발자가 스킬 세트를 확장하는 데 도움이 되는 언어에 구애받지 않는 접근 방식을 제공합니다. 언어별 구문 대신 핵심 개념과 비즈니스 로직에 집중할 수 있습니다. 이렇게 하면 기술을 전환할 때 학습 곡선이 줄어듭니다. ## 사전 조건 및 제한 사항 **사전 조건 ** + Amazon Q Developer 플러그인이 설치된 IDE(예: WebStorm 또는 Visual Studio Code). 지침은 [Amazon Q Developer 설명서의 IDE에서 Amazon Q Developer 확장 또는 플러그인 설치를 참조하세요](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html). + Amazon Q Developer에서 활성화된 AWS 계정 설정입니다. 지침은 Amazon Q Developer 설명서의 [시작하기](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html)를 참조하세요. + npm이 설치되었습니다. 지침은 [AWS 설명서](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)를 참조하세요. 이 패턴은 npm 버전 10.8로 테스트되었습니다. + AWS Command Line Interface (AWS CLI)가 설치되었습니다. 지침은 [AWS CLI 설명서](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)를 참조하세요. **제한 사항 ** + Amazon Q Developer는 한 번에 하나의 개발 작업만 수행할 수 있습니다. + 일부 AWS 서비스 는 전혀 사용할 수 없습니다 AWS 리전. 리전 가용성은 [리전별AWS 서비스](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/) 섹션을 참조하세요. 구체적인 엔드포인트는 [서비스 엔드포인트 및 할당량](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html) 페이지를 참조하고 서비스 링크를 선택합니다. ## 도구 + 이 패턴에는 Visual Studio Code 또는 WebStorm과 같은 IDE가 필요합니다. 지원되는 IDEs 목록은 [Amazon Q Developer 설명서를](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE.html#supported-ides-features) 참조하세요. + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)는 명령줄 셸의 명령을 AWS 서비스 통해와 상호 작용하는 데 도움이 되는 오픈 소스 도구입니다. ## 모범 사례 AWS 권장 가이드의 [Amazon Q Developer의 모범 코딩 사례를](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html) 참조하세요. 또한 다음과 같습니다. + Amazon Q Developer에 프롬프트를 제공할 때 지침이 명확하고 모호하지 않은지 확인합니다. 프롬프트`@workspace`에 더 많은 컨텍스트를 제공하려면 프롬프트에와 같은 코드 조각과 주석을 추가합니다. + 관련 라이브러리를 포함하고 가져와서 시스템의 충돌이나 잘못된 추측을 방지합니다. + 생성된 코드가 정확하지 않거나 예상대로 정확하지 않은 경우 **피드백 제공 및 재생성** 옵션을 사용합니다. 프롬프트를 더 작은 지침으로 나눕니다. ## 에픽 ### 작업 환경 설정 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 새 프로젝트를 생성합니다. | 작업 환경에서 새 프로젝트를 생성하려면 다음 명령을 실행하고 모든 질문에 대한 기본 설정을 수락합니다.
npx create-next-app@latest
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 애플리케이션을 테스트하려면 | 다음 명령을 실행하고 브라우저에서 기본 애플리케이션이 성공적으로 로드되는지 확인합니다.
npm run dev
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 기본 코드를 정리합니다. | `src/app` 폴더의 `page.tsx` 파일로 이동하고 기본 콘텐츠를 삭제하여 빈 페이지를 가져옵니다. 삭제 후 파일은 다음과 같아야 합니다.
export default function Home() {
  return (

      );
}
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | ### Amazon Q Developer를 사용하여 tic-tac-toe 게임 프로젝트 설계 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 단계에 대한 개요를 확인합니다. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 앱 개발자, 프로그래머, 소프트웨어 개발자 | | tic-tac-toe용 코드를 생성합니다. | 채팅 패널에서 `/dev` 명령을 사용한 다음 작업 설명을 사용하여 개발 작업을 시작합니다. 예제:
/dev Create a React-based single-page application  written in TypeScript for a tic-tac-toe game with the following specifications:
1. Design an aesthetically pleasing interface with the game grid centered vertically and 
horizontally on the page. 
2. Include a heading and clear instructions on how to play the game.
3. Implement color-coding for X and O marks to distinguish them easily.
Amazon Q Developer는 지침에 따라 코드를 생성합니다. | 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 생성된 코드를 검사하고 수락합니다. | 코드를 시각적으로 검사하고 **코드 수락**을 선택하여 `page.tsx` 파일을 자동으로 교체합니다.문제가 발생하면 **피드백 제공 및 재생성을** 선택하고 발생한 문제를 설명합니다. | 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 보풀 오류를 수정합니다. | 예시 tic-tac-toe 게임에는 그리드가 포함되어 있습니다. Amazon Q Developer가 생성하는 코드는 기본 유형를 사용할 수 있습니다`any`. 다음과 같이 Amazon Q Developer에 메시지를 표시하여 유형 안전을 추가할 수 있습니다.
/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 시각적 어필을 추가합니다. | 원래 요구 사항을 더 작은 조각으로 나눌 수 있습니다. 예를 들어 개발 작업에서 다음 프롬프트를 사용하여 게임 UI를 개선할 수 있습니다. 이 프롬프트는 계단식 스타일 시트(CSS) 스타일을 개선하고 배포를 위해 앱을 내보냅니다.
/dev Debug and fix any CSS issues to correctly display the game grid and overall layout. 

Simplify the code by removing game history functionality and related components. 

Implement static file export to an 'out' directory for easy deployment. The solution 
should be fully functional, visually appealing, and free of typing errors or layout issues.
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 다시 테스트합니다. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 앱 개발자, 프로그래머, 소프트웨어 개발자 | ### 에 애플리케이션 배포 AWS 클라우드 | 작업 | 설명 | 필요한 기술 | | --- | --- | --- | | 배포할 폴더와 파일을 생성합니다. | 작업 환경의 프로젝트에서 배포 폴더와 그 안에 `pushtos3.sh` 및 라는 두 개의 파일을 생성합니다`cloudformation.yml`.
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 자동화 코드를 생성합니다. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 관리자, AWS DevOps, 앱 개발자 | | 스크립트 콘텐츠를 생성합니다. | 다음 스크립트를 실행하여 배포 패키지를 생성합니다.
/dev Modify the pushtos3 shell script so that it can use AWS CLI commands to create a 
CloudFormation stack named tictactoe-stack if it does not exist already, and use 
cloudformation.yml as the source template. Wait for the stack to complete and sync the 
contents from the out folder to the S3 bucket. Perform invalidation of the CloudFront 
origin.
| 앱 개발자, 프로그래머, 소프트웨어 개발자 | | 애플리케이션을 스택에 배포합니다. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 앱 개발자, AWS 관리자, AWS DevOps | ## 문제 해결 | 문제 | Solution | | --- | --- | | 빌드는 단일 페이지 애플리케이션을 생성하거나 출력 폴더로 내보내지 않습니다. | `next.config.mjs` 파일 내용을 삭제합니다.코드에 다음과 같은 기본 구성이 있는 경우:
const nextConfig = {};
다음과 같이 수정합니다.
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## 관련 리소스 + [새 React 프로젝트 생성](https://react.dev/learn/start-a-new-react-project)(React 설명서) + [Amazon Q Developer 개요](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html)(AWS 문서) + [Amazon Q Developer 모범 사례](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html)(AWS 권장 가이드) + [Installing, Configuring, & Using Amazon Q Developer with JetBrains IDEs (How-to)](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) + [명령줄용 Amazon Q 설치](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html)(AWS 문서)