
시작하기 전에
- 실습에서는 정해진 기간 동안 Google Cloud 프로젝트와 리소스를 만듭니다.
- 실습에는 시간 제한이 있으며 일시중지 기능이 없습니다. 실습을 종료하면 처음부터 다시 시작해야 합니다.
- 화면 왼쪽 상단에서 실습 시작을 클릭하여 시작합니다.
Enable the Cloud AI Companion API and grant the necessary IAM roles
/ 20
Build the web app
/ 40
Explain and run the query
/ 40
Google Cloud 개발자는 일상 업무에서 일반적으로 여러 Google Cloud 제품과 서비스를 사용합니다. 이러한 제품은 개발자가 클라우드에서 애플리케이션을 개발, 테스트, 배포, 관리할 수 있게 해줍니다. 개발자는 Gemini의 도움을 받아 Google Cloud 제품을 사용할 때 Gemini의 양방향 채팅, 코드 지원, 임베디드 통합으로 생산성을 높일 수 있습니다.
이 실습에서는 Gemini를 사용하여 다음 작업을 수행합니다.
각 실습에서는 정해진 기간 동안 새 Google Cloud 프로젝트와 리소스 집합이 무료로 제공됩니다.
실습 시작 버튼을 클릭합니다. 실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 팝업이 열립니다. 왼쪽에는 다음과 같은 항목이 포함된 실습 세부정보 패널이 있습니다.
Google Cloud 콘솔 열기를 클릭합니다(Chrome 브라우저를 실행 중인 경우 마우스 오른쪽 버튼으로 클릭하고 시크릿 창에서 링크 열기를 선택합니다).
실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.
팁: 두 개의 탭을 각각 별도의 창으로 나란히 정렬하세요.
필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.
실습 세부정보 패널에서도 사용자 이름을 확인할 수 있습니다.
다음을 클릭합니다.
아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.
실습 세부정보 패널에서도 비밀번호를 확인할 수 있습니다.
다음을 클릭합니다.
이후에 표시되는 페이지를 클릭하여 넘깁니다.
잠시 후 Google Cloud 콘솔이 이 탭에서 열립니다.
Cloud Shell은 여러 개발 도구가 포함된 가상 머신입니다. 5GB의 영구적인 홈 디렉터리를 제공하며 Google Cloud에서 실행됩니다. Cloud Shell을 사용하면 명령줄을 통해 Google Cloud 리소스에 액세스할 수 있습니다. gcloud
는 Google Cloud의 명령줄 도구입니다. Cloud Shell에 사전 설치되어 있으며 탭 자동 완성을 지원합니다.
Google Cloud Console의 탐색창에서 Cloud Shell 활성화()를 클릭합니다.
계속을 클릭합니다.
환경을 프로비저닝하고 연결하는 데는 몇 분 정도 소요됩니다. 연결되면 사용자 인증도 처리되어 프로젝트가 PROJECT_ID로 설정됩니다. 예를 들면 다음과 같습니다.
활성 계정 이름을 나열합니다.
(출력)
(출력 예시)
프로젝트 ID를 나열합니다.
(출력)
(출력 예시)
실습 사용자 인증 정보로 Google Cloud 콘솔에 로그인하고 Cloud Shell 터미널 창을 엽니다.
프로젝트 ID를 설정하기 위해 Cloud Shell에서 다음 명령어를 실행합니다.
로그인된 Google 사용자 계정을 환경 변수에 저장합니다.
Gemini용 Cloud AI Companion API를 사용 설정합니다.
Gemini를 사용하려면 Google Cloud Qwiklabs 사용자 계정에 필요한 IAM 역할을 부여합니다.
이러한 역할을 추가하면 사용자가 Gemini의 지원을 받을 수 있습니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
이 실습에서는 Cymbal Superstore
라는 식료품 웹 앱을 사용합니다. 이 실습의 후속 작업에서 Gemini를 사용하여 새로운 기능을 개발해서 이 앱에 배포합니다. 이번 작업에서는 앱의 프런트엔드와 백엔드 구성요소를 빌드해 봅니다.
Cloud Shell에서 다음 명령어와 다음 두 개의 하위 작업을 실행합니다.
다음 명령어를 실행하여 Docker 사용자 인증 정보 도우미를 실행합니다.
계속 진행할지 묻는 메시지가 표시되면 Y를 입력합니다.
cymbal-superstore
애플리케이션 코드를 다운로드합니다.
웹 앱 백엔드는 제품을 가져오고 업데이트하기 위해 프런트엔드에서 사용되는 Inventory API를 구현합니다.
다음 명령어를 실행하여 백엔드 애플리케이션 컨테이너 이미지를 빌드합니다.
백엔드 컨테이너 이미지를 Artifact Registry에 푸시합니다.
백엔드를 Cloud Run에 서비스로 배포하기 위해 다음 명령어를 실행합니다.
gcloud run deploy
명령어의 출력에 표시되는 Service URL
의 값을 복사합니다.
Cloud Shell 터미널에서 명령어를 실행하여 프런트엔드를 빌드합니다.
백엔드 Cloud Run 엔드포인트에 연결하도록 프런트엔드 코드를 업데이트합니다.
a. Cloud Shell 메뉴 바에서 편집기 열기를 클릭합니다.
b. 편집기 보기 메뉴에서 숨김 파일 전환을 클릭합니다.
c. 탐색기의 폴더 목록에서 cymbal-superstore
를 선택합니다.
d. 프런트엔드
폴더를 펼치고 .env.production
파일을 선택합니다.
e. 파일에서 REACT_APP_INVENTORY_API_URL
에 앞서 복사한 Cloud Run 백엔드 서비스 엔드포인트 URL의 값을 붙여넣어 해당 값을 바꿉니다.
프런트엔드를 빌드하기 위해 터미널 열기를 클릭하고 Cloud Shell에서 다음 명령어를 실행합니다.
프런트엔드 웹 앱을 Cloud Storage에 업로드하기 위해 다음 명령어를 실행합니다.
브라우저에서 탭을 열고 다음 URL로 이동합니다.
웹 앱이 Cymbal Superstore의 홈페이지를 표시합니다.
New Arrivals(신제품)를 클릭합니다.
제품 자리표시자가 포함된 모의 프런트엔드 페이지가 표시됩니다. 이는 정상적인 동작입니다. 이 실습의 후속 작업에서는 새 제품 페이지를 제공하기 위한 백엔드 Inventory API 코드를 구현할 것입니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
이제 Gemini를 사용하여 웹 앱 백엔드에 기능을 추가해 보겠습니다.
이 작업에서는 Gemini에 코드 완성 프롬프트를 입력하여 앱에서 /newproducts
엔드포인트를 구현해 봅니다.
/newproducts
엔드포인트 개발Cloud Shell 편집기에서 backend/index.ts
파일을 엽니다.
index.ts
소스 코드 파일에서 /newproducts
엔드포인트에 대한 주석 자리표시자가 있는 91번 줄로 스크롤합니다.
이 주석 자리표시자를 다음 Gemini 프롬프트로 바꿉니다.
함수 코드를 생성하도록 Gemini에 프롬프트를 입력하기 위해 전체 주석을 선택한 다음 전구()를 클릭합니다.
작업 더보기 메뉴에서 Gemini: 코드 생성을 선택합니다.
생성된 코드 위로 마우스를 가져간 후 Gemini 툴바에서 수락을 클릭합니다.
Gemini가 /newproducts
엔드포인트의 함수 코드를 채웁니다.
생성된 코드는 다음과 비슷합니다.
생성된 코드가 전 단계의 예시와 비슷하지 않은 경우 index.ts
의 코드를 이전 단계의 코드로 바꿉니다.
npm
을 사용하여 로컬로 /newproducts
백엔드 엔드포인트를 테스트해 보겠습니다.
백엔드를 실행하기 전에 PORT 환경 변수를 설정해야 합니다.
Cloud Shell 편집기 메뉴 바에서 보기 > 명령어 팔레트를 선택합니다.
명령어 팔레트에서 user settings json을 입력하고 목록에서 기본 설정: 사용자 설정 열기(JSON)를 선택합니다.
다음 속성을 추가하여 JSON 객체를 업데이트합니다.
쉼표
를 추가해야 합니다.속성을 추가한 후 속성 객체는 다음과 비슷합니다.
Cloud Shell 터미널에서 Firestore에 액세스하도록 애플리케이션을 인증합니다.
안내에 따라 링크를 클릭하여 Google Cloud 계정을 인증하고, 요청 시 승인 코드를 복사하여 붙여넣습니다.
백엔드 서버를 시작하기 위해 다음 명령어를 실행합니다.
백엔드 Inventory API 서버가 시작됩니다. 다음 텍스트가 표시되면 준비된 것입니다.
/newproducts
엔드포인트 호출Cloud Shell 터미널 메뉴 바에서 +를 클릭하여 새 터미널을 엽니다.
API 엔드포인트를 호출하기 위해 다음 명령어를 실행합니다.
명령어 응답에 다음 오류가 표시됩니다.
원래의 터미널 창에서 백엔드에서 로깅된 예외 트레이스를 확인합니다.
트레이스에서 볼 수 있는 예외의 근본 원인은 다음과 같습니다.
Cloud Shell 편집기에서 backend/index.ts
파일을 엽니다.
Gemini Code Assist 채팅 창을 열려면 코드 편집기의 메뉴 바에서 Gemini Code Assist 채팅을 클릭합니다.
Gemini에게 물어보기 프롬프트에서 다음 프롬프트를 입력한 다음 보내기()를 클릭합니다.
Gemini가 이 오류에 대한 설명과 오류를 수정하기 위한 제안을 대답으로 제공합니다. 다음은 예시 대답의 일부입니다.
Gemini also provides a solution to fix the error.
이 오류를 수정하려면 불일치 필터를 하나만 사용해야 합니다.
backend/index.ts
파일에서 quantity
필터를 삭제하기 위해 /newproducts
핸들러에서 다음 코드를 삭제합니다.
이 코드를 삭제하면 타임스탬프를 확인하는 불일치 필터가 하나만 있게 되며 수량이 0인 제품은 API 응답에서 필터링되지 않습니다.
수량이 0인 제품을 삭제하기 위해 products.forEach()
의 코드를 다음 if
문 안에 래핑합니다.
코드를 if 문 안에 래핑한 후의 products.forEach()
코드는 다음과 비슷합니다.
backend/index.ts
파일을 저장합니다.
백엔드 API 서버를 다시 시작하기 위해 터미널에서 다음 명령어를 실행합니다.
다른 bash
터미널로 전환한 다음 curl 명령어를 다시 실행합니다.
백엔드 API가 최근에 추가된 제품 목록이 포함된 json
배열을 응답합니다.
원래 Cloud Shell 터미널에서 Control+C를 입력하여 애플리케이션을 종료합니다.
이전 단계에 따라 업데이트된 백엔드 서비스 컨테이너 이미지를 다시 빌드하고 레지스트리로 이미지를 푸시하고 Cloud Run에 백엔드 서비스를 재배포합니다. 편의를 위해 여기서 반복해서 단계를 알려드리겠습니다.
Cloud Shell에서 새 터미널을 열거나 이미 열려 있는 터미널을 사용합니다.
백엔드 컨테이너 이미지를 빌드하기 위해 저장소로 이미지를 푸시하고 Cloud Run에 백엔드 서비스를 배포하고 다음 명령어를 실행합니다.
브라우저에서 탭을 열고 다음 URL로 이동합니다.
웹 앱이 Cymbal Superstore의 홈페이지를 표시합니다.
New Arrivals(신제품)를 클릭합니다.
이전 작업에서 구현한 /newproducts
엔드포인트의 응답으로 반환된 제품이 페이지에 표시됩니다.
이 작업에서는 Gemini를 사용하여 백엔드에서 새 제품 API를 위한 테스트를 작성해 봅니다.
Cloud Shell 편집기에서 backend/index.test.ts
파일을 엽니다.
Gemini Code Assist 채팅 창을 열려면 코드 편집기의 메뉴 바에서 Gemini Code Assist 채팅을 클릭합니다.
Gemini에 GET 엔드포인트 /newproducts
의 테스트 작성을 위한 도움을 요청하기 위해 아래 프롬프트를 입력하고 보내기()를 클릭합니다.
Gemini가 생성된 테스트 코드를 대답으로 제공합니다. /newproducts
엔드포인트에 대한 describe
코드 블록을 복사하여 backend/index.test.ts
파일에 붙여넣습니다.
테스트를 실행하려면 Cloud Shell 터미널에서 다음 명령어를 실행합니다.
test
명령어의 출력에서 볼 수 있듯이 모든 테스트가 실행 및 통과됩니다.
이 작업에서는 Gemini를 사용하여 BigQuery의 테이블에 데이터를 업로드하고 이 테이블에서 데이터를 가져오는 쿼리를 작성해 봅니다.
Google Cloud 콘솔 탐색 메뉴()에서 BigQuery를 선택합니다.
BigQuery 탐색기 창에서 cymbal_sales
데이터 세트를 펼친 다음 cymbalsalestable
테이블을 선택합니다.
Gemini Cloud Assist 채팅 창을 열려면 Google Cloud 콘솔 상단 메뉴에서 Gemini 열기()를 클릭한 후 채팅 시작을 클릭합니다.
아래 텍스트 프롬프트를 Gemini에 입력한 다음 보내기()를 클릭합니다.
Gemini의 대답을 확인합니다. 대답에는 bq load
명령어가 포함됩니다. 이 명령어를 실행하여 Cloud Storage의 데이터를 BigQuery로 업로드할 수 있습니다.
Cloud Shell에서 다음 명령어를 실행합니다.
BigQuery UI에서 새로고침()을 클릭합니다.
테이블의 스키마를 봅니다.
쿼리를 클릭합니다.
기본 쿼리를 다음으로 바꿉니다.
쿼리를 실행하기 위해 실행을 클릭합니다.
결과 탭에서 테이블의 데이터가 포함된 쿼리 결과를 확인합니다. 테이블에는 Cymbal Superstore 웹 애플리케이션에서 가져온 제품 주간 판매 집계 데이터 샘플이 포함되어 있습니다.
Gemini를 사용하여 주간 판매 총액을 구하는 쿼리를 작성해 보겠습니다.
Gemini에 그다음 8월 12일 주의 판매에 대한 쿼리 생성을 요청하려면 이전에 입력한 쿼리 아래의 동일한 쿼리 필드에서 한 줄을 비워두고 빈 줄 왼쪽에 있는 Gemini()를 클릭합니다.
Gemini로 SQL 생성하기 대화상자에 다음을 입력합니다.
생성을 클릭합니다.
Gemini가 쿼리를 생성할 때까지 기다립니다. 그런 다음 삽입을 클릭합니다.
쿼리를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 현재 선택 항목 설명을 선택합니다. 왼쪽 여백에 표시되는 Gemini 매직 연필을 클릭할 수도 있습니다.
Cloud Assist 채팅 창에 SQL 쿼리에 대한 설명이 제공됩니다.
쿼리를 실행하기 위해 실행을 클릭합니다.
쿼리 결과는 페이지 맨 아래의 결과 탭에 표시됩니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
샘플 판매 거래 데이터가 포함된 Spanner 인스턴스 및 데이터베이스가 이 실습을 위해 사전 프로비저닝되어 있습니다.
이 작업에서는 Gemini를 사용하여 transactions
데이터베이스에서 데이터를 가져오는 SQL 쿼리를 생성해 봅니다.
Google Cloud 콘솔 메뉴의 데이터베이스 아래에서 Spanner를 클릭합니다.
링크를 클릭하여 Spanner 인스턴스 Cymbal Superstore Transactions
를 엽니다.
데이터베이스를 열려면 transactions-db를 클릭합니다.
왼쪽 창에서 데이터베이스 아래의 Spanner Studio를 클릭합니다.
제목 없는 쿼리 탭을 클릭하여 선택합니다.
쿼리 상자에서 Gemini로 SQL 생성하기()를 클릭하고 SELECT를 입력한 다음 생성을 클릭합니다.
Gemini가 SQL 추천 항목을 제공할 때까지 기다립니다.
추천 항목을 사용하려면 삽입을 클릭합니다.
SQL 쿼리에 WHERE
절이 있는 경우 삭제합니다.
쿼리를 실행하기 위해 실행을 클릭합니다.
쿼리 결과를 확인합니다.
Gemini를 사용하여 Google Cloud의 서비스를 운영하고 관리할 수 있습니다. 이 작업에서는 Gemini의 안내에 따라 Cloud Run에서 실행되는 인벤토리 백엔드의 로그를 확인해 봅니다.
Google Cloud 콘솔에서 Cloud Assist 채팅 창을 열려면 상단 메뉴 바에서 Gemini Cloud Assist 채팅()을 클릭합니다.
아래 프롬프트를 Gemini에 입력한 다음 보내기()를 클릭합니다.
Gemini의 안내에 따라 Cloud Run 서비스 inventory
의 로그를 확인합니다.
이 실습에서는 다음을 수행하는 방법을 배웠습니다.
실습을 완료하면 실습 종료를 클릭합니다. Qwiklabs에서 사용된 리소스를 자동으로 삭제하고 계정을 지웁니다.
실습 경험을 평가할 수 있습니다. 해당하는 별표 수를 선택하고 의견을 입력한 후 제출을 클릭합니다.
별점의 의미는 다음과 같습니다.
의견을 제공하고 싶지 않다면 대화상자를 닫으면 됩니다.
의견이나 제안 또는 수정할 사항이 있다면 지원 탭을 사용하세요.
Copyright 2024 Google LLC All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.
현재 이 콘텐츠를 이용할 수 없습니다
이용할 수 있게 되면 이메일로 알려드리겠습니다.
감사합니다
이용할 수 있게 되면 이메일로 알려드리겠습니다.
한 번에 실습 1개만 가능
모든 기존 실습을 종료하고 이 실습을 시작할지 확인하세요.