잠시만 솔직하게 이야기해 보겠습니다.

저는 지난 몇 년간 주로 Node와 NestJS 기반의 백엔드, 그리고 그 위에 React와 Next.js를 얹은 프로덕션 시스템을 구축해 왔습니다. 그런데 저를 정말 미치게 만들었던 한 가지는, 온라인상의 성능 관련 콘텐츠들이 사용자의 시간을 전혀 존중하지 않는다는 점이었습니다.

"React 렌더링 최적화 방법"을 구글에 검색하면, 카운터 앱에 useMemo를 사용하는 법을 보여주는 박수(claps) 47개짜리 Medium 기사가 나옵니다.

"Node 성능 최적화 방법"을 구글에 검색하면, async/await를 사용하라고 말하는 2019년 블로그 포스트가 나옵니다.

두 가지 모두 실제 수치(real numbers)가 없고, 문제를 해결하기 시작하기 전에 실제로 문제를 어떻게 '찾아내는지(FIND)'를 보여주지 않으며, 무엇보다 프론트엔드와 백엔드의 이야기를 하나로 연결해 주는 것이 전혀 없습니다.

그래서 저는 지난 몇 달 동안 직접 이것을 만드는 데 시간을 보냈습니다.

내가 만든 것

이 프로젝트의 이름은 frontend-backend-performance-mastery이며, 6단계로 구성되어 있습니다. 각 단계는 프론트엔드 폴더(React, Next.js, TypeScript)와 백엔드 폴더(Node, Express, NestJS)를 가지고 있으며, 모든 폴더는 정확히 동일한 3개 파일 구조를 따릅니다.

detect.md — 개발자 도구(devtools)를 열기도 전에, 문제를 어떻게 찾는지, 무엇을 살펴봐야 하는지, 어떤 도구를 사용해야 하는지를 다룹니다.

fix.md — 실제 해결 방법(fix)을 다루며, 적용 전후(before and after) 비교, 적용해야 할 때, 그리고 그만큼 중요한 '적용하지 말아야 할 때'를 설명합니다.

project/ — 완전히 실행 가능한 코드 예시입니다. npm install과 npm run dev를 입력하면 2021년 누군가의 노트북에서 찍은 스크린샷이 아니라, 여러분의 화면에서 실제 수치를 확인할 수 있습니다.

6단계

level 01 — 기초 (fundamentals): Web Vitals, 프로파일링 (profiling), 베이스라인 (baselines), clinic.js 및 autocannon을 이용한 벤치마킹 (benchmarking)
level 02 — 렌더링 (rendering): SSR vs CSR vs SSG, React Fiber 내부 구조 (internals), 하이드레이션 (hydration), 응답 스트리밍 (response streaming), fast-json-stringify
level 03 — 캐싱 (caching): React Query, SWR, 서비스 워커 (service workers), Redis, Cache-aside 패턴 (cache-aside pattern), CDN 및 HTTP 헤더 (HTTP headers)
level 04 — 데이터베이스 및 API (database and api): N+1 쿼리 (N+1 queries), 1,000만 행에서도 빠른 커서 페이지네이션 (cursor pagination), DataLoader, 쿼리 최적화 (query optimization), 인덱스 (indexes)
level 05 — 심화 (advanced): Next.js에서의 WASM, 워커 스레드 (worker threads), Piscina, Bull 큐 (Bull queue), gRPC, Node 스트림 (Node streams), 실제로 번들 크기를 줄여주는 코드 분할 (code splitting)
level 06 — 프로덕션 (production): OpenTelemetry, Prometheus, Grafana 대시보드 (dashboards), GitHub Actions에서의 Lighthouse CI, 실사용자 모니터링 (real user monitoring), 분산 트레이싱 (distributed tracing)

그 뒤에 담긴 철학 (the philosophy behind it)

모든 예제를 만들면서 제가 지킨 단 하나의 규칙:

측정하지 않은 것은 절대 수정하지 말고, 재현할 수 없는 것은 절대 측정하지 마라

이 저장소의 모든 수정 사항에는 실제 벤치마크 결과, 실제 Lighthouse 점수, 수정 전후의 실제 번들 크기가 포함되어 있습니다.

https://github.com/AbdelhalimYahya/FulllStack-Performance-Mastery