[서평] 웹 개발 스킬을 한 단계 높여주는 프론트엔드 성능 최적화 가이드 - 유동균, 인사이트

올해 목표가 개발 서적 5권 이상 읽기인데 연휴를 맞아 미뤄두던 책을 한 권 꺼내 들었습니다. 예전에 알라딘인지 Yes24인지..에서 적립금을 쓰려고 무슨 책을 살까 고민하다가 제목을 보고 구매했던 책입니다. 개발 서적은 간혹 시간이 지나면 outdated될 수 있어서 최대한 빨리 읽어야 하는데 마음처럼 안 되네요. 이 책은 초판이 2022년에 나왔고 리액트 버전 16 기준으로 다루고 있어요. 리액트 코드를 예시로 들고 있긴 하지만 리액트에 국한되는 이야기는 아니고 전반적으로 최적화가 필요한 상황과 그 해결법을 다루고 있어서 몇 년 지나더라도 상관없이 유용하게 읽을 수 있을 것 같았습니다.

웹 성능 최적화는 사용자 경험을 개선하여 이탈률을 낮추고 전환율과 매출을 높이기 위한 핵심 전략인데요, 이 책에서는 성능을 크게 로딩 성능(리소스 다운로드 최적화)와 렌더링 성능(JS·레이아웃·페인트 최적화)로 나누고 있습니다.
Chrome DevTools의 Lighthouse, Performance, Coverage 패널과 webpack-bundle-analyzer 등을 활용해 병목 구간과 불필요한 리소스를 분석하는 방법과 실제 적용 사례를 다루어서 응용하기 좋다는 생각이 들었습니다.
책에서는 여러 최적화 기법에 대해 다루고 있는데 이미지·폰트·텍스트 최적화나, 코드 분할 및 지연 로딩, 캐시 전략, CSS 정리, 레이아웃 이동 방지 등이 소개되어 있습니다.
실무에서 바로 적용할 수 있는 구체적인 최적화 기법들을 폭넓게 다루고 있어서 유용했고 특히 분석툴 사용법도 자세하게 설명되어있는 점이 좋았습니다.
프론트엔드 개발자라면 한번씩 읽어보면 놓치고 있는 부분들을 다시 생각해보기 좋을 것 같습니다.

아이패드에서는 사진 수평 정렬이 안되네요..? 나중에 PC로 수정해야겠다..
요즘은 책을 읽거나 컨퍼런스에 다녀오면 노션에 정리해두려고 노력하고 있습니다. 나중에 꺼내먹기 좋게..