🌳 고급 고급
성능 최적화는 어떻게 하나요?
쉽게 이해하기
성능 최적화는 집을 정리하는 것과 같아요. 자주 쓰는 물건은 손 닿는 곳에(캐싱), 안 쓰는 물건은 창고에(지연 로딩), 큰 짐은 나눠서 옮기고(코드 스플리팅), 동선을 효율적으로 만들죠(알고리즘 개선). 하나하나는 작지만 모이면 엄청난 차이가 나요.
핵심 정리
애플리케이션의 로딩 속도와 실행 속도를 빠르게 만드는 다양한 기법들이에요.
자세히 알아보기
성능 최적화는 애플리케이션이 더 빠르게 로딩되고 실행되도록 만드는 과정이에요. 사용자 경험에 직접적인 영향을 미치기 때문에 매우 중요해요.
프론트엔드에서는 번들 크기를 줄이는 게 가장 기본이에요. 코드 스플리팅으로 필요한 코드만 먼저 로드하고, 나머지는 나중에 로드해요. 이미지는 WebP 같은 최신 포맷을 쓰고, lazy loading으로 보이는 부분만 먼저 불러와요. React.memo나 useMemo로 불필요한 재렌더링을 막는 것도 중요하죠.
백엔드에서는 데이터베이스 쿼리 최적화가 핵심이에요. 인덱스를 제대로 설정하고, N+1 쿼리 문제를 해결하고, 필요한 데이터만 조회해야 해요. 캐싱은 가장 효과적인 최적화예요. Redis 같은 인메모리 캐시를 쓰면 반복적인 쿼리를 피할 수 있어요.
CDN을 사용하면 정적 파일을 사용자와 가까운 서버에서 제공해 로딩 속도가 빨라져요. HTTP/2를 쓰면 여러 리소스를 동시에 받을 수 있어요. Gzip이나 Brotli로 압축하면 전송 데이터 크기가 줄어들죠.
하지만 성능 최적화는 측정이 먼저예요. Lighthouse, WebPageTest 같은 도구로 병목 지점을 찾아야 해요. '느낌'이 아니라 '숫자'로 개선해야 하고, 최적화의 효과를 확인해야 해요. 과도한 최적화는 오히려 코드를 복잡하게 만들 수 있으니 균형이 중요해요.