💬 Q&A : 성능 최적화

성능 최적화를 한 번도 제대로 알아본 적이 없는 것 같아, 면접을 준비하면서 어떠한 방법들과 개념들이 있는지 알아보았다.

✅ 전송 최적화 - 네트워크 구간

브라우저가 페이지를 표시하기 위해 서버에서 HTML , CSS , JS , 이미지 등 여러 파일을 받아오는데, 이 다운로드 과정을 줄이거나 빠르게 만드는 방법이다.

📍 코드 분할 : Code Splitting

• 처음 페이지를 열 때, JS 파일이 너무 크면 다운로드, 해석, 실행이 오래 걸린다.
• 그래서 코드를 잘게 쪼개 필요한 순간에만 불러오면 초기 로딩이 빨라진다.
• React.lazy , import() 를 사용하여 해당 기능이 필요할 때만 가져오게 할 수 있다.
• 다만 지나치게 쪼개면 네트워크 요청이 많아져서 오히려 느려질 수 있다.

📍 트리 셰이킹 : Tree Shaking

• 번들에 사용하지 않는 코드까지 포함되면 파일이 불필요하게 커진다.
• 사용되는 코드만 남기고 나머지를 제거 하면 전송 용량이 줄어든다
• ES Module 방식 (import/export) 을 사용하고, 라이브러리는 필요한 함수만 가져오면 된다.

📍 압축 : gzip/brotli

• JS , CSS , HTML 은 텍스트이므로 압축하면 용량을 20~70% 줄일 수 있다.
• 서버나 CDN에서 Content-Encoding: br 이나 gzip 을 설정한다.
• 이미 압축된 이미지/폰트는 다시 압축해도 효과가 없다.

📍 이미지 최적화 : WebP/AVIF, lazy-loading

• 이미지가 페이지 로딩 속도를 가장 많이 잡아먹는 경우가 많다.
• JPG/PNG 대신 용량이 적은 WebP/AVIF 포맷을 사용한다.
• 또는 loading="lazy" 로 화면에 보이기 직전까지 다운로드를 지연시킨다.

📍 CDN & 캐시 : Cache-Control, ETag

• 같은 파일을 재방문 때 다시 다운로드하지 않게 하면 빠르다.
• 파일명에 버전 해시를 붙이고, CDN 에서 장기 캐시를 설정한다.

---

✅ 렌더링 최적화

서버에서 파일을 받아온 후, 브라우저가 빠르게 렌더링할 수 있도록 하는 방법

📍 SSR/SSG

• 서버에서 HTML 을 만들어 보내면, 브라우저가 바로 표시 가능하다.
• 검색 노출이 중요하거나 첫 홤녀 표시 속도가 중요한 경우 이를 사용하면 좋다.
• 하이드레이션(서버 렌더 HTML에 JS 이벤트 연결) 비용이 너무 크면 상호작용이 느려질 수 있다.

📍 CSR 지연 로딩

• 한 번에 많은 JS 를 실행하면 첫 화면 표시가 늦어진다.
• 화면 아래쪾의 컴포넌트는 InterSection Observer로 실제 보일 때 로딩하게 한다.

📍 Critical CSS / 폰트 최적화

• 화면 표시를 막는 CSS/폰트 로딩을 줄이면 LCP가 개선된다.
• 필요한 CSS만 HTML에 인라인, 나머지는 지연로딩
• 폰트는 rel=preconnect +font-display:swap 을 사용한다.
• CSS의 @import 는 로딩 차단이 커서 피해야 한다.

📍 레이아웃 스래싱 방지

• DOM의 레이아웃을 읽고 쓰는 동작이 섞이면 브라우저가 계쏙 다시 계산해야 해서 프레임 드랍이 난다.
• 읽기 작업 후 쓰기 작업으로 묶고, 위치 변경은 transform 을 사용한다.

---

✅ 런타임 최적화 - 실행 중

이미 로드된 페이지가 사용자의 입력/스크롤 등에 빠르게 반응하도록 실행 중 동작을 최적화하는 방법이다.

📍 메모이제이션

• 같은 계산을 반복하지 않게 캐싱해 CPU 낭비를 줄인다.
• React의 useMemo , useCallback , React.memo 등을 사용하면 된다.
• 다만, 계산이 빠른 작업에 남용하면 메모리 낭비가 될 수도 있다.

📍 가상 스크롤

• 수천 개의 리스트를 한 번에 그리면 느려진다.
• 화면에 보이는 범위만 DOM에 렌더링, 나머지는 가상으로 관리한다.

📍 이벤트 위임

• 수많은 자식 요소마다 이벤트를 달면 메모리와 성능이 낭비된다.
• 부모 요소에 이벤트를 한 번만 달고 event.target 으로 분기 처리를 해준다.

📍 Debounce/Throttle

• 입력/스크롤 같은 이벤트가 너무 자주 발생하면 렌더링이 느려진다.
• Debounce : 마지막 이벤트 후 일정 시간만 실행
• Throttle : 일정 주기마다 실행

🔗 핵심 지표

• LCP : 가장 큰 컨텐츠 표시까지 걸린 시간 (목표 ≤ 2.5s)
• CLS : 화면 요소의 예기치 않은 움직임 정도 (목표 ≤ 0.1)
• INP : 사용자 입력 후 반응 시간 (목표 ≤ 200ms)