유동균, 프론트엔드 성능 최적화 가이드 - 웹 개발 스킬을 한 단계 높여 주는, 인사이트
"프론트엔드 성능 최적화 가이드"는 웹 개발자라면 꼭 읽어야 할 필독서입니다. 저자 유동균은 수많은 기업의 웹 서비스 성능을 컨설팅한 경험을 바탕으로, 웹 성능 최적화의 중요성과 다양한 기법을 실습 중심으로 소개합니다. 이 책은 특히 프론트엔드 개발자에게 필수적인 지식과 기술을 제공합니다.
책의 내용은 실생활에서 자주 접하는 웹 서비스의 최적화 기법을 중심으로 구성되어 있습니다. 4가지 실습 사이트를 통해 콘텐츠 사이즈 최적화, 컴포넌트 지연 로딩, 병목 코드 최적화, 캐시 최적화 등 다양한 최적화 포인트를 상세히 다룹니다. 이론적인 설명에 그치지 않고, 실제 사례를 통해 독자가 쉽게 이해하고 적용할 수 있도록 돕고 있습니다.
웹 성능 최적화는 단순히 페이지 로딩 시간을 줄이는 것에 그치지 않습니다. 이는 사용자 경험을 개선하고, 결과적으로 서비스의 성공에 큰 영향을 미치는 요소입니다. 저자는 성능 최적화의 필요성을 강조하며, 최적화 기법을 통해 사용자에게 쾌적한 웹 환경을 제공할 수 있도록 안내합니다.
또한, 이 책은 실습을 통해 독자가 직접 최적화 과정을 경험할 수 있도록 구성되어 있어, 이론과 실습을 동시에 익힐 수 있는 장점이 있습니다. 특히, 웹 개발에 대한 기본 지식이 있는 독자라면 더욱 쉽게 접근할 수 있을 것입니다.
"프론트엔드 성능 최적화 가이드"는 웹 개발자뿐만 아니라, 사용자 경험을 중시하는 모든 개발자들에게 유용한 자료가 될 것입니다. 성능 최적화의 중요성을 깨닫고, 이를 통해 더 나은 웹 서비스를 제공하고자 하는 이들에게 강력히 추천합니다.
목차
1장 블로그 서비스 최적화
실습 내용 소개
____이 장에서 학습할 최적화 기법
____분석 툴 소개
서비스 탐색 및 코드 분석
____코드 다운로드
____서비스 실행
____서비스 탐색
____코드 분석
Lighthouse 툴을 이용한 페이지 검사
____Lighthouse로 검사하기
____Lighthouse 검사 결과
이미지 사이즈 최적화
____비효율적인 이미지 분석
____이미지 CDN
____적절한 이미지 사이즈로 최적화
병목 코드 최적화
____Performance 패널 살펴보기
____페이지 로드 과정 살펴보기
____병목 코드 개선
____최적화 전후 비교
코드 분할 & 지연 로딩
____번들 파일 분석
____코드 분할이란
____코드 분할 적용하기
텍스트 압축
____production 환경과 development 환경
____텍스트 압축이란
____텍스트 압축 적용
2장 올림픽 통계 서비스 최적화
실습 내용 소개
____이 장에서 학습할 최적화 기법
____분석 툴 소개
서비스 탐색 및 코드 분석
____코드 다운로드
____서비스 실행
____서비스 탐색
____코드 분석
애니메이션 최적화
____문제의 애니메이션 찾기
____애니메이션의 원리
____브라우저 렌더링 과정
____리플로우와 리페인트
____하드웨어 가속(GPU 가속)
____애니메이션 최적화
____최적화 전후 비교
컴포넌트 지연 로딩
____번들 파일 분석
____모달 코드 분리하기
컴포넌트 사전 로딩
____지연 로딩의 단점
____컴포넌트 사전 로딩 타이밍
이미지 사전 로딩
____느린 이미지 로딩
____이미지 사전 로딩
3장 홈페이지 최적화
실습 내용 소개
____이 장에서 학습할 최적화 기법
____분석 툴 소개
서비스 탐색 및 코드 분석
____코드 다운로드
____서비스 실행
____서비스 탐색
____코드 분석
이미지 지연 로딩
____네트워크 분석
____Intersection Observer
____Intersection Observer 적용하기
이미지 사이즈 최적화
____느린 이미지 로딩 분석
____이미지 포맷 종류
____Squoosh를 사용하여 이미지 변환
____최적화 전후 비교
동영상 최적화
____동영상 콘텐츠 분석
____동영상 압축
____압축된 동영상 적용
____최적화 전후 비교
____팁
폰트 최적화
____FOUT, FOIT
____폰트 최적화 방법
캐시 최적화
____캐시란?
____Cache-Control
____캐시 적용
____적절한 캐시 유효 시간
불필요한 CSS 제거
____PurgeCSS
4장 이미지 갤러리 최적화
실습 내용 소개
____이 장에서 학습할 최적화 기법
____분석 툴 소개
서비스 탐색 및 코드 분석
____코드 다운로드
____서비스 실행
____서비스 탐색
____코드 분석
레이아웃 이동 피하기
____레이아웃 이동이란?
____레이아웃 이동의 원인
____레이아웃 이동 해결
이미지 지연 로딩
리덕스 렌더링 최적화
____리액트의 렌더링
____리렌더링의 원인
____useSelector 문제 해결
병목 코드 최적화
____이미지 모달 분석
____getAverageColorOfImage 함수 분석
- 교보문고: https://bitl.bz/IOIBuL
- Yes24: https://bitl.bz/1oGMZE