GSP1330

개요

Gemini는 개발팀이 애플리케이션을 더 빠르고 효율적으로 빌드, 배포, 운영할 수 있도록 지원하는 AI 기반 공동작업 도구입니다.

이 실습에서는 개발자용 Gemini가 코드 디버깅을 지원하고 코드 내에서 경계 조건을 테스트할 때와 같은 단위 테스트를 생성하는 방법을 알아봅니다.

이 과정의 실습에서는 애플리케이션 개발자의 관점에서 일반적인 소프트웨어 개발 수명 주기(SDLC)를 다룹니다. SDLC의 다른 측면(요구사항, 보안, 모니터링 등)은 다른 과정에서 다룹니다.

목표

이 실습에서는 다음과 같은 방법으로 개발자를 위한 Gemini를 활용하는 데 중점을 둡니다.

• 개발자를 위한 Gemini의 도움을 받아 런타임 오류를 식별하고 해결합니다.
• 함수에 대한 단위 테스트를 생성합니다.

학습할 내용

Cymbal Superstore는 시장에서 경쟁력을 유지하기 위해 지속적으로 개선을 추구하는 성공적인 온라인 쇼핑 플랫폼입니다. 지속적인 개발 노력의 일환으로 'New Products'(신제품)라는 새로운 기능이 설계되어 사용자가 스토어 인벤토리에 새로 추가된 제품을 쉽게 찾을 수 있게 되었습니다.

새로운 엔드포인트인 newproducts가 스테이징에 배포되었지만 비즈니스 소유자가 원하는 것과는 다릅니다. 여러분은 새 코드를 수정하고 디버깅해야 합니다. 이 실습에서는 개발자용 Gemini가 어떻게 도움이 되는지에 초점을 맞추기 위해 새 코드를 원래 코드베이스에 추가합니다. 백엔드 서비스의 단위 테스트를 개발하라는 요청도 받게 됩니다.

설정 및 요건

실습 시작 버튼을 클릭하기 전에

다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지를 표시합니다.

실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.

이 실습을 완료하려면 다음을 준비해야 합니다.

• 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)

참고: 이 실습을 실행하려면 시크릿 모드(권장) 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학습자 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.

• 실습을 완료하기에 충분한 시간(실습을 시작하고 나면 일시중지할 수 없음)

참고: 이 실습에는 학습자 계정만 사용하세요. 다른 Google Cloud 계정을 사용하는 경우 해당 계정에 비용이 청구될 수 있습니다.

실습을 시작하고 Google Cloud 콘솔에 로그인하는 방법

1. 실습 시작 버튼을 클릭합니다. 실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 대화상자가 열립니다. 왼쪽에는 다음과 같은 항목이 포함된 실습 세부정보 창이 있습니다.

   • Google Cloud 콘솔 열기 버튼
   • 남은 시간
   • 이 실습에 사용해야 하는 임시 사용자 인증 정보
   • 필요한 경우 실습 진행을 위한 기타 정보

2. Google Cloud 콘솔 열기를 클릭합니다(Chrome 브라우저를 실행 중인 경우 마우스 오른쪽 버튼으로 클릭하고 시크릿 창에서 링크 열기를 선택합니다).

   실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.

   팁: 두 개의 탭을 각각 별도의 창으로 나란히 정렬하세요.

   참고: 계정 선택 대화상자가 표시되면 다른 계정 사용을 클릭합니다.

3. 필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.

   {{{user_0.username | "Username"}}}

   실습 세부정보 창에서도 사용자 이름을 확인할 수 있습니다.

4. 다음을 클릭합니다.

5. 아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.

   {{{user_0.password | "Password"}}}

   실습 세부정보 창에서도 비밀번호를 확인할 수 있습니다.

6. 다음을 클릭합니다.

   중요: 실습에서 제공하는 사용자 인증 정보를 사용해야 합니다. Google Cloud 계정 사용자 인증 정보를 사용하지 마세요. 참고: 이 실습에 자신의 Google Cloud 계정을 사용하면 추가 요금이 발생할 수 있습니다.

7. 이후에 표시되는 페이지를 클릭하여 넘깁니다.

   • 이용약관에 동의합니다.
   • 임시 계정이므로 복구 옵션이나 2단계 인증을 추가하지 않습니다.
   • 무료 체험판을 신청하지 않습니다.

잠시 후 Google Cloud 콘솔이 이 탭에서 열립니다.

참고: Google Cloud 제품 및 서비스에 액세스하려면 탐색 메뉴를 클릭하거나 검색창에 제품 또는 서비스 이름을 입력합니다.

Cloud Shell 활성화

Cloud Shell은 다양한 개발 도구가 탑재된 가상 머신으로, 5GB의 영구 홈 디렉터리를 제공하며 Google Cloud에서 실행됩니다. Cloud Shell을 사용하면 명령줄을 통해 Google Cloud 리소스에 액세스할 수 있습니다.

1. Google Cloud 콘솔 상단에서 Cloud Shell 활성화 를 클릭합니다.

2. 다음 창을 클릭합니다.

   • Cloud Shell 정보 창을 통해 계속 진행합니다.
   • 사용자 인증 정보를 사용하여 Google Cloud API를 호출할 수 있도록 Cloud Shell을 승인합니다.

연결되면 사용자 인증이 이미 처리된 것이며 프로젝트가 학습자의 PROJECT_ID, (으)로 설정됩니다. 출력에 이 세션의 PROJECT_ID를 선언하는 줄이 포함됩니다.

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud는 Google Cloud의 명령줄 도구입니다. Cloud Shell에 사전 설치되어 있으며 명령줄 자동 완성을 지원합니다.

3. (선택사항) 다음 명령어를 사용하여 활성 계정 이름 목록을 표시할 수 있습니다.

gcloud auth list

4. 승인을 클릭합니다.

출력:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (선택사항) 다음 명령어를 사용하여 프로젝트 ID 목록을 표시할 수 있습니다.

gcloud config list project

출력:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 참고: gcloud 전체 문서는 Google Cloud에서 gcloud CLI 개요 가이드를 참고하세요.

작업 1. 코드 조사, 생성, 테스트하기

환경 변수 설정하기

1. Cloud Shell에서 다음 명령어를 실행하여 필요한 환경 변수를 설정합니다.

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. 필요한 파일을 Cloud Storage 버킷에서 Cloud Shell로 복사합니다.

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

코드 조사하기

Gemini는 익숙하지 않은 코드 세그먼트를 설명할 수 있을 뿐만 아니라 향후 유지보수 주기 동안 이해도를 높이기 위해 코드에 추가할 주석을 생성할 수도 있습니다.

3. Cloud Shell 창 오른쪽 상단에 표시된 편집기 열기 옵션을 클릭하여 편집기를 엽니다.

그러면 Visual Studio Code 편집기가 열립니다. Cloud Shell의 메뉴 바에 있는 옵션을 사용하여 새 창에서 편집기를 볼 수 있습니다.

4. 파일 > 폴더 열기...로 이동합니다.

5. cymbal-superstore 디렉터리를 선택하고 확인을 클릭합니다.

이제 선택한 폴더가 Visual Studio Code 편집기의 탐색기 섹션에 표시됩니다.

6. backend 폴더 아래 index.ts 파일을 엽니다.

7. 파일 오른쪽 상단에서 Gemini 옆에 있는 화살표를 클릭합니다.

8. Gemini Code Assist 프로젝트 선택을 클릭하여 Gemini에 사용할 프로젝트를 선택합니다. 목록에서 프로젝트 ID를 선택합니다.

9. 편집기 하단에 Gemini Code Assist가 선택한 프로젝트에 대해 사용 설정되지 않았다는 메시지가 표시되면 메시지에서 API 사용 설정 버튼을 클릭하여 API를 사용 설정합니다.

코드 생성하기

10. index.ts 파일에서 /newproducts endpoint code goes here라는 텍스트가 있는 102번 줄로 스크롤합니다. 이 줄을 아래에 표시된 주석으로 바꿉니다.

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. 새로 추가된 댓글을 선택하고 표시되는 노란색 전구 아이콘을 클릭합니다. 목록에서 Gemini: Generate code 옵션을 클릭합니다.

12. Gemini가 몇 가지 추천 코드를 표시합니다. 추천된 코드를 살펴보고 수락을 클릭하거나 Tab 키를 눌러 수락합니다. 다음과 유사한 코드가 표시됩니다.

참고:

1. Gemini는 '재고가 있다'의 의미를 알고 있었습니다. 이는 일반적인 의미로 널리 이해되는 문구이므로 Gemini는 이를 사용했습니다. 요구사항이 일반적이지 않은 경우 예시가 필요할 수 있습니다.
2. 수량이라는 이름의 데이터 속성을 사용하면 Gemini가 이를 '재고 있음'이라는 개념과 연결할 수 있습니다. 변수, 속성, 메서드의 이름을 약어, 축약어 또는 기타 비표준 용어로 지정하면 다른 사람이 코드를 유지보수하기 어려워질 뿐만 아니라 Gemini의 제안도 구체적이지 않게 됩니다.
3. 명시하지 않았음에도 Gemini는 파일의 다른 엔드포인트와 일관성을 유지하기 위해 데이터베이스 실행 확인을 포함한 코드를 제안했습니다.

코드 테스트하기

13. Cloud Shell 창의 툴바에 있는 터미널 열기 버튼을 사용하여 Cloud Shell 터미널로 다시 전환합니다. Cloud Shell 터미널에서 다음 명령어를 실행합니다.

cd ~/cymbal-superstore/backend npm run start

출력은 다음과 유사하게 표시됩니다.

14. Cloud Shell 창의 툴바에서 + 옵션을 클릭하여 Cloud Shell에서 다른 터미널을 열고 localhost에서 엔드포인트를 호출합니다.

curl localhost:8000/newproducts

첫 번째 터미널에서 출력을 확인하면 취소되었고 오류가 발생했음을 알 수 있습니다.

출력은 다음과 유사하게 표시됩니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다. 코드 생성 및 테스트하기

작업 2. Gemini 채팅으로 조사하기

1. 편집기에서 index.ts 파일을 엽니다.

2. 스크린샷에 표시된 대로 Gemini Chat을 열고 프롬프트에 주어진 오류 메시지를 입력합니다.

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

출력은 다음과 유사하게 표시됩니다.

참고: Gemini는 실행할 때마다 다른 결과를 생성하므로, 표시되는 결과가 대답과 일치하지 않을 수 있습니다.

3. 코드를 검사하여 기존 문제를 해결합니다. 아래 명령어는 오류의 원인으로 판단되는 명령어입니다.

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

Gemini의 대답은 필터를 등호 필터로 수정하거나 부등호 필터 중 하나를 삭제하는 옵션을 제공합니다.

먼저 Firestore 호출에서 수량 필터를 삭제하여 오류를 해결해 보겠습니다.

4. 수량 불일치 필터를 삭제하려면 index.ts 파일에서 다음 코드 프래그먼트를 삭제합니다.

.where("quantity", ">", 0);

이 코드를 삭제하면 함수가 오류 없이 작동합니다. 수량이 0인 제품은 API 응답에서 필터링할 수 없으므로 비즈니스 요구사항을 충족하지 못하고 실패합니다. 재고가 없는 상품을 삽입하지 않도록 주의해야 합니다. 이러한 문제를 해결하는 데는 몇 가지 적절한 접근방식이 있습니다. 어떤 방법은 다른 방법보다 더 효과적일 수 있습니다. 따라서 Gemini의 도움을 요청합니다.

5. Gemini 채팅에 아래 질문을 입력하고 index.ts 파일이 열려 있는지 확인합니다.

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

출력은 다음과 유사하게 표시됩니다.

채팅을 재설정한 후에도 Gemini가 두 개의 where 절을 추가하라고 반복적으로 제안하는 경우 다른 대답을 얻기 위한 기법이 있습니다.

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

Gemini는 종종 시도해 볼 수 있는 대안을 제시합니다. Firestore가 아닌 옵션을 얻으려면 채팅을 재설정하고 프롬프트를 몇 번 수정해야 할 수 있습니다.

참고: Gemini가 고집을 부리며 무작위의(규칙에 맞지 않는) Firestore 옵션만 제공하는 경우가 있습니다. 이 경우 학습자는 제공된 제안을 따라 진행해야 합니다.

출력은 다음과 유사하게 표시됩니다.

6. index.ts 파일에 코드 스니펫을 추가하여 기존 코드를 수정합니다.

if (p.quantity > 0) { productsArray.push(p); }

수정 후 코드는 다음과 같습니다.

위의 변경사항을 적용하여 코드를 테스트합니다.

7. Cloud Shell 터미널을 열고 아래 명령어를 붙여넣습니다.

cd ~/cymbal-superstore/backend npm run start

8. 두 번째 터미널 탭을 열고 엔드포인트 localhost를 호출합니다.

curl localhost:8000/newproducts

출력은 다음과 유사하게 표시됩니다.

9. 인라인 주석을 사용해 다른 방법을 시도하고 위에서 추가한 조건을 삭제해 보겠습니다. 최종 코드는 다음과 유사합니다.

10. productsArray.push(p) 줄 앞에 주어진 아래의 주석을 추가합니다. Ctrl+Enter를 눌러 코드를 생성합니다. if (p.quantity > 0)을 반환하면 코드를 수락합니다.

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

필터를 주석 처리하면 다음과 같이 표시됩니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다. Gemini 채팅으로 조사하기

참고: 이 수정사항을 코딩하는 방법은 다양하므로 Gemini가 여러 가지 제안을 제공할 수 있습니다. 이런 경우 옵션을 평가해야 합니다. 이로 인해 위와 같이 일부 문법 패치가 발생할 수도 있습니다.

작업 3. 테스트 실행하기

1. Cloud Shell 터미널로 이동하여 아래 명령어를 실행합니다.

cd cymbal-superstore/backend npm run test

출력은 다음과 유사하게 표시됩니다.

2. 백엔드 폴더 아래의 index.test.ts 파일을 엽니다. 이 파일에는 Jest 테스트 프레임워크를 사용하여 supertest라는 도구로 개발된 몇 가지 간단한 테스트가 포함되어 있습니다. 기존 테스트를 검토하고 Gemini에게 명확하지 않은 부분을 설명해 달라고 요청합니다.

작업 4. Gemini를 활용한 테스트 개발하기

이 작업에서는 Gemini를 활용하여 백엔드에서 신제품 API를 위한 테스트를 작성해 봅니다.

테스트 개발하기

1. 백엔드 폴더 아래의 index.test.ts 파일을 엽니다. 파일 하단에 아래 주석을 추가합니다.

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. 새로 추가된 댓글을 선택하고 표시되는 노란색 전구 아이콘을 클릭합니다. 목록에서 Gemini: Generate code 옵션을 클릭합니다. tab 키를 눌러 제안을 수락합니다.

생성된 코드의 예시입니다. 아래에 제공된 코드를 붙여넣을 수도 있습니다.

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

테스트 실행하기

3. Cloud Shell 터미널에서 아래 명령어를 실행합니다.

cd ~/cymbal-superstore/backend npm run test

출력은 다음과 유사하게 표시됩니다.

4. 터미널 출력에서 결과를 스크롤하여 실패한 테스트를 조사합니다.

참고: 테스트가 실패했음을 나타내는 응답이 표시됩니다. 값 10은 수량이 0인 제품을 포함한 신제품 수였습니다. 새로운 비즈니스 요구사항에 따라 재고가 없는 항목은 필터링해야 하지만 테스트 결과 문제가 있는 것으로 나타났습니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다. 신제품 API에 대한 테스트 작성하기

버그 수정하기

5. 백엔드 폴더 아래의 index.ts를 열고 이전 작업에서 추가한 필터의 주석을 삭제합니다. 업데이트된 코드는 다음과 같습니다.

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. Cloud Shell 터미널에서 테스트를 다시 실행합니다.

cd ~/cymbal-superstore/backend npm run test

출력은 다음과 유사하게 표시됩니다.

작업 5. 경계 조건 테스트하기

경계 조건 테스트는 어려울 수 있습니다. 발생해서는 안 되지만 실행 중에 발생할 수 있는 빈 목록이나 음수 잔액과 같은 예기치 않은 상황을 고려해야 하기 때문에 그렇습니다. 이러한 상황에서 Gemini가 도움이 될 수 있는지 살펴보겠습니다.

1. 가장 일반적인 대답을 제공하려면 열려 있는 모든 파일을 닫습니다. 채팅 위의 새 채팅 아이콘(+)을 클릭하여 Gemini 채팅을 재설정하고 다음 프롬프트를 입력합니다.

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

출력은 다음과 유사하게 표시됩니다.

네, 경계 조건에 대한 테스트를 생성하는 데 도움을 드릴 수 있습니다. 경계값 분석은 소프트웨어 테스트의 중요한 부분입니다. 입력 도메인의 '에지' 또는 '경계'에서 테스트하는 것을 포함합니다. 이러한 곳에 오류가 숨어 있는 경우가 많습니다. 최대한 도와드리려면 몇 가지 정보가 더 필요합니다. 예를 들면 다음과 같습니다. - 어떤 프로그래밍 언어를 사용하고 있나요? - 테스트하려는 코드(또는 코드 스니펫)를 제공해 주시겠어요? - 입력과 예상되는 유효 범위는 무엇인가요?

2. backend 폴더 아래 index.ts 파일을 열어 Gemini에 대한 몇 가지 배경 정보를 제공합니다. Gemini에게 /newproducts 엔드포인트의 경계 테스트에 관해 질문합니다. Gemini 채팅을 열고 다음을 입력합니다.

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

출력은 다음과 유사하게 표시됩니다.

참고: 일부는 코드 자체(지난 7일 동안 추가되었고 재고가 있음)를 기반으로 생성되었으며, Gemini가 이 유형의 코드에 일반적이라고 판단한 보다 일반적인 경계 조건도 포함되어 있습니다. 이는 견고한 경계 조건 집합을 만드는 데 매우 유용합니다.

3. 실제 테스트로 전환하려면 index.test.ts 파일을 엽니다. 아래 주석을 복사하여 파일 끝에 추가합니다.

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

출력은 다음과 유사하게 표시됩니다.

4. index.test.ts 파일에서 위의 주석 뒤에 아래 코드를 추가합니다.

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. Cloud Shell 터미널에서 테스트를 다시 실행합니다. 아래와 같은 출력이 표시됩니다.

출력은 다음과 유사하게 표시됩니다.

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다. 경계 조건 테스트

수고하셨습니다

이 실습을 마치면 개발자용 Gemini를 활용하여 코드 디버깅 기능을 개선하고 단위 테스트 생성을 간소화하는 데 능숙해집니다. 특히 코드 내에서 경계 조건을 평가할 때 유용합니다.

설명서 최종 업데이트: 2025년 10월 17일

실습 최종 테스트: 2025년 10월 17일

Copyright 2025 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.