이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase Extensions로 새로운 기능을 웹 앱에 빠르게 추가

1. 소개

목표

이 Codelab에서는 Firebase Extensions를 사용하여 온라인 마켓플레이스 앱에 기능을 추가합니다. 이 Codelab에서는 확장 프로그램을 사용하여 앱 개발 및 관리 작업에 소요되는 시간을 줄이는 방법을 알아봅니다.

빌드할 항목

이 Codelab에서는 온라인 Marketplace 웹 앱에 다음 기능을 추가합니다.

이미지를 더 빠르게 로드하여 사용자 유지율 높이기
데이터베이스의 항목을 제한하여 성능을 개선하고 청구 비용을 절감하세요.
오래된 사용자 데이터의 자동 삭제를 구현하여 사용자 데이터 보호를 강화

학습 내용

일반적인 사용 사례를 위한 확장 프로그램을 탐색하는 방법
프로젝트에 확장 프로그램을 설치하고 구성하는 방법
프로젝트에서 확장 프로그램을 유지 관리 (모니터링, 업데이트, 제거)하는 방법

이 Codelab은 Firebase Extensions에 중점을 둡니다. 이 Codelab에 언급된 다른 Firebase 제품에 관한 자세한 내용은 Firebase 문서 및 기타 Codelab을 참고하세요.

필요한 사항

최신 웹브라우저가 설치된 컴퓨터 (Chrome 권장)
Google 계정

2. Firebase 프로젝트 만들기 및 설정

Firebase 프로젝트 만들기

Firebase Console에서 프로젝트 추가를 클릭하고 Firebase 프로젝트의 이름을 FriendlyMarket으로 지정합니다.
프로젝트 만들기 옵션을 클릭합니다. Firebase 약관에 동의합니다. 이 앱에서는 애널리틱스를 사용하지 않으므로 Google 애널리틱스 설정은 건너뜁니다.
프로젝트가 프로비저닝될 때까지 기다린 후 계속을 클릭합니다.

빌드할 애플리케이션에서는 웹 앱에 사용할 수 있는 몇 가지 Firebase 제품을 사용합니다.

Firebase 인증 - 사용자를 쉽게 식별할 수 있음
Firebase 실시간 데이터베이스 - 클라우드에 구조적 데이터를 저장하고 데이터가 업데이트되면 즉시 알림을 받음
클라우드에 이미지를 저장하는 Firebase용 Cloud Storage

이제 Firebase Console을 사용하여 이러한 Firebase 제품을 사용 설정하고 구성합니다.

이 Codelab에서 인증을 집중적으로 다루지는 않지만, 앱에 일종의 인증을 두어, 앱을 사용하는 모든 사용자를 고유하게 식별하는 것이 중요합니다. 이메일 로그인을 사용합니다.

Firebase Console의 왼쪽 패널에서 개발을 클릭합니다.
인증을 클릭한 후 로그인 방법 탭을 클릭합니다 (또는 여기를 클릭하여 로그인 방법 탭으로 바로 이동).
로그인 제공업체 목록에서 이메일/비밀번호를 클릭하고 사용 설정 스위치를 사용으로 설정한 후 저장을 클릭합니다.

실시간 데이터베이스 사용 설정

앱에서 Firebase 실시간 데이터베이스를 사용하여 판매용 항목을 저장합니다.

Firebase Console의 왼쪽 패널에 있는 개발 섹션에서 데이터베이스를 클릭합니다.
Cloud Firestore 창 옆 페이지를 아래로 스크롤하고 실시간 데이터베이스 창에서 데이터베이스 만들기를 클릭합니다.

잠금 모드에서 시작을 선택한 다음 사용을 클릭합니다.

보안 규칙 설정

이제 이 앱에 필요한 보안 규칙을 설정합니다. 다음은 앱 보안을 위한 몇 가지 기본 예시 규칙입니다. 이 규칙은 누구나 판매 항목을 볼 수 있도록 허용하지만 이 규칙은 로그인한 사용자만 다른 읽기 및 쓰기를 수행하도록 허용합니다. 이러한 규칙의 세부사항은 걱정하지 마세요. 그냥 복사하여 붙여넣으면 앱이 실행됩니다.

실시간 데이터베이스 대시보드 상단에서 규칙 탭을 클릭합니다.

다음 규칙 세트를 복사하여 규칙 탭의 규칙 필드에 붙여넣습니다.

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

게시를 클릭합니다.

Cloud Storage 사용 설정

앱이 Firebase용 Cloud Storage를 사용하여 판매용 항목의 이미지를 저장합니다.

Firebase Console의 왼쪽 패널에 있는 개발 섹션에서 스토리지를 클릭합니다.
시작하기를 클릭합니다.

기본 스토리지 버킷을 만들 때 기본값을 수락합니다 (다음을 클릭하고 기본 위치를 유지한 후 완료를 클릭).

이제 이 앱에 필요한 보안 규칙을 설정합니다. 이러한 규칙은 인증된 사용자의 새 이미지만 게시할 수 있도록 허용하지만 누구나 목록에 있는 항목의 이미지를 볼 수 있도록 허용합니다.

스토리지 대시보드 상단에서 규칙 탭을 클릭합니다.

다음 규칙 세트를 복사하여 규칙 탭의 규칙 필드에 붙여넣습니다.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}

게시를 클릭합니다.

3. 샘플 앱 실행

StackBlitz 프로젝트 포크하기

이 Codelab에서는 여러 Firebase 워크플로가 통합된 온라인 편집기인 StackBlitz를 사용하여 앱을 빌드하고 배포합니다. Stackblitz는 소프트웨어를 설치하거나 특별한 StackBlitz 계정이 필요하지 않습니다.

StackBlitz를 사용하면 다른 사람과 프로젝트를 공유할 수 있습니다. 내 StackBlitz 프로젝트 URL을 아는 다른 사용자가 내 코드를 보고 프로젝트를 포크할 수 있지만 내 StackBlitz 프로젝트를 수정할 수는 없습니다.

다음 URL로 이동하여 시작 코드를 확인합니다.https://stackblitz.com/edit/friendmarket-codelab
StackBlitz 페이지 상단에서 포크를 클릭합니다.

이제 시작 코드의 사본이 자체 StackBlitz 프로젝트로 만들어졌습니다. 로그인하지 않으셨기 때문에 '계정'의 이름은 @anonymous이지만 괜찮습니다. 프로젝트에는 고유한 URL과 고유한 이름이 있습니다. 모든 파일과 변경사항은 이 StackBlitz 프로젝트에 저장됩니다.

프로젝트에 Firebase 웹 앱 추가

StackBlitz에서 src/firebase-config.js 파일을 확인합니다. 여기에 Firebase 구성 객체를 추가합니다.
Firebase Console로 돌아가서 왼쪽 상단의 프로젝트 개요를 클릭하여 프로젝트 개요 페이지로 이동합니다.
프로젝트 개요 페이지 중앙에 있는 웹 아이콘 을 클릭하여 새 Firebase 웹 앱을 만듭니다.
닉네임 FriendlyMarket Codelab으로 앱을 등록합니다.
이 Codelab에서는 또한 이 앱에 Firebase 호스팅 설정 옆의 체크박스를 선택하지 않습니다. 대신 StackBlitz 미리보기 창을 사용합니다.
앱 등록을 클릭합니다.
앱의 Firebase 구성 객체를 클립보드에 복사합니다. <script> 태그를 복사하지 마세요. 참고: 나중에 구성을 찾아야 하는 경우 여기의 안내를 따르세요.

Console로 이동을 클릭합니다.

앱에 프로젝트 구성을 추가합니다.

StackBlitz로 돌아가서 src/firebase-config.js 파일로 이동합니다.
파일에 구성 스니펫을 붙여넣습니다. 이렇게 하면 다음과 같이 표시됩니다 (그러나 구성 객체에 내 프로젝트의 값이 있음).

이 앱의 시작점

StackBlitz 화면 오른쪽에 있는 대화형 미리보기를 살펴보세요.

이 Codelab에서는 먼저 기본 Marketplace 앱의 코드로 시작합니다. 모든 사용자는 판매할 상품 목록을 보고 링크를 클릭하여 상품의 세부정보 페이지를 볼 수 있습니다. 로그인한 사용자에게는 가격을 협상하고 상품을 구매할 수 있도록 판매자의 연락처 정보가 표시됩니다.

앱 사용해 보기:

홈 화면 상단의 버튼을 사용하여 로그인합니다. 가짜 이메일 주소, 이름, 비밀번호를 사용할 수 있습니다.
오른쪽 하단의 판매하기 버튼을 클릭하여 등록정보를 만듭니다.
제목에 Xylophone를 입력합니다.
제안 가격에 50을 입력합니다.
상품 설명에 This high quality xylophone can be used to play music.을 입력합니다.
이 실로폰 이미지를 컴퓨터에 다운로드한 다음 항목 사진 버튼을 사용하여 업로드합니다.

모든 입력란을 작성하고 이미지를 업로드한 후 게시를 클릭합니다.
새 등록정보를 찾습니다. 상품을 클릭하여 세부정보 화면을 확인한 다음 판매자 연락처 정보 패널을 펼칩니다.
Firebase Console로 돌아갑니다. Database 대시보드에서 이제 forsale 노드 아래에 게시한 항목의 항목이 표시됩니다. Storage 대시보드의 friendlymarket 경로에서도 업로드한 이미지를 찾을 수 있습니다.

4. 확장 프로그램 찾기 및 설치

문제

앱에 대한 사용자 연구를 수행한 결과, 대부분의 사용자가 데스크톱이 아닌 스마트폰에서 사이트를 방문한다는 사실을 알게 되었습니다. 그러나 통계에 따르면 모바일 사용자가 몇 초 후에 사이트를 떠나는 경향이 있습니다 ('이탈').

흥미롭게도 모바일 연결 속도로 사이트를 테스트하고 있습니다. 여기에서 방법을 알아보세요. 이미지를 로드하는 데 매우 오래 걸리고 브라우저에 전혀 캐시되지 않습니다. 페이지를 조회할 때마다 로딩 시간이 길어집니다.

해결 방법

이미지를 최적화하는 방법을 읽은 후 이미지 로드 성능을 개선하기 위해 다음 두 단계를 수행하기로 결정합니다.

이미지를 압축합니다. 휴대전화에서도 이 앱에 필요한 것보다 훨씬 높은 해상도로 이미지를 촬영합니다. 파일 크기를 줄이면 앱의 해상도가 현저하게 저하되지 않고 로드 시간이 빨라집니다.
캐싱. 기본적으로 Cloud Storage 객체에는 이미지를 캐시하지 말라고 브라우저에 지시하는 헤더가 있습니다. 즉, 사용자 브라우저가 동일한 이미지를 반복해서 다시 다운로드합니다. 다행히 캐싱을 허용하도록 이러한 헤더를 변경할 수 있습니다. 클라이언트 측 Cloud Storage SDK와 Firebase Admin SDK 모두에서 이러한 헤더를 설정할 수 있습니다.

이미지를 압축하려면 업로드 품질을 제한하거나 이미지 크기를 조정하는 서버 측 프로세스를 이용해야 합니다. 다음과 같은 장단점을 살펴보겠습니다.

클라이언트 측. 클라이언트 측 프로세스의 경우 업로드된 이미지의 파일 크기만 제한할 수 있습니다. 즉, 새로운 서버 로직을 작성하거나 유지할 필요가 없습니다. 또한 판매자가 자체 이미지 크기를 조정하는 방법을 파악해야 하는데, 이는 새 등록정보를 만드는 데 있어 불편하고 직관적이지 않은 장벽으로 작용합니다.
서버 측. Firebase용 Cloud Functions를 사용하는 경우 업로드 시 이미지 크기를 자동으로 조절하는 함수를 트리거할 수 있습니다. 즉, 판매자는 추가 작업 없이 원하는 크기의 이미지를 업로드할 수 있으며 백엔드 함수에서 이미지 크기를 원활하게 조절할 수 있습니다. 이 함수에 사용할 수 있는 샘플도 있습니다.

서버 측이 좋은 방법인 것 같습니다. 하지만 이 아이디어에는 샘플을 클론하고 설정 안내를 따른 다음 Firebase CLI를 사용하여 함수를 배포하는 과정이 포함됩니다. 이미지 크기 조절은 일반적인 사용 사례처럼 들립니다. 더 쉬운 해결책은 없나요?

더 쉬운 해결책

운이 좋으시군요 더 쉬운 해결책이 있습니다. Firebase Extensions입니다! Firebase 웹사이트에서 사용 가능한 확장 프로그램 카탈로그를 확인해 보겠습니다.

보세요! '이미지 크기 조절'이라는 확장 프로그램이 있습니다. 유망해 보이네요.

앱에서 이 확장 프로그램을 사용해 보겠습니다.

확장 프로그램 설치하기

이 확장 프로그램에 대한 자세한 내용을 보려면 세부정보 보기를 클릭합니다. 구성할 수 있는 항목에서 확장 프로그램을 사용하면 크기를 조절하려는 크기를 설정할 수 있으며 캐시 헤더도 설정할 수 있습니다. 완벽해요
확장 프로그램의 세부정보 페이지에서 콘솔에 설치 버튼을 클릭합니다. 그러면 모든 프로젝트가 나열된 Firebase Console 페이지로 이동합니다.
이 Codelab을 위해 만든 FriendlyMarket 프로젝트를 선택합니다.
화면에 표시된 안내에 따라 확장 프로그램 구성 단계까지 이동합니다. 안내에는 확장 프로그램에 대한 기본 요약과 함께 확장 프로그램에서 만들고 필요한 역할에 액세스하는 리소스가 표시됩니다.
**Cache-Control**크기가 조절된 이미지의 헤더 필드에 다음을 입력합니다.

public, max-age=31536000

다른 매개변수는 기본값으로 둡니다.
확장 프로그램 설치를 클릭합니다.

설치가 완료되기를 기다리는 동안...

Firebase 명령줄 인터페이스로 설치

명령줄 도구에 익숙한 경우 Firebase CLI를 사용하여 확장 프로그램을 설치하고 관리할 수도 있습니다. 최신 버전의 CLI에서 사용할 수 있는 firebase ext 명령어를 사용하면 됩니다. 자세한 내용은 여기를 참고하세요.

(선택사항) Cache-Control 헤더에 대해 자세히 알아보기

Cache-Control 헤더 값 public, max-age=31536000는 이미지가 최대 1년 동안 캐시됨을 의미합니다. Cache-Control 헤더에 대해 자세히 알아보려면 이 문서를 확인하세요.

클라이언트 코드 업데이트

설치된 확장 프로그램은 크기가 조절된 이미지를 원본 이미지와 동일한 버킷에 씁니다. 크기가 조절된 이미지의 파일 이름에 구성된 크기가 추가됩니다. 따라서 원래 파일 경로가 friendlymarket/user1234-car.png와 같이 크기가 조절된 이미지의 파일 경로는 friendlymarket/user1234-car_200x200.png과 같습니다.

전체 크기의 이미지 대신 크기가 조절된 이미지를 가져오도록 앱을 업데이트해 보겠습니다.

StackBlitz에서 src/firebase-refs.js 파일을 엽니다.
기존 getImageRef 함수를 다음 코드로 대체하여 크기가 조절된 이미지의 참조를 만듭니다.

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

테스트

이 확장 프로그램은 새 이미지 업로드를 감시하므로 기존 이미지의 크기는 조절되지 않습니다.

새 게시물을 작성하여 확장 프로그램이 어떻게 작동하는지 확인하세요.

앱의 상단 표시줄에서 Friendly Market을 클릭하여 홈 화면으로 이동합니다.
앱의 오른쪽 하단에 있는 판매하기 버튼을 클릭하여 등록정보를 만듭니다.
제목에 Coffee을 입력합니다.
제안 가격에 1을 입력합니다.
상품 설명에 Selling one cafe latte. It has foam art in the shape of a bear을 입력합니다.
이 커피잔 이미지를 컴퓨터에 다운로드한 다음 상품 사진 버튼을 사용하여 업로드합니다.
모든 입력란을 작성하고 이미지를 업로드한 후 게시를 클릭합니다. Xylophone 아래에 커피 목록이 표시됩니다.
Firebase Console의 함수 대시보드에서 로그 탭을 클릭합니다. 함수에서 실행되었음을 보여주는 로그가 표시됩니다.

Storage 대시보드로 이동하여 friendlymarket 경로에서 원본 커피 이미지와 크기가 조절된 버전을 모두 확인합니다.
StackBlitz 미리보기 창에서 앱의 홈 화면을 몇 번 새로고침합니다. 커피 이미지가 실로폰 이미지보다 훨씬 빠르게 로드됩니다.

이 이미지는 첫 번째 페이지 로드 시 더 빠르게 로드되는데 그 이유는 크기가 더 작기 때문이며, 이후 페이지 새로고침 시에는 네트워크 요청을 트리거하는 대신 브라우저 캐시에서 로드됩니다.

5. 확장 프로그램 재구성

문제

앱은 판매자 등록정보의 초안 버전을 자동으로 저장합니다. 사용자는 이 기능을 좋아하지만 통계는 약간 걱정됩니다. 보고서에 따르면 실제로 초안 중 약 10% 만 게시되고 나머지 90% 는 데이터베이스의 공간을 차지하고 있다고 합니다.

해결 방법

어느 정도 시간을 들여 계산한 결과, 한 번에 약 5개의 초안만 저장하면 된다는 것을 알게 되었습니다.

Firebase Extensions 카탈로그를 기억하시나요? 이 상황에 맞게 이미 구축된 솔루션이 있을 수도 있습니다. 저장된 초안 수를 5개 이하로 자동으로 유지하도록 하위 노드 제한 확장 프로그램을 설치해 보겠습니다. 새 초안이 추가될 때마다 확장 프로그램에서 가장 오래된 초안을 삭제합니다.

확장 프로그램의 세부정보 페이지에서 Install(설치) 버튼을 클릭합니다.
Marketplace 웹 앱에 사용 중인 Firebase 프로젝트를 선택합니다.
화면에 표시된 안내에 따라 확장 프로그램 구성 단계까지 이동합니다.
실시간 데이터베이스 경로에 drafts을 입력합니다. 초안이 저장되는 데이터베이스의 경로입니다.
유지할 최대 노드 수에 5을 입력합니다. 즉, 각 항목의 등록정보에 대한 5개의 초안이 저장되고, 다른 초안이 추가되면 가장 오래된 초안이 자동으로 삭제됩니다.
확장 프로그램 설치를 클릭합니다.

설치 완료를 기다리는 동안...

Monitoring 확장 프로그램

확장 프로그램을 설치하면 설치 과정에서 여러 함수가 생성됩니다. 이러한 함수가 실행되는 빈도를 확인하거나 로그 및 오류율을 확인하는 것이 좋습니다. 확장 프로그램을 모니터링하는 방법에 관한 자세한 내용은 설치된 확장 프로그램 관리를 참고하세요. 문서의 안내에 따라 이전 단계에서 이미지 크기 조절 확장 프로그램에서 만든 함수를 확인합니다.

확장 프로그램 제거하기

프로젝트에서 확장 프로그램을 삭제하려는 경우 확장 프로그램에서 생성되는 개별 함수를 삭제하려고 할 수도 있지만, 하나의 확장 프로그램에서 여러 함수를 만들 수 있으므로 예기치 않은 동작이 발생할 수 있습니다. 문서에서 확장 프로그램 제거 방법을 알아보세요.

제거하면 모든 리소스 (예: 확장 프로그램의 함수) 및 해당 확장 프로그램 인스턴스용으로 생성된 서비스 계정이 삭제됩니다. 그러나 확장 프로그램에서 생성한 아티팩트 (예: 크기가 조절된 이미지)는 확장 프로그램을 제거한 후에도 프로젝트에 유지됩니다.

단일 프로젝트에 확장 프로그램의 여러 사본 설치

특정 확장 프로그램의 인스턴스를 하나만 프로젝트에만 설치할 수 있는 것은 아닙니다. 다른 경로의 항목을 제한하려면 이 확장 프로그램의 다른 인스턴스를 설치하면 됩니다. 그러나 이 Codelab에서는 확장 프로그램을 한 번만 설치합니다.

실제 사례 보기

실로폰 또는 라테를 게시할 때 사용한 계정으로 로그인했는지 확인하세요.
초안 생성:
앱의 오른쪽 하단에서 판매하기 버튼을 클릭합니다.
제목을 '초안 1'로 수정합니다.
임시보관함 섹션까지 아래로 스크롤하여 초안 수를 확인합니다. 최소 2개가 있어야 합니다.
상단 앱 바에서 우대 마켓 버튼을 클릭합니다. 이렇게 하면 초안을 저장할 수 있지만 게시할 필요는 없습니다.
'Draft 2', 'Draft 3', 'Draft 6'에 대해서도 같은 작업을 반복합니다.
'초안 6'을 만들 때 '초안 1'이 임시보관함 섹션에서 사라집니다.
이미지 크기 조절 확장 프로그램에서와 마찬가지로 함수 로그에서 트리거된 함수를 확인할 수 있습니다.

보관할 수 있는 초안의 수가 너무 적습니다.

고객 지원팀에서 연락하여 가장 활발한 판매자 중 일부가 게시하기 전에 초안이 삭제된다고 불만을 제기한다고 알립니다. 팀원과 함께 계산한 값을 확인해 보니 계산이 10,000배 줄었다는 것을 알게 되었습니다.

이 문제를 해결하려면 어떻게 해야 하나요? 설치된 확장 프로그램을 다시 구성해 보겠습니다.

Firebase Console의 왼쪽 창에서 확장 프로그램을 클릭합니다.
설치된 확장 프로그램의 카드에서 관리를 클릭합니다.
오른쪽 상단에서 확장 프로그램 재구성을 클릭합니다.
유지할 최대 노드 수를 50000로 변경합니다.
저장을 클릭합니다.

이제 모두 끝났습니다. 확장 프로그램이 업데이트되는 동안 지원팀에 문의하여 수정사항이 이미 배포되고 있다고 알릴 수 있습니다.

6. 사용자 데이터 자동 삭제

문제

고객 지원팀에서 다시 연락을 드렸습니다. 계정을 삭제한 영업 담당자는 여전히 다른 사용자로부터 이메일을 받고 화가 난 상태입니다. 이러한 판매자는 계정을 삭제하면 자신의 이메일 주소가 시스템에서 삭제될 것이라고 예상했습니다.

현재는 지원팀에서 각 사용자의 데이터를 수동으로 삭제했지만 더 나은 방법이 있습니다. 주기적으로 실행되고 삭제된 계정에서 이메일 주소를 지우는 일괄 작업을 작성해 봅니다. 그러나 사용자 데이터를 삭제하는 것은 매우 일반적인 문제로 보입니다. Firebase Extensions도 이 문제를 해결하는 데 도움이 될 수 있습니다.

해결 방법

사용자가 계정을 삭제할 때 데이터베이스에서 users/uid 노드를 자동으로 삭제하도록 사용자 데이터 삭제 확장 프로그램을 구성합니다.

확장 프로그램의 세부정보 페이지에서 Install(설치) 버튼을 클릭합니다.
Marketplace 웹 앱에 사용 중인 Firebase 프로젝트를 선택합니다.
화면에 표시된 안내에 따라 확장 프로그램 구성 단계까지 이동합니다.
실시간 데이터베이스 경로에 sellers/{UID}를 입력합니다. sellers 부분은 하위 요소에 사용자 이메일 주소가 포함된 노드이고 {UID}는 와일드 카드입니다. 이 구성을 사용하면 UID가 1234인 사용자가 계정을 삭제하면 확장 프로그램이 데이터베이스에서 sellers/1234를 삭제해야 한다는 것을 인식합니다.
확장 프로그램 설치를 클릭합니다.

설치 완료를 기다리는 동안...

맞춤설정 가능성에 관해 말씀드리겠습니다

이 Codelab에서는 Firebase Extensions가 일반적인 사용 사례를 해결하는 데 도움이 될 수 있으며 앱의 니즈에 맞게 확장 프로그램을 구성할 수 있음을 확인했습니다.

그러나 확장 프로그램으로 모든 문제를 해결할 수는 없으며 사용자 데이터 삭제 문제가 좋은 예입니다. 사용자 데이터 삭제 확장 프로그램은 사용자가 계정을 삭제한 후에도 이메일이 계속 노출된다는 기존의 불만을 해결하지만 확장 프로그램이 모든 항목을 삭제하지는 않습니다. 예를 들어 항목 목록을 계속 사용할 수 있고 Cloud Storage의 이미지도 그대로 유지됩니다. 사용자 데이터 삭제 확장 프로그램을 사용하면 삭제할 Cloud Storage 경로를 구성할 수 있지만 사용자가 다양한 이름을 가진 여러 파일을 업로드할 수 있으므로 이러한 아티팩트를 자동으로 삭제하도록 이 확장 프로그램을 구성할 수는 없습니다. 이러한 상황에서는 앱의 데이터 모델과 관련된 코드를 작성할 수 있으므로 Firebase용 Cloud Functions가 더 적합할 수 있습니다.

확장 및 결제

Firebase Extensions 자체는 무료로 사용할 수 있지만 (사용한 기본 리소스에 대해서만 비용이 청구됨) 확장 프로그램에 필요한 일부 기본 리소스는 결제가 필요할 수 있습니다. 이 Codelab은 결제 계정 없이 완료하도록 설계되었습니다. 그러나 Flame 또는 Blaze 요금제를 설정하면 정말 흥미로운 Firebase Extensions를 많이 사용할 수 있습니다.

예를 들어 URL 단축, 이메일 트리거, BigQuery로 컬렉션 내보내기 등의 작업을 수행할 수 있습니다. 여기에서 전체 확장 프로그램 카탈로그를 확인하세요.

사용하고 싶은 확장 프로그램이 있지만 현재 사용할 수 없는 경우, Google에 알려 주세요. Firebase 지원팀에 기능 요청을 제출하여 새 확장 프로그램을 제안합니다.

실제 사례 보기

확장 프로그램 설치가 완료되면 사용자를 삭제하고 어떻게 되는지 확인합니다.

Firebase Console에서 실시간 데이터베이스 대시보드로 이동합니다.
sellers 노드를 펼칩니다.
각 판매자의 정보는 사용자 UID에 키가 지정됩니다. 사용자의 UID를 선택합니다.
Firebase Console에서 인증 대시보드로 이동하여 해당 사용자 UID를 찾습니다.
UID 오른쪽에 있는 메뉴를 펼치고 계정 삭제를 선택합니다.

실시간 데이터베이스 대시보드로 돌아갑니다. 판매자의 정보가 사라집니다.

7. 수고하셨습니다.

이 Codelab에서는 코드를 많이 작성하지 않았지만 Marketplace 앱에 중요한 기능을 추가했습니다.

확장 프로그램을 검색, 구성, 설치, 재구성하는 방법을 알아봤습니다. 또한 설치된 확장 프로그램을 모니터링하는 방법과 필요한 경우 이를 제거하는 방법도 알아보았습니다.

다음 단계

다른 확장 프로그램을 확인해 보세요.

Cloud Firestore의 텍스트 문자열 번역 (결제 계정 필요)
Mailchimp 이메일 목록에 새 사용자 추가 (결제 계정 필요)
단축 URL (결제 계정 필요)

서버 측 맞춤 코드가 더 필요하신가요?

Firebase용 Cloud Functions Codelab 확인

기타 유용한 문서

확장 프로그램 관리:

확장 프로그램에 대한 자세한 내용 알아보기

GitHub에서 각 확장 프로그램의 소스 코드 및 문서 보기
확장 프로그램에 부여된 권한 및 액세스에 대해 알아보기

Firebase Extensions로 새로운 기능을 웹 앱에 빠르게 추가

1. 소개

목표

빌드할 항목

학습 내용

필요한 사항

2. Firebase 프로젝트 만들기 및 설정

Firebase 프로젝트 만들기

이메일 로그인 사용 설정

실시간 데이터베이스 사용 설정

보안 규칙 설정

Cloud Storage 사용 설정

3. 샘플 앱 실행

StackBlitz 프로젝트 포크하기

프로젝트에 Firebase 웹 앱 추가

이 앱의 시작점

4. 확장 프로그램 찾기 및 설치

문제

해결 방법

더 쉬운 해결책

확장 프로그램 설치하기

설치가 완료되기를 기다리는 동안...

Firebase 명령줄 인터페이스로 설치

(선택사항) Cache-Control 헤더에 대해 자세히 알아보기

클라이언트 코드 업데이트

테스트

5. 확장 프로그램 재구성

문제

해결 방법

설치 완료를 기다리는 동안...

Monitoring 확장 프로그램

확장 프로그램 제거하기

단일 프로젝트에 확장 프로그램의 여러 사본 설치

실제 사례 보기

보관할 수 있는 초안의 수가 너무 적습니다.

6. 사용자 데이터 자동 삭제

문제

해결 방법

설치 완료를 기다리는 동안...

맞춤설정 가능성에 관해 말씀드리겠습니다

확장 및 결제

실제 사례 보기

7. 수고하셨습니다.

다음 단계

서버 측 맞춤 코드가 더 필요하신가요?

기타 유용한 문서