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

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

1. 소개

목표

이 Codelab에서는 Firebase 확장 프로그램을 사용하여 온라인 마켓 앱에 기능을 추가합니다. 이 Codelab을 통해 확장 프로그램이 앱 개발 및 관리 작업에 소요되는 시간을 줄이는 데 어떻게 도움이 되는지 알아봅니다.

빌드할 항목

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

이미지를 더 빨리 로드하여 사용자 유지율 높이기
데이터베이스의 항목을 제한하여 성능을 개선하고 청구액을 낮추세요
오래된 사용자 데이터의 자동 삭제를 구현하여 사용자 데이터 보호 강화

학습 내용

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

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

필요한 사항

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

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

Firebase 프로젝트 만들기

Google 계정을 사용하여 Firebase Console에 로그인합니다.
버튼을 클릭하여 새 프로젝트를 만든 다음 프로젝트 이름 (예: FriendlyMarket)을 입력합니다.
이 프로젝트 이름은 Firebase 인터페이스에서 표시 이름으로 사용되며, Firebase는 이 프로젝트 이름을 기반으로 고유한 프로젝트 ID를 자동 생성합니다. 지금 수정 아이콘을 클릭하여 원하는 프로젝트 ID를 설정할 수도 있지만 프로젝트를 만든 후에는 이 ID를 변경할 수 없습니다.

나중에 Firebase CLI에서 Firebase 프로젝트를 식별하는 데 필요하므로 프로젝트 ID를 기억해 둡니다. ID를 잊어버린 경우 나중에 언제든지 프로젝트 설정에서 확인할 수 있습니다.
계속을 클릭합니다.
메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
(선택사항) Firebase Console에서 AI 지원('Firebase의 Gemini'라고 함)을 사용 설정합니다.
이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.

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

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

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

Firebase 요금제 업그레이드

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

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

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

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

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

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

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

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

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

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

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

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

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

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

게시를 클릭합니다.

Firebase용 Cloud Storage 설정

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

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

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

스토리지 버킷의 보안 규칙 설정

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

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

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

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

게시를 클릭합니다.

3. 샘플 앱 실행

StackBlitz 프로젝트 포크

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

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

시작 코드는 https://stackblitz.com/edit/friendlymarket-codelab URL에서 확인할 수 있습니다.
StackBlitz 페이지 상단에서 Fork를 클릭합니다.

이제 시작 코드의 사본이 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은 기본적인 마켓 앱의 코드로 시작합니다. 모든 사용자는 판매 중인 항목 목록을 보고 링크를 클릭하여 항목의 세부정보 페이지를 볼 수 있습니다. 사용자가 로그인하면 가격을 협상하고 상품을 구매할 수 있도록 판매자의 연락처 정보가 표시됩니다.

앱을 사용해 보세요.

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

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

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

문제

앱에 대한 사용자 조사를 진행한 결과 대부분의 사용자가 데스크톱이 아닌 스마트폰에서 사이트를 방문하는 것으로 나타났습니다. 하지만 통계에 따르면 모바일 사용자는 몇 초 만에 사이트를 떠나는 경향이 있습니다 ('이탈').

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

해결 방법

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

이미지를 압축합니다. 휴대전화로 촬영한 이미지의 해상도도 이 앱의 요구사항에 필요한 해상도보다 훨씬 높습니다. 파일 크기를 줄이면 앱의 해상도가 눈에 띄게 떨어지지 않으면서 로드 속도가 빨라집니다.
캐싱 기본적으로 Cloud Storage 객체에는 브라우저가 이미지를 캐시하지 않도록 하는 헤더가 있으므로 사용자의 브라우저가 동일한 이미지를 계속 다시 다운로드합니다. 다행히 이러한 헤더를 변경하여 캐싱을 허용할 수 있습니다. 클라이언트 측 Cloud Storage SDK와 Firebase Admin SDK를 사용하면 이러한 헤더를 설정할 수 있습니다.

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

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

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

더 쉬운 해결 방법

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

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

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

확장 프로그램 설치하기

세부정보 보기를 클릭하여 이 확장 프로그램에 대한 자세한 내용을 확인하세요. 구성할 수 있는 항목에서 확장 프로그램을 사용해 크기를 조정할 측정기준을 설정할 수 있으며 캐시 헤더도 설정할 수 있습니다. 완벽해요
확장 프로그램 세부정보 페이지에서 콘솔에 설치 버튼을 클릭합니다. 모든 프로젝트가 나열된 Firebase 콘솔 페이지로 이동합니다.
이 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을 입력합니다.
Asking Price에 1을 입력합니다.
상품 설명에 다음을 입력합니다.Selling one cafe latte. It has foam art in the shape of a bear
이 커피 한 잔 이미지를 컴퓨터에 다운로드하고 상품 사진 버튼을 사용하여 업로드합니다.
모든 필드를 작성하고 이미지를 업로드한 후 게시를 클릭합니다. 커피 목록이 실로폰 아래에 표시됩니다.
Firebase Console의 함수 대시보드에서 로그 탭을 클릭합니다. 함수가 실행되었음을 보여주는 로그가 표시됩니다.

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

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

5. 확장 프로그램 재구성

문제

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

해결 방법

대략적인 계산을 해 보니 한 번에 약 5개의 초안만 저장하면 된다는 것을 알게 됩니다.

Firebase Extensions 카탈로그를 기억하시나요? 이 상황에 맞게 이미 구축된 솔루션이 있을 수도 있습니다. Limit Child Nodes 확장 프로그램을 설치하여 저장된 임시보관함 수를 5개 이하로 자동 유지하세요. 새 초안이 추가될 때마다 확장 프로그램은 가장 오래된 초안을 삭제합니다.

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

설치가 완료되는 동안 다음을 확인하세요.

모니터링 확장 프로그램

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

확장 프로그램 제거

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

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

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

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

실제 사용 사례 보기

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

보관할 임시 저장함의 한도가 너무 작습니다

고객 지원팀에서 연락하여 가장 활발한 판매자 중 일부가 초안을 게시하기 전에 삭제된다고 불만을 제기하고 있다고 알려줍니다. 팀원과 함께 계산을 확인한 결과 10,000배나 차이가 나는 것을 알게 됩니다.

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

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

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

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

문제

고객 지원팀에서 다시 연락을 드렸습니다. 계정을 삭제한 판매자가 다른 사용자로부터 이메일을 계속 받고 있으며 이에 분노하고 있습니다. 이러한 판매자는 계정을 삭제하면 시스템에서 이메일 주소가 삭제될 것으로 예상했습니다.

지금까지는 지원팀에서 각 사용자의 데이터를 수동으로 삭제했지만 더 나은 방법이 있어야 합니다. 이 문제를 해결하기 위해 주기적으로 실행되어 삭제된 계정의 이메일 주소를 정리하는 자체 일괄 작업을 작성하는 것을 고려합니다. 하지만 사용자 데이터를 삭제하는 것은 꽤 일반적인 문제인 것 같습니다. Firebase 확장 프로그램도 이 문제를 해결하는 데 도움이 될 수 있습니다.

해결 방법

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

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

설치가 완료되는 동안 다음을 확인하세요.

맞춤설정에 대해 알아보기

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

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

확장 프로그램 및 결제

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

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

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

실제 사용 사례 보기

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

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

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

7. 수고하셨습니다.

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

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

다음 단계

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

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

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

Firebase용 Cloud Functions Codelab 확인하기

기타 유용한 문서

확장 프로그램 관리:

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

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

Firebase 확장 프로그램을 사용하여 웹 앱에 새로운 기능을 빠르게 추가하세요. 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 소개

목표

빌드할 항목

학습 내용

필요한 사항

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

Firebase 프로젝트 만들기

Firebase 요금제 업그레이드

이메일 로그인 사용 설정

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

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

Firebase용 Cloud Storage 설정

스토리지 버킷의 보안 규칙 설정

3. 샘플 앱 실행

StackBlitz 프로젝트 포크

프로젝트에 Firebase 웹 앱 추가

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

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

문제

해결 방법

더 쉬운 해결 방법

확장 프로그램 설치하기

설치가 완료될 때까지 기다리는 동안 다음 단계를 따르세요.

Firebase 명령줄 인터페이스를 사용하여 설치

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

클라이언트 코드 업데이트

테스트

5. 확장 프로그램 재구성

문제

해결 방법

설치가 완료되는 동안 다음을 확인하세요.

모니터링 확장 프로그램

확장 프로그램 제거

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

실제 사용 사례 보기

보관할 임시 저장함의 한도가 너무 작습니다

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

문제

해결 방법

설치가 완료되는 동안 다음을 확인하세요.

맞춤설정에 대해 알아보기

확장 프로그램 및 결제

실제 사용 사례 보기

7. 수고하셨습니다.

다음 단계

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

기타 유용한 문서

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