26. 프론트엔드 성능최적화를 위한 방법과 활용 경험 설명
1. 이미지 최적화
- 압축 : 이미지 크기를 줄이되 품질 손실을 최소화 (JPEG, PNG는 TinyPNG, WebP는 기본 지원).
- 형식 전환 : WebP와 AVIF 같은 최신 이미지 포맷 사용.
- 지연 로딩(Lazy Loading) : 사용자가 스크롤할 때 이미지를 불러오기 (
<img loading="lazy">). - SVG 활용 : 아이콘이나 벡터 이미지에 SVG를 활용해 파일 크기를 줄임.
2. 코드 최적화
-
번들 크기 축소
- 불필요한 코드 제거(Treeshaking).
- 코드 스플리팅(Code Splitting)으로 초기 로딩 크기 최소화.
- 동적 import로 필요한 시점에만 모듈 불러오기.
❓Treeshaking? Code Splitting? 동적 import?
-
최소화(Minification): JavaScript, CSS 파일을 축소(Terser, CSSNano).
❓Terser? CSSNano? -
CSS 및 JS 병합 : 가능한 경우 여러 파일을 하나로 병합하여 HTTP 요청 수 감소.
3. 캐싱 및 CDN 활용
- 브라우저 캐시 : 정적 리소스에 Cache-Control 헤더 설정.
- CDN(Content Delivery Network) : 정적 리소스를 전 세계 서버에 분산해 전달 속도 향상.
❓정적 리소스? Cache-Control?
4. 네트워크 최적화
- HTTP/2 및 HTTP/3: 다중 스트림 처리로 리소스 로딩 속도 개선.
❓HTTP/2? HTTP/3? 다중 스트림 처리? - 압축 사용 : Gzip이나 Brotli로 리소스를 압축해 전송.
❓Gzip? Brotli? - 프리페치(Pre-fetch), 프리로드(Preload) : 자주 사용될 리소스를 미리 로드.
5. DOM과 렌더링 최적화
- 가상 DOM(Virtual DOM) 사용 : React 같은 라이브러리로 최소 렌더링.
- 불필요한 렌더링 최소화 : 메모이제이션 활용(React의 memo, useMemo 등).
- CSS 애니메이션 사용 : GPU 가속을 활용해 부드러운 애니메이션 구현.
❓GPU?
6. 웹폰트 최적화
- 서브셋 폰트 사용 : 필요한 글리프만 포함된 폰트 파일 생성.
- 비동기 로딩 : font-display: swap; 속성으로 텍스트 가시성 향상.
❓서브셋 폰트? 글리프? swap?
7. React와 같은 라이브러리 성능 최적화
- React : React.memo, useMemo, useCallback으로 불필요한 렌더링 방지.
- 상태 관리 : Context API 대신 전역 상태 관리 라이브러리(예: Redux Toolkit)로 성능 개선.
❓contextAPI vs RTK ? - 가상화 : 긴 목록의 데이터를 렌더링할 때 react-window와 같은 라이브러리 사용.
❓react-window?
8. 웹 성능 측정 도구 활용
- Lighthouse : 페이지 로딩 성능을 분석하고 개선 권장사항 제공.
- WebPageTest : 웹 페이지 성능 상세 분석.
- Chrome DevTools : 네트워크, 메모리, 렌더링 문제 분석.
아무튼, 개발자