Firebase 확장 프로그램을 사용하여 웹 앱에 새로운 기능을 빠르게 추가하세요.

1. 소개

목표

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

빌드할 항목

이 Codelab에서는 온라인 마켓플레이스 웹 앱에 다음과 같은 기능을 추가합니다.

• 이미지를 더 빠르게 로드하여 사용자 유지율 높이기
• 데이터베이스의 항목을 제한하여 성능을 개선하고 청구 내역을 줄이기
• 사용자 데이터 보호 강화를 위해 이전 사용자 데이터 자동 삭제 구현

학습 내용

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

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

필요한 사항

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

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

Firebase 프로젝트 만들기

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

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

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

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

Firebase 요금제 업그레이드

Firebase Extensions 및 기본 클라우드 서비스와 Firebase용 Cloud Storage를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불 (Blaze) 요금제를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.

• Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
• Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
• 이벤트의 일환으로 이 Codelab을 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.

프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.

1. Firebase Console에서 요금제를 업그레이드하도록 선택합니다.
2. Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
   이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 업그레이드를 완료하기 위해 Firebase Console의 업그레이드 흐름으로 돌아가야 할 수 있습니다.

이메일 로그인 사용 설정

이 Codelab에서는 인증을 중점적으로 다루지는 않지만 앱을 사용하는 모든 사용자를 고유하게 식별할 수 있도록 앱에 어떤 형태로든 인증이 있는 것이 중요합니다. 이메일 로그인을 사용합니다.

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

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

앱은 Firebase 실시간 데이터베이스를 사용하여 판매할 상품을 저장합니다.

1. Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 실시간 데이터베이스를 선택합니다.
2. 데이터베이스 만들기를 클릭합니다.
3. 데이터베이스의 위치를 선택한 다음 다음을 클릭합니다.
   실제 앱의 경우 사용자와 가까운 위치를 선택해야 합니다.
4. 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책 조항을 읽습니다.
   이 Codelab의 다음 단계에서는 데이터를 보호하기 위해 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
5. 만들기를 클릭합니다.

데이터베이스의 보안 규칙 설정

이제 이 앱에 필요한 보안 규칙을 설정합니다. 다음은 앱을 보호하는 데 도움이 되는 기본 규칙 예시입니다. 이 규칙을 사용하면 누구나 판매 중인 상품을 볼 수 있지만, 로그인한 사용자만 다른 읽기 및 쓰기를 실행할 수 있습니다. 이러한 규칙의 세부정보는 걱정하지 마세요. 앱을 실행하기 위해 복사하여 붙여넣기만 하면 됩니다.

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

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

   {
     "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"
         }
     }
   }
   

3. 게시를 클릭합니다.

Firebase용 Cloud Storage 설정

이 앱은 Firebase용 Cloud Storage를 사용하여 판매할 상품의 이미지를 저장합니다.

Firebase 프로젝트에서 Firebase용 Cloud Storage를 설정하는 방법은 다음과 같습니다.

1. Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 스토리지를 선택합니다.
2. 시작하기를 클릭합니다.
3. 기본 Storage 버킷의 위치를 선택합니다.
   US-WEST1, US-CENTRAL1, US-EAST1의 버킷은 Google Cloud Storage의 '항상 무료' 등급을 활용할 수 있습니다. 다른 모든 위치의 버킷은 Google Cloud Storage 가격 책정 및 사용량을 따릅니다.
4. 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책 조항을 읽습니다.
   이 Codelab의 다음 단계에서는 데이터를 보호하기 위해 보안 규칙을 추가합니다. 스토리지 버킷에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요.
5. 만들기를 클릭합니다.

Storage 버킷의 보안 규칙 설정

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

1. 저장용량 대시보드 상단에서 규칙 탭을 클릭합니다.

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

   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. 게시를 클릭합니다.

3. 샘플 앱 실행

StackBlitz 프로젝트 포크

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

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

1. 시작 코드의 URL인 https://stackblitz.com/edit/friendlymarket-codelab로 이동합니다.
2. StackBlitz 페이지 상단에서 포크를 클릭합니다.

이제 시작 코드의 사본이 나만의 StackBlitz 프로젝트로 저장됩니다. 로그인하지 않았기 때문에 '계정'이 @anonymous로 표시되지만 괜찮습니다. 프로젝트에는 고유한 URL과 함께 고유한 이름이 있습니다. 모든 파일과 변경사항이 이 StackBlitz 프로젝트에 저장됩니다.

프로젝트에 Firebase 웹 앱 추가

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

8. Console로 이동을 클릭합니다.

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

1. StackBlitz로 돌아가 src/firebase-config.js 파일로 이동합니다.
2. 구성 스니펫을 파일에 붙여넣습니다. 이렇게 하면 구성 객체에 자체 프로젝트 값이 포함된 다음과 같이 표시됩니다.

이 앱의 시작점은 무엇인가요?

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

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

앱을 사용해 보세요.

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

file_download이미지 다운로드

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

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

문제

앱에 대한 사용자 조사를 실시한 결과, 대부분의 사용자가 데스크톱이 아닌 스마트폰에서 사이트를 방문한다는 사실을 알게 되었습니다. 하지만 통계에서 모바일 사용자가 몇 초 만에 사이트를 떠나는 경향이 있음을 알 수 있습니다 ('이탈').

궁금해서 모바일 연결 속도로 사이트를 테스트해 봅니다. (여기에서 방법을 알아보세요.) 이미지를 로드하는 데 시간이 매우 오래 걸리고 브라우저에 캐시되지 않는 것으로 확인됩니다. 이 긴 로드 시간은 모든 페이지 조회 시 발생합니다.

해결 방법

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

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

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

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

서버 측이 해결 방법인 것처럼 보이지만, 이 방법도 샘플을 클론하고 설정 안내에 따라 Firebase CLI로 함수를 배포해야 합니다. 이미지 크기 조정은 이러한 일반적인 사용 사례 중 하나입니다. 더 쉬운 해결 방법이 없나요?

더 쉬운 해결 방법

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

이거 좀 보세요. '이미지 크기 조절'이라는 확장 프로그램이 있습니다. 좋아 보입니다.

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

확장 프로그램 설치하기

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

public, max-age=31536000

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

설치가 완료될 때까지 기다리는 동안...

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이 됩니다.

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

1. StackBlitz에서 src/firebase-refs.js 파일을 엽니다.
2. 기존 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)
  };
}

테스트

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

새 게시물을 만들어 확장 프로그램이 작동하는 모습을 확인해 보세요.

1. 앱 상단 표시줄에서 Friendly Market을 클릭하여 홈 화면으로 이동합니다.
2. 앱의 오른쪽 하단에 있는 Sell something(무언가 판매) 버튼을 클릭하여 등록정보를 만듭니다.
3. 제목에 Coffee을 입력합니다.
4. Asking Price(요구 가격)에 1을 입력합니다.
5. 상품 설명에 Selling one cafe latte. It has foam art in the shape of a bear을 입력합니다.
6. 커피 한 잔의 이미지를 컴퓨터에 다운로드하고 상품 이미지 버튼을 사용하여 업로드합니다. file_download이미지 다운로드
7. 모든 입력란을 작성하고 이미지를 업로드한 후 게시를 클릭합니다. 크리스마스 캐럴 아래에 커피 등록정보가 표시됩니다.
8. Firebase Console의 함수 대시보드에서 로그 탭을 클릭합니다. 함수가 실행되었음을 보여주는 함수의 로그가 표시됩니다.

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

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

5. 확장 프로그램 재구성

문제

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

해결 방법

대략적인 계산을 해 본 결과, 한 번에 약 5개의 답안 초안만 저장하면 된다는 것을 알게 되었습니다.

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

1. 확장 프로그램의 세부정보 페이지에서 설치 버튼을 클릭합니다.
2. 마켓플레이스 웹 앱에 사용 중인 Firebase 프로젝트를 선택합니다.
3. 확장 프로그램 구성 단계에 도달할 때까지 화면에 표시되는 안내를 따릅니다.
4. 실시간 데이터베이스 경로에 drafts를 입력합니다. 초안이 저장되는 데이터베이스의 경로입니다.
5. 유지할 최대 노드 수에 5를 입력합니다. 즉, 각 상품 등록정보의 초안 5개가 저장되며, 초안을 추가하면 가장 오래된 초안이 자동으로 삭제됩니다.
6. 확장 프로그램 설치를 클릭합니다.

설치가 완료될 때까지 기다리는 동안...

모니터링 확장 프로그램

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

확장 프로그램 제거하기

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

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

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

프로젝트에 특정 확장 프로그램의 단일 인스턴스만 설치하는 데 국한되지 않습니다. 다른 경로의 항목을 제한하려면 이 확장 프로그램의 인스턴스를 하나 더 설치하면 됩니다. 그러나 이 Codelab에서는 확장 프로그램을 한 번만 설치합니다.

실제 사례 보기

1. 칼림바 또는 라테를 게시할 때 사용한 계정으로 로그인했는지 확인합니다.
2. 답안을 작성합니다.
3. 앱 오른쪽 하단의 Sell something(무언가 판매) 버튼을 클릭합니다.
4. 제목을 '초안 1'로 수정합니다.
5. 초안 섹션까지 아래로 스크롤하여 초안 수를 확인합니다. 두 개 이상이어야 합니다.
6. 상단 앱 바에서 FRIENDLY MARKET 버튼을 클릭합니다. 이렇게 하면 저장된 초안이 생성되지만 게시할 필요는 없습니다.
7. '초안 2', '초안 3', '초안 6'까지 반복합니다.
8. '초안 6'을 만들면 초안 섹션에서 '초안 1'이 사라집니다.
9. 이미지 크기 조절 확장 프로그램에서와 마찬가지로 함수 로그를 확인하여 어떤 함수가 트리거되었는지 확인할 수 있습니다.

앗, 보관할 초안 한도가 너무 작습니다

고객 지원팀에서 연락하여 가장 생산적인 판매자 중 일부가 게시하기 전에 초안이 삭제된다고 불만을 제기하고 있다고 알려줍니다. 팀원과 함께 계산을 확인해 보니 계산이 10,000배나 틀렸습니다.

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

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

완료되었습니다. 확장 프로그램이 업데이트되는 동안 지원팀에 연락하여 수정사항이 이미 배포되고 있다고 알릴 수 있습니다.

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

문제

고객 지원팀에서 다시 연락드렸습니다. 계정을 삭제한 판매자에게 다른 사용자의 이메일이 계속 수신되어 판매자가 화가 났습니다. 이러한 판매자는 계정을 삭제하면 이메일 주소가 시스템에서 삭제될 것으로 예상했습니다.

현재 지원팀에서 각 사용자의 데이터를 수동으로 삭제하고 있지만 더 나은 방법이 있을 것입니다. 이에 대해 생각해 보고 주기적으로 실행되어 삭제된 계정에서 이메일 주소를 삭제하는 자체 일괄 작업을 작성하는 것이 좋겠다고 생각합니다. 하지만 사용자 데이터 삭제는 꽤 흔한 문제인 것 같습니다. Firebase 확장 프로그램도 이 문제를 해결하는 데 도움이 될 수 있습니다.

해결 방법

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

1. 확장 프로그램의 세부정보 페이지에서 설치 버튼을 클릭합니다.
2. 마켓플레이스 웹 앱에 사용 중인 Firebase 프로젝트를 선택합니다.
3. 확장 프로그램 구성 단계에 도달할 때까지 화면에 표시되는 안내를 따릅니다.
4. 실시간 데이터베이스 경로에 sellers/{UID}를 입력합니다. sellers 부분은 하위 요소에 사용자 이메일 주소가 포함된 노드이고 {UID}는 와일드 카드입니다. 이 구성을 사용하면 UID가 1234인 사용자가 계정을 삭제하면 확장 프로그램에서 데이터베이스에서 sellers/1234를 삭제해야 한다는 것을 알 수 있습니다.
5. 확장 프로그램 설치를 클릭합니다.

설치가 완료될 때까지 기다리는 동안...

맞춤설정에 대해 알아보기

이 Codelab에서는 Firebase 확장 프로그램을 사용하여 일반적인 사용 사례를 해결할 수 있고 확장 프로그램을 앱의 요구사항에 맞게 구성할 수 있다는 것을 알아봤습니다.

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

확장 프로그램 및 결제

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

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

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

실제 사례 보기

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

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

6. 실시간 데이터베이스 대시보드로 돌아갑니다. 판매자 정보가 삭제됩니다.

7. 수고하셨습니다.

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

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

다음 단계

다음과 같은 다른 확장 프로그램도 확인해 보세요.

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

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

• Firebase용 Cloud Functions Codelab 확인하기

기타 유용한 문서

확장 프로그램 관리:

• Firebase CLI로 확장 프로그램 관리하기
• 예산 알림 설정
• 설치된 확장 프로그램이 실행되는 빈도 확인하기
• 설치된 확장 프로그램을 새 버전으로 업데이트하기
• 확장 프로그램 제거하기

광고 확장에 대한 세부정보 알아보기:

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