1. 개요
이 코드랩에서는 Firebase Performance Monitoring을 사용하여 채팅 웹 앱의 성능을 측정하는 방법을 알아봅니다. 라이브 데모를 보려면 https://fireperf-friendlychat.web.app/ 을 방문하십시오.
배울 내용
- 기본 측정항목(페이지 로드 및 네트워크 요청)을 얻기 위해 웹 앱에 Firebase Performance Monitoring을 추가하는 방법입니다.
- 사용자 지정 추적으로 특정 코드를 측정하는 방법입니다.
- 사용자 지정 추적에 연결된 추가 사용자 지정 측정항목을 기록하는 방법입니다.
- 사용자 정의 속성으로 성능 데이터를 더 세분화하는 방법.
- 성능 모니터링 대시보드를 사용하여 웹 앱의 성능을 이해하는 방법.
필요한 것
2. 샘플 코드 받기
명령줄에서 Codelab의 GitHub 리포지토리 를 복제합니다.
git clone https://github.com/firebase/codelab-friendlychat-web
또는 git이 설치되어 있지 않은 경우 repo를 zip 파일로 다운로드 할 수 있습니다.
시작 앱 가져오기
IDE를 사용하여 복제된 저장소에서 📁 performance-monitoring-start 디렉터리를 열거나 가져옵니다. 이 📁 performance-monitoring-start 디렉토리에는 채팅 웹 앱인 Codelab의 시작 코드가 포함되어 있습니다.
3. Firebase 프로젝트 생성 및 설정
Firebase 프로젝트 만들기
- Firebase 콘솔 에서 프로젝트 추가 를 클릭합니다.
- Firebase 프로젝트의 이름을
FriendlyChat으로 지정합니다.
Firebase 프로젝트의 프로젝트 ID를 기억하세요.
- 프로젝트 만들기 를 클릭합니다.
프로젝트에 Firebase 웹 앱 추가
- 웹 아이콘을 클릭하십시오
새 Firebase 웹 앱을 만듭니다. - 닉네임으로 앱을 등록한 다음 이 앱에
Friendly Chat호스팅도 설정 옆의 확인란을 선택합니다. - 앱 등록 을 클릭합니다.
- 나머지 단계를 클릭합니다. 이제 화면 지침을 따를 필요가 없습니다. 이는 이 코드랩의 이후 단계에서 다룹니다.
Firebase 인증을 위한 Google 로그인 활성화
사용자가 Google 계정으로 채팅 앱에 로그인할 수 있도록 하기 위해 Google 로그인 방법을 사용합니다.
Google 로그인을 활성화해야 합니다.
- Firebase 콘솔의 왼쪽 패널에서 개발 섹션을 찾습니다.
- 인증 을 클릭한 다음 로그인 방법 탭을 클릭합니다( 콘솔로 이동 ).
- Google 로그인 공급자를 활성화한 다음 저장 을 클릭합니다.
Cloud Firestore 사용
웹 앱은 Cloud Firestore 를 사용하여 채팅 메시지를 저장하고 새 채팅 메시지를 받습니다.
Cloud Firestore를 사용 설정해야 합니다.
- Firebase 콘솔의 개발 섹션에서 데이터베이스 를 클릭합니다.
- Cloud Firestore 창에서 데이터베이스 만들기 를 클릭합니다.
- 테스트 모드에서 시작 옵션을 선택한 다음 보안 규칙에 대한 고지 사항을 읽은 후 활성화 를 클릭합니다.
이 Codelab의 시작 코드에는 더 안전한 규칙이 포함되어 있습니다. 나중에 Codelab에서 배포할 것입니다.
클라우드 스토리지 활성화
웹 앱은 Firebase용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.
Cloud Storage를 사용 설정해야 합니다.
- Firebase 콘솔의 개발 섹션에서 스토리지 를 클릭합니다.
- 시작하기 를 클릭합니다.
- Firebase 프로젝트의 보안 규칙에 대한 면책조항을 읽은 다음 확인을 클릭 합니다 .
시작 코드에는 나중에 Codelab에서 배포할 기본 보안 규칙이 포함됩니다.
4. Firebase 명령줄 인터페이스 설치
Firebase CLI(명령줄 인터페이스)를 사용하면 Firebase 호스팅을 사용하여 웹 앱을 로컬로 제공하고 웹 앱을 Firebase 프로젝트에 배포할 수 있습니다.
- Firebase 문서의 다음 지침 에 따라 CLI를 설치합니다.
- 터미널에서 다음 명령을 실행하여 CLI가 올바르게 설치되었는지 확인하십시오.
firebase --version
Firebase CLI 버전이 v8.0.0 이상인지 확인하세요.
- 다음 명령어를 실행하여 Firebase CLI를 승인합니다.
firebase login
앱의 로컬 디렉토리(이전에 Codelab에서 복제한 리포지토리)에서 Firebase 호스팅에 대한 앱 구성을 가져오도록 웹 앱 템플릿을 설정했습니다. 그러나 구성을 가져오려면 앱을 Firebase 프로젝트와 연결해야 합니다.
- 명령줄이 앱의 로컬
performance-monitoring-start디렉터리에 액세스하고 있는지 확인합니다. - 다음 명령어를 실행하여 앱을 Firebase 프로젝트와 연결합니다.
firebase use --add
- 메시지가 표시되면 프로젝트 ID를 선택한 다음 Firebase 프로젝트에 별칭을 지정합니다.
별칭은 여러 환경(프로덕션, 스테이징 등)이 있는 경우에 유용합니다. 그러나 이 코드랩에서는 default 의 별칭만 사용하겠습니다.
- 명령줄의 나머지 지침을 따릅니다.
5. Firebase 성능 모니터링과 통합
웹용 Firebase Performance Monitoring SDK와 통합하는 방법은 다양합니다(자세한 내용은 설명서 참조). 이 코드랩에서는 호스팅 URL 에서 성능 모니터링을 활성화합니다.
성능 모니터링 추가 및 Firebase 초기화
-
src/index.js파일을 열고TODO아래에 다음 줄을 추가하여 Firebase Performance Monitoring SDK를 포함합니다.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- 또한 Firebase 프로젝트 및 사용하려는 웹 앱에 대한 정보가 포함된 구성 객체로 Firebase SDK를 초기화해야 합니다. Firebase 호스팅을 사용하고 있으므로 이 구성을 대신할 특수 스크립트를 가져올 수 있습니다. 이 코드랩의 경우
public/index.html파일의 맨 아래에 다음 행을 이미 추가했지만 해당 행이 있는지 다시 확인하십시오.
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
-
src/index.js파일에서TODO아래에 다음 줄을 추가하여 성능 모니터링을 초기화합니다.
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
성능 모니터링은 이제 사용자가 사이트를 사용할 때 페이지 로드 및 네트워크 요청 메트릭을 자동으로 수집합니다! 자동 페이지 로드 추적에 대한 자세한 내용 은 설명서 를 참조하세요.
첫 번째 입력 지연 폴리필 라이브러리 추가
첫 번째 입력 지연 은 사용자 상호작용에 응답하는 브라우저가 사용자에게 앱의 응답성에 대한 첫인상을 주기 때문에 유용합니다.
첫 번째 입력 지연은 사용자가 버튼이나 하이퍼링크를 클릭하는 것과 같이 페이지의 요소와 처음 상호작용할 때 시작됩니다. 브라우저가 입력에 응답할 수 있는 즉시 중지됩니다. 즉, 브라우저가 콘텐츠를 로드하거나 구문 분석하는 데 바쁘지 않습니다.
이 폴리필 라이브러리는 성능 모니터링 통합을 위해 선택 사항입니다.
public/index.html 파일을 열고 다음 줄의 주석 처리를 제거합니다.
index.html
<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>
이 시점에서 코드에서 Firebase Performance Monitoring과의 통합을 완료했습니다!
다음 단계에서는 Firebase Performance Monitoring을 사용하여 커스텀 trace를 추가하는 방법을 알아봅니다. 자동 추적만 수집하려는 경우 "배포 및 이미지 전송 시작" 섹션으로 이동하십시오.
6. 앱에 사용자 지정 추적 추가
성능 모니터링을 사용하면 사용자 지정 추적 을 만들 수 있습니다. 사용자 지정 추적은 앱의 실행 블록 기간에 대한 보고서입니다. SDK에서 제공하는 API를 사용하여 사용자 지정 추적의 시작과 끝을 정의합니다.
-
src/index.js파일에서 성능 개체를 가져온 다음 이미지 메시지를 업로드하기 위한 사용자 지정 추적을 만듭니다.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- 사용자 정의 추적을 기록하려면 추적의 시작점과 중지점을 지정해야 합니다. 추적을 타이머로 생각할 수 있습니다.
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
사용자 정의 추적을 성공적으로 정의했습니다! 코드를 배포한 후 사용자가 이미지 메시지를 보내면 사용자 지정 추적 기간이 기록됩니다. 이를 통해 실제 사용자가 채팅 앱에서 이미지를 보내는 데 걸리는 시간을 알 수 있습니다.
7. 앱에 맞춤 측정항목을 추가합니다.
범위 내에서 발생하는 성능 관련 이벤트에 대한 사용자 지정 메트릭을 기록하도록 사용자 지정 추적 을 추가로 구성할 수 있습니다. 예를 들어 메트릭을 사용하여 업로드 시간이 마지막 단계에서 정의한 사용자 지정 추적에 대한 이미지 크기의 영향을 받는지 조사할 수 있습니다.
-
src/index.js파일에 정의된 이전 단계에서 사용자 정의 추적을 찾습니다. -
TODO아래에 다음 줄을 추가하여 업로드된 이미지의 크기를 기록합니다.
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
이 메트릭을 사용하면 성능 모니터링을 통해 사용자 지정 추적 기간과 업로드된 이미지 크기를 기록할 수 있습니다.
8. 앱에 사용자 정의 속성 추가
이전 단계를 기반으로 맞춤 trace 에서 맞춤 속성 을 수집할 수도 있습니다. 사용자 정의 속성은 앱과 관련된 카테고리별로 데이터를 분류하는 데 도움이 될 수 있습니다. 예를 들어 이미지 파일의 MIME 유형을 수집하여 MIME 유형이 성능에 미치는 영향을 조사할 수 있습니다.
-
src/index.js파일에 정의된 사용자 정의 추적을 사용하십시오. -
TODO아래에 다음 줄을 추가하여 업로드된 이미지의 MIME 유형을 기록합니다.
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
이 속성을 사용하면 성능 모니터링을 통해 업로드된 이미지 유형을 기반으로 사용자 지정 추적 기간을 분류할 수 있습니다.
9. [확장] User Timing API로 커스텀 트레이스 추가
Firebase Performance Monitoring SDK는 비동기식으로 로드할 수 있도록 설계되었으며 페이지 로드 중에 웹 앱의 성능에 부정적인 영향을 미치지 않습니다. SDK가 로드되기 전에는 Firebase Performance Monitoring API를 사용할 수 없습니다. 이 시나리오에서는 여전히 사용자 타이밍 API 를 사용하여 사용자 지정 추적을 추가할 수 있습니다. Firebase 성능 SDK는 measure() 에서 기간을 선택하고 사용자 정의 추적으로 기록합니다.
User Timing API를 사용하여 앱 스타일링 스크립트를 로드하는 시간을 측정할 것입니다.
-
public/index.html파일에서 다음 줄을 추가하여 앱 스타일 지정 스크립트 로드의 시작을 표시합니다.
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- 앱 스타일 지정 스크립트 로드의 끝을 표시하고 시작과 끝 사이의 기간을 측정하려면 다음 줄을 추가합니다.
index.html
<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
performance && performance.mark('loadStylingEnd');
performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>
여기에서 생성한 항목은 Firebase Performance Monitoring에서 자동으로 수집됩니다. 나중에 Firebase 성능 콘솔에서 loadStyling 이라는 맞춤 추적을 찾을 수 있습니다.
10. 이미지 배포 및 전송 시작
Firebase 호스팅에 배포
코드에 Firebase Performance Monitoring을 추가한 후 다음 단계에 따라 Firebase 호스팅에 코드를 배포하세요.
- 명령줄이 앱의 로컬
performance-monitoring-start디렉터리에 액세스하고 있는지 확인합니다. - 다음 명령어를 실행하여 Firebase 프로젝트에 파일을 배포합니다.
firebase deploy
- 콘솔에 다음이 표시되어야 합니다.
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- Firebase 호스팅을 사용하여 이제 완전히 호스팅된 웹 앱을 자체 Firebase 하위 도메인 두 곳(
https://<projectId>.firebaseapp.com및https://<projectId>.web.app에서 방문하세요.
성능 모니터링이 활성화되어 있는지 확인
Firebase 콘솔 을 열고 성능 탭으로 이동합니다. "SDK 감지됨"이라는 환영 메시지가 표시되면 Firebase Performance Monitoring과 성공적으로 통합된 것입니다!
이미지 메시지 보내기
채팅 앱에서 이미지를 전송하여 성능 데이터를 생성합니다.
- 채팅 앱 로그인 후 이미지 업로드 버튼 클릭
. - 파일 선택기를 사용하여 이미지 파일을 선택합니다.
- 사용자 정의 측정항목 및 사용자 정의 속성의 분포를 테스트할 수 있도록 여러 이미지를 보내보십시오(몇 가지 샘플은
public/images/에 저장됨).
새 메시지는 선택한 이미지와 함께 앱의 UI에 표시되어야 합니다.
11. 대시보드 모니터링
웹 앱을 배포하고 사용자로 이미지 메시지를 보낸 후 성능 모니터링 대시보드(Firebase 콘솔)에서 성능 데이터를 검토할 수 있습니다.
대시보드에 액세스
- Firebase 콘솔 에서
Friendly Chat앱이 있는 프로젝트를 선택합니다. - 왼쪽 패널에서 품질 섹션을 찾아 성능 을 클릭합니다.
기기 데이터 검토
성능 모니터링에서 앱 데이터를 처리하면 대시보드 상단에 탭이 표시됩니다. 아직 데이터나 탭이 표시되지 않으면 나중에 다시 확인하세요.
- 기기 탭을 클릭합니다.
- 페이지 로드 테이블은 페이지가 로드되는 동안 성능 모니터링이 자동으로 수집하는 다양한 성능 메트릭을 보여줍니다.
- Durations 테이블에는 앱 코드에 정의한 모든 맞춤 추적이 표시됩니다.
- 추적에 대한 특정 메트릭을 검토하려면 기간 테이블에서 saveImageMessage 를 클릭하십시오.
- 집계 를 클릭하여 이미지 크기 분포를 검토합니다. 이 사용자 지정 추적의 이미지 크기를 측정하기 위해 추가한 측정항목을 볼 수 있습니다.
- 이전 단계에서 집계 옆에 있는 시간 경과 에 따라 클릭합니다. 사용자 지정 추적 기간 을 볼 수도 있습니다. 수집된 데이터를 자세히 보려면 더보기 를 클릭하세요.
- 열리는 페이지에서 imageType 을 클릭하여 이미지 MIME 유형별로 기간 데이터를 분할할 수 있습니다. 이 특정 데이터는 사용자 지정 추적에 추가한 imageType 속성 때문에 기록되었습니다.
네트워크 데이터 검토
HTTP/S 네트워크 요청 은 네트워크 호출의 응답 시간과 페이로드 크기를 캡처하는 보고서입니다.
- 성능 모니터링 대시보드의 메인 화면으로 돌아갑니다.
- 네트워크 탭을 클릭하여 웹 앱에 대한 네트워크 요청 항목 목록을 확인합니다.
- 이를 탐색하여 느린 요청을 식별하고 앱 성능을 개선하기 위한 수정 작업을 시작하세요!
12. 축하합니다!
성능 모니터링을 위해 Firebase SDK를 활성화하고 채팅 앱의 실제 성능을 측정하기 위해 자동 추적 및 맞춤 추적을 수집했습니다.
우리가 다룬 내용:
- 웹 앱에 Firebase Performance Monitoring SDK 추가
- 코드에 커스텀 트레이스를 추가합니다.
- 사용자 정의 추적에 연결된 사용자 정의 측정항목을 기록합니다.
- 사용자 정의 속성을 사용하여 성능 데이터를 분류합니다.
- 성능 모니터링 대시보드를 사용하여 앱 성능에 대한 통찰력을 얻는 방법을 이해합니다.