arrow_back

Firebase로 서버리스 앱 개발: 챌린지 실습

로그인 가입
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Firebase로 서버리스 앱 개발: 챌린지 실습

Lab 1시간 universal_currency_alt 크레딧 5개 show_chart 중급
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP344

Google Cloud 사용자 주도형 실습

개요

챌린지 실습에서는 특정 시나리오와 일련의 작업이 주어집니다. 단계별 안내를 따르는 대신, 과정의 실습에서 배운 기술을 사용하여 스스로 작업을 완료하는 방법을 알아내 보세요. 이 페이지에 표시되어 있는 자동 채점 시스템에서 작업을 올바르게 완료했는지 피드백을 제공합니다.

챌린지 실습을 진행할 때는 새로운 Google Cloud 개념에 대한 정보가 제공되지 않습니다. 학습한 기술을 응용하여 기본값을 변경하거나 오류 메시지를 읽고 조사하여 실수를 바로잡아야 합니다.

100점을 받으려면 시간 내에 모든 작업을 성공적으로 완료해야 합니다.

이 실습은 Develop Serverless Apps with Firebase 과정에 등록한 수강생에게 권장됩니다. 챌린지에 도전할 준비가 되셨나요?

설정 및 요건

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

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

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

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

  • 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)
참고: 이 실습을 실행하려면 시크릿 모드 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학생 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.
  • 실습을 완료하기에 충분한 시간---실습을 시작하고 나면 일시중지할 수 없습니다.
참고: 계정에 추가 요금이 발생하지 않도록 하려면 개인용 Google Cloud 계정이나 프로젝트가 이미 있어도 이 실습에서는 사용하지 마세요.

환경 프로비저닝하기

  1. 프로젝트에 연결합니다.
gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')
  1. 저장소를 클론합니다.
git clone https://github.com/rosera/pet-theory.git

챌린지 시나리오

이 실습에서는 REST API 및 Firestore 데이터베이스를 사용하여 프런트엔드 솔루션을 만듭니다. Cloud Firestore는 NoSQL 문서 데이터베이스로서 규모에 맞춰 모바일 및 웹 앱용 데이터를 저장, 동기화, 쿼리할 수 있는 Firebase 플랫폼에 포함되어 있습니다. 실습 콘텐츠는 Google Cloud 서버리스 인프라를 활용해 과제를 해결한 실제 사례를 바탕으로 하며

다음 아키텍처를 빌드하게 됩니다.

애플리케이션 아키텍처 다이어그램

작업 1. Firestore 데이터베이스 만들기

이 시나리오에서는 Google Cloud에서 Firestore 데이터베이스를 만듭니다. 아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처 다이어그램

요구사항:

필드
Cloud Firestore 기본 모드
위치

Firestore 데이터베이스 만들기

이 섹션을 성공적으로 완료하려면 다음을 구현해야 합니다.

  • Cloud Firestore 데이터베이스
  • Firestore 기본 모드 사용
  • 위치 추가

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. Firestore 데이터베이스 만들기

작업 2. 데이터베이스 채우기

이 시나리오에서는 테스트 데이터를 사용하여 데이터베이스를 채웁니다.

아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처

데이터베이스 채우기

Firestore 스키마 예시:

컬렉션 문서 필드
데이터 70234439 [데이터 세트]

Netflix 프로그램 데이터 세트에 포함된 정보는 다음과 같습니다.

필드 설명
show_id: 모든 영화/TV 프로그램의 고유 ID
type: 식별자 - 영화 또는 TV 프로그램
title: 영화/TV 프로그램의 제목
director: 영화의 감독
cast: 영화/프로그램에 출연한 배우
country: 영화/프로그램이 제작된 국가
date_added: Netflix에 추가된 날짜
release_year: 영화/프로그램의 실제 출시 연도
rating: 영화/프로그램의 등급
duration: 전체 시간 - 분 단위 또는 시즌 수

이 섹션을 완료하려면 다음 작업을 구현해야 합니다.

  1. pet-theory/lab06/firebase-import-csv/solution의 샘플 코드를 사용합니다.
npm install
  1. CSV를 가져오려면 pet-theory/lab06/firebase-import-csv/solution/index.js 노드를 사용합니다.
node index.js netflix_titles_original.csv 참고: Firestore UI에서 데이터를 확인하여 Firestore 데이터베이스가 업데이트되었는지 확인합니다.

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. Firestore 데이터베이스 채우기

작업 3. REST API 만들기

이 시나리오에서는 REST API 예시를 만듭니다.

아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처 다이어그램

Cloud Run 개발

필드
Container Registry 이미지 rest-api:0.1
Cloud Run 서비스 netflix-dataset-service
권한 --allow-unauthenticated

이 섹션을 완료하려면 다음 작업을 구현해야 합니다.

  1. pet-theory/lab06/firebase-rest-api/solution-01에 액세스합니다.
  2. 코드를 Google Container Registry에 빌드하고 배포합니다.
  3. 이미지를 Cloud Run 서비스로 배포합니다.
참고: 최대 1개의 인스턴스를 사용하여 서비스를 배포해야 Cloud Run 인스턴스의 최대 한도를 초과하지 않습니다.
  1. Cloud Run으로 이동하여 netflix-dataset-service를 클릭한 후 서비스 URL을 복사합니다.
  • SERVICE_URL을 위해 netflix-dataset-service에서 URL을 복사합니다.
  • curl -X GET $SERVICE_URL이 {"status":"Netflix Dataset! Make a query."}로 응답해야 합니다.

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. REST API 배포하고 테스트하기

작업 4. Firestore API 액세스

이 시나리오에서는 코드의 업데이트된 버전을 배포하여 Firestore DB에 액세스합니다.

아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처 다이어그램

Cloud Run 버전 0.2 배포하기

필드
Container Registry 이미지 rest-api:0.2
Cloud Run 서비스 netflix-dataset-service
권한 --allow-unauthenticated

이 섹션을 완료하려면 다음 작업을 구현해야 합니다.

  1. pet-theory/lab06/firebase-rest-api/solution-02에 액세스합니다.
  2. 업데이트된 애플리케이션을 빌드합니다.
  3. Cloud Build를 사용하여 이미지 버전을 Container Registry에 태그하고 배포합니다.
  4. 새 이미지를 Cloud Run 서비스로 배포합니다.
참고: 최대 1개의 인스턴스를 사용하여 서비스를 배포해야 Cloud Run 인스턴스의 최대 한도를 초과하지 않습니다.
  1. Cloud Run으로 이동하여 netflix-dataset-service를 클릭한 후 서비스 URL을 복사합니다.
  • SERVICE_URL을 위해 netflix-dataset-service에서 URL을 복사합니다.
  • curl -X GET $SERVICE_URL/2019이 JSON 데이터 세트로 응답해야 합니다.

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. REST API 배포하고 테스트하기

작업 5. 스테이징 프런트엔드 배포

이 시나리오에서는 스테이징 프런트엔드를 배포합니다.

아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처 다이어그램

프런트엔드 배포하기

필드
REST_API_SERVICE REST API 서비스 URL
Container Registry 이미지 frontend-staging:0.1
Cloud Run 서비스 frontend-staging-service

이 섹션을 완료하려면 다음 작업을 구현해야 합니다.

  1. pet-theory/lab06/firebase-frontend에 액세스합니다.
  2. 프런트엔드 스테이징 애플리케이션을 빌드합니다.
  3. Cloud Build를 사용하여 이미지 버전을 Container Registry에 태그하고 배포합니다.
  4. 새 이미지를 Cloud Run 서비스로 배포합니다.
참고: 최대 1개의 인스턴스를 사용하여 서비스를 배포해야 Cloud Run 인스턴스의 최대 한도를 초과하지 않습니다.
  1. 프런트엔드를 통해 REST API 및 Firestore 데이터베이스에 액세스합니다.
  2. 프런트엔드 서비스 URL에 액세스합니다.
참고: 여기에서는 화면의 항목을 보여주기 위해 데모 데이터 세트를 사용하고 있습니다.

서버리스 웹페이지 소개

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. 스테이징 프런트엔드 배포하기

작업 6. 프로덕션 프런트엔드 배포하기

이 시나리오에서는 스테이징 프런트엔드를 업데이트하여 Firestore 데이터베이스를 사용합니다.

아래의 대략적인 아키텍처 다이어그램에는 일반적 아키텍처가 요약되어 있습니다.

Firebase 챌린지 실습 아키텍처 다이어그램

프런트엔드 배포하기

필드
REST_API_SERVICE REST API 서비스 URL
Container Registry 이미지 frontend-production:0.1
Cloud Run 서비스 frontend-production-service

이 섹션을 완료하려면 다음 작업을 구현해야 합니다.

  1. pet-theory/lab06/firebase-frontend/public에 액세스합니다.
  2. 프런트엔드 애플리케이션(예: app.js)을 업데이트하여 REST API를 사용합니다.
  3. SERVICE_URL에 연도를 추가하는 것을 잊지 마세요.
  4. Cloud Build를 사용하여 이미지 버전을 Container Registry에 태그하고 배포합니다.
  5. 새 이미지를 Cloud Run 서비스로 배포합니다. 참고: 최대 1개의 인스턴스를 사용하여 서비스를 배포해야 Cloud Run 인스턴스의 최대 한도를 초과하지 않습니다.
  6. 프런트엔드를 통해 REST API 및 Firestore 데이터베이스에 액세스합니다.

이제 서비스가 배포되었으므로 Firestore 데이터베이스의 콘텐츠를 프런트엔드 서비스를 사용하여 볼 수 있습니다.

서버리스 웹페이지 소개

내 진행 상황 확인하기를 클릭하여 위 작업을 수행했는지 확인합니다. 프로덕션 프런트엔드 배포하기

수고하셨습니다

수고하셨습니다. 이 실습에서는 Firestore 데이터베이스를 만들고, DB를 데이터로 채우고, REST API를 만들고, Firestore 데이터베이스 및 REST API와 상호작용하는 프런트엔드 애플리케이션을 배포했습니다. 또한 스테이징 및 프로덕션 프런트엔드 애플리케이션을 배포하는 방법도 배웠습니다.

Develop Serverless Apps with Firebase 기술 배지

다음 기술 배지 획득

이 사용자 주도형 실습은 Develop Serverless Apps with Firebase 기술 배지 과정의 일부입니다. 이 기술 배지 과정을 완료하면 위의 배지를 획득하여 수료를 인증할 수 있습니다. 이력서 및 소셜 플랫폼에 배지를 공유하고 #GoogleCloudBadge 해시태그를 사용해 스스로 달성한 업적을 널리 알리세요.

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2024년 5월 2일

실습 최종 테스트: 2024년 5월 2일

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