React App 확장성을 위해 점검해 볼것

GA4 필요한 어트리뷰션, 메트릭만 가지고 오기 위해 GraphQL 적용할 수 있는지? (REST API 대신)

GA4 데이터 받을 때, streaming방식 (덩어리 혹은 조각으로)으로 받을 수 있는지? 

GA4에서 flushing을 응용해서 사용할 수 있는지 (전체 응답이 생성되기 전에 데이터를 브라우저에게 보낼 수 있는 능력)

chrome lighthouse에서 참고해볼 것들이 있는지

lazy(), Suspense()를 사용해서 로딩시간을 최적화할 수 있는지

on-demand code splitting을 적용할 부분이 있는지 -- (Intersection Observer API 사용해서)

Code Splitting -- critical path를 먼저 식별하고!! entry point / vendor / dynamic splitting 중에 어떤것이 제일 적합할지

BE - 거대한 인라인 스크립트를 피해야한다 (스크립트 크기가 1KB가 넘으면 인라인으로 작성하지 말것)

BE - 긴 태스크를 피해야하는데 메인 스레드를 점유하고 있는지 (작은 작업으로 분할했다고 하더라도!) 

의존성 식별 (3rd party) -- Chrorme DevTools/Lighthouse/WebPageTest 같은 도구로 가장 느리게 로딩되는 서드파티 의존성을 식별, 로딩 최적화(lazy loading, code splitting, tree shaking(은 보통 번들러와 빌드 도구들이 많이 사용하곤 함))

번들 분석 - Webpack Bundle Analyzer, Lighthouse Treemap 등 번들 분석하고 가장 많은 공간을 차지하는 의존성을 식별

3rd party 의존성 configuration을 최적화

렌더링 패턴(SPA, MPA, server-side, static, partial hydration, progressive hydration, islands architecture, incremental static generation, streaming SSR, resumability, edge rendering 등) 맞는것 찾기