5주차 - 성능 지표 보기

👉 CRA를 통해 프로젝트를 만들면 기본적으로 설치되는 것들이 있죠!

그 중 하나가 webVitals입니다! CRA 4 버전부터 새로 추가되었어요. 추가된 김에 이 webVitals를 써봅시다.😉

 

- webVitals 써보기

 

1) report를 콘솔에 찍어서 확인 해보기!

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './shared/App';
import reportWebVitals from './reportWebVitals';
import store from "./redux/configureStore";

import { Provider } from "react-redux";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals(console.log);

 

2) 어딘가에 보내고 싶다면?

// 함수를 만들고,
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  const url = '<https://example.com/analytics>';

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

// console.log 대신 넘겨줘요!
reportWebVitals(sendToAnalytics);

 

- firebase analytics 연결하기

 

1) analytics 연결하기

...
import "firebase/analytics";

const firebaseConfig = {
  // 인증 정보!
};
...

const analytics = firebase.analytics();

export{auth, apiKey, firestore, storage, realtime, analytics};

 

2) 리포트 보내기

//index.js
...
import { analytics } from "./shared/firebase";
...
function sendToAnalytics(metric) {
  const _report = JSON.stringify(metric);

  analytics.logEvent("web_vital_report", _report);

  console.log({ _report });
}
reportWebVitals(sendToAnalytics);

 

3) 확인하기

: 대시보드에서 확인 해봅시다!