프론트엔드 성능 최적화 가이드 : 웹 개발 스킬을 한 단계 높여 주는

프론트엔드 성능 최적화 가이드 : 웹 개발 스킬을 한 단계 높여 주는

$22.00
Description
수강생 2천 명이 선택한 인프런 인기 강의
다년간의 컨설팅과 강의 노하우를 담았다!
4가지 실전 서비스로 배우는 웹 성능 최적화 기법

'웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다.
저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다.
이 책은 실생활에서 흔히 개발하는 4가지 실습 사이트를 예제로, 직관적인 최적화 노하우를 전달한다. 콘텐츠 사이즈 최적화, 컴포넌트 지연 로딩과 사전 로딩, 병목 코드 최적화, 캐시 최적화 등 다각적인 포인트를 익혀 나만의 최적화 경험치를 쌓아 보자.

저자

유동균

라인파이낸셜플러스에서근무했으며,조선일보홈페이지를포함한여러웹사이트및서비스성능을컨설팅했다.이런경험과지식을정리하여삼성SSAFY,프로그래머스,인프런,스터디파이등에서웹성능최적화와프론트엔드개발관련강의를진행했다.그중인프런의성능최적화강의가큰인기를끌어첫책을집필하게되었다.현재는블록체인회사인해치랩스에서프론트엔드개발을총괄하고있다.

목차

1장블로그서비스최적화
실습내용소개
____이장에서학습할최적화기법
____분석툴소개
서비스탐색및코드분석
____코드다운로드
____서비스실행
____서비스탐색
____코드분석
Lighthouse툴을이용한페이지검사
____Lighthouse로검사하기
____Lighthouse검사결과
이미지사이즈최적화
____비효율적인이미지분석
____이미지CDN
____적절한이미지사이즈로최적화
병목코드최적화
____Performance패널살펴보기
____페이지로드과정살펴보기
____병목코드개선
____최적화전후비교
코드분할&지연로딩
____번들파일분석
____코드분할이란
____코드분할적용하기
텍스트압축
____production환경과development환경
____텍스트압축이란
____텍스트압축적용

2장올림픽통계서비스최적화
실습내용소개
____이장에서학습할최적화기법
____분석툴소개
서비스탐색및코드분석
____코드다운로드
____서비스실행
____서비스탐색
____코드분석
애니메이션최적화
____문제의애니메이션찾기
____애니메이션의원리
____브라우저렌더링과정
____리플로우와리페인트
____하드웨어가속(GPU가속)
____애니메이션최적화
____최적화전후비교
컴포넌트지연로딩
____번들파일분석
____모달코드분리하기
컴포넌트사전로딩
____지연로딩의단점
____컴포넌트사전로딩타이밍
이미지사전로딩
____느린이미지로딩
____이미지사전로딩

3장홈페이지최적화
실습내용소개
____이장에서학습할최적화기법
____분석툴소개
서비스탐색및코드분석
____코드다운로드
____서비스실행
____서비스탐색
____코드분석
이미지지연로딩
____네트워크분석
____IntersectionObserver
____IntersectionObserver적용하기
이미지사이즈최적화
____느린이미지로딩분석
____이미지포맷종류
____Squoosh를사용하여이미지변환
____최적화전후비교
동영상최적화
____동영상콘텐츠분석
____동영상압축
____압축된동영상적용
____최적화전후비교
____팁
폰트최적화
____FOUT,FOIT
____폰트최적화방법
캐시최적화
____캐시란?
____Cache-Control
____캐시적용
____적절한캐시유효시간
불필요한CSS제거
____PurgeCSS

4장이미지갤러리최적화
실습내용소개
____이장에서학습할최적화기법
____분석툴소개
서비스탐색및코드분석
____코드다운로드
____서비스실행
____서비스탐색
____코드분석
레이아웃이동피하기
____레이아웃이동이란?
____레이아웃이동의원인
____레이아웃이동해결
이미지지연로딩
리덕스렌더링최적화
____리액트의렌더링
____리렌더링의원인
____useSelector문제해결
병목코드최적화
____이미지모달분석
____getAverageColorOfImage함수분석

출판사 서평

"내웹은왜느릴까?"
답답한웹서비스에사이다가되어주는책!

똑같아보이는웹서비스라도성능에따라사용자만족도가달라진다.개발한웹사이트에서콘텐츠가너무느리게표시되거나,레이아웃이갑자기바뀌어원치않는요소를클릭하게한다면사용자는떠나가고말것이다.정성들여구현한기능이사용자에게잘전달되길바란다면'성능최적화'가필수다.핀터레스트는로딩시간을40%줄임으로써검색유입률과가입자수를15%늘렸고,COOK은평균페이지로딩시간을850밀리초로줄여이탈률을7%줄였다.즉,웹성능의향상이사용자를서비스에머무르게하여서비스의성공을가져온다는뜻이다.서비스성능저하의원인을찾고싶다면이책에서권하는최적화포인트를점검해보자.이책은답답한고구마같은웹서비스를시원하게만드는사이다가되어줄것이다.

웹이가벼워지면구글검색순위도올라간다
사용자의부담을줄이는웹미니멀리즘실천습관!

구글에서는로딩속도가빠른웹페이지의검색결과를상위에표시한다.사람들은질문에대한답을가능한한빨리찾고자하며,실제로페이지속도에신경을쓴다는것이다.구글은오래전부터'웹성능'이라는주제에관심을갖고성능향상을위한다양한시도를해왔다.그과정에서Lighthouse와AMP같은기술이탄생하기도했다.더불어성능관련정책을주기적으로업데이트하며,구글에검색되길원하는페이지의성능을높이도록권장하고있다.

PM,디자이너뿐만아니라개발자도사용자경험을필수로고려해야한다.내가만든웹서비스를사용자가기분좋게이용하길바란다면사용자성능부담을줄이는미니멀리스트가되어야한다.불필요하게많은코드가로드되지는않는지,캐시설정은적절하게되어있는지,콘텐츠크기가필요이상으로크진않은지이책의최적화포인트를꼼꼼히체크해보자.