청접장 프로젝트를 통해 배운 최적화 기법들

Image 🖼️

• lighthouse 이용하여 문제 발견
• 크기, 용량 압축
• webp
  • fallback으로 우선순위 지정
• CDN 활용
  • 퀄리티, 사이즈 조절
• <picture> 및 <source> 활용

Video 🎥

• mp4 > webm
  • 우선순위 지정
• 동영상 압축
• 동영상 길이 축소

Font 🔤

• ttf > woff > woff2
  • 오른쪽으로 갈 수록 용량이 적지만 호환되지 않는 브라우저가 몇몇 있음
  • fallback으로 우선순위 지정
• preload 설정을 통해 첫 진입점부터 미리 불러올 수 있도록 함
• FOIT, FOUT
• subset 폰트 설정으로 필요한 글자만 추출해서 용량 최적화

Rendering 🎨

• React.memo, useCallback, useMemo
• 분석 방법
  • 브라우저 개발자 도구 > 성능 탭
  • React-dev-tools 활용

렌더링에 집중할 수 있는 컴포넌트 환경

• 추상화
  • 내부의 로직과 복잡성을 감추고 사용자에게 간결하고 명확한 인터페이스를 제공하는 것
  • ex: const {data, isLoading, error} = useFetchTodos();
• 커스텀 훅으로 비즈니스 로직 분리

선언적으로 코딩하기

• 동작이 예상 가능한 추상화된 코드
• Suspense 활용하기
• ErrorBoundary 활용하기
• React Query 활용하기