| 000 | 00000cam c2200205 c 4500 | |
| 001 | 000046134640 | |
| 005 | 20221121182712 | |
| 007 | ta | |
| 008 | 221121s2022 ulka 001c kor | |
| 020 | ▼a 9788966263745 ▼g 93000 | |
| 035 | ▼a (KERIS)BIB000016565572 | |
| 040 | ▼a 244009 ▼c 244009 ▼d 211009 | |
| 082 | 0 4 | ▼a 005.2762 ▼2 23 |
| 085 | ▼a 005.2762 ▼2 DDCK | |
| 090 | ▼a 005.2762 ▼b 2022z4 | |
| 100 | 1 | ▼a 유동균 |
| 245 | 1 0 | ▼a 프론트엔드 성능 최적화 가이드 : ▼b 웹 개발 스킬을 한 단계 높여 주는 / ▼d 유동균 지음 |
| 260 | ▼a 서울 : ▼b 인사이트, ▼c 2022 | |
| 300 | ▼a xv, 227 p. : ▼b 천연색삽화 ; ▼c 23 cm | |
| 490 | 1 0 | ▼a 프로그래밍 인사이트 |
| 500 | ▼a 색인수록 | |
| 830 | 0 | ▼a 프로그래밍 인사이트 |
| 945 | ▼a ITMT |
소장정보
| No. | 소장처 | 청구기호 | 등록번호 | 도서상태 | 반납예정일 | 예약 | 서비스 |
|---|---|---|---|---|---|---|---|
| No. 1 | 소장처 과학도서관/Sci-Info(1층서고)/ | 청구기호 005.2762 2022z4 | 등록번호 121261198 | 도서상태 대출가능 | 반납예정일 | 예약 | 서비스 |
| No. 2 | 소장처 과학도서관/Sci-Info(1층서고)/ | 청구기호 005.2762 2022z4 | 등록번호 121261889 | 도서상태 정리중 | 반납예정일 | 예약 | 서비스 |
컨텐츠정보
책소개
'웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다.
저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다. 이 책은 실생활에서 흔히 개발하는 4가지 실습 사이트를 예제로, 직관적인 최적화 노하우를 전달한다.
수강생 2천 명이 선택한 인프런 인기 강의
다년간의 컨설팅과 강의 노하우를 담았다!
4가지 실전 서비스로 배우는 웹 성능 최적화 기법
'웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다.
저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다.
이 책은 실생활에서 흔히 개발하는 4가지 실습 사이트를 예제로, 직관적인 최적화 노하우를 전달한다. 콘텐츠 사이즈 최적화, 컴포넌트 지연 로딩과 사전 로딩, 병목 코드 최적화, 캐시 최적화 등 다각적인 포인트를 익혀 나만의 최적화 경험치를 쌓아 보자.
"내 웹은 왜 느릴까?"
답답한 웹 서비스에 사이다가 되어 주는 책!
똑같아 보이는 웹 서비스라도 성능에 따라 사용자 만족도가 달라진다. 개발한 웹사이트에서 콘텐츠가 너무 느리게 표시되거나, 레이아웃이 갑자기 바뀌어 원치 않는 요소를 클릭하게 한다면 사용자는 떠나가고 말 것이다. 정성 들여 구현한 기능이 사용자에게 잘 전달되길 바란다면 '성능 최적화'가 필수다.
핀터레스트는 로딩 시간을 40% 줄임으로써 검색 유입률과 가입자 수를 15% 늘렸고, COOK은 평균 페이지 로딩 시간을 850밀리초로 줄여 이탈률을 7% 줄였다. 즉, 웹 성능의 향상이 사용자를 서비스에 머무르게 하여 서비스의 성공을 가져온다는 뜻이다. 서비스 성능 저하의 원인을 찾고 싶다면 이 책에서 권하는 최적화 포인트를 점검해 보자. 이 책은 답답한 고구마 같은 웹 서비스를 시원하게 만드는 사이다가 되어 줄 것이다.
웹이 가벼워지면 구글 검색 순위도 올라간다
사용자의 부담을 줄이는 웹 미니멀리즘 실천 습관!
구글에서는 로딩 속도가 빠른 웹 페이지의 검색 결과를 상위에 표시한다. 사람들은 질문에 대한 답을 가능한 한 빨리 찾고자 하며, 실제로 페이지 속도에 신경을 쓴다는 것이다. 구글은 오래전부터 '웹 성능'이라는 주제에 관심을 갖고 성능 향상을 위한 다양한 시도를 해 왔다. 그 과정에서 Lighthouse와 AMP 같은 기술이 탄생하기도 했다. 더불어 성능 관련 정책을 주기적으로 업데이트하며, 구글에 검색되길 원하는 페이지의 성능을 높이도록 권장하고 있다.
PM, 디자이너뿐만 아니라 개발자도 사용자 경험을 필수로 고려해야 한다. 내가 만든 웹 서비스를 사용자가 기분 좋게 이용하길 바란다면 사용자 성능 부담을 줄이는 미니멀리스트가 되어야 한다. 불필요하게 많은 코드가 로드되지는 않는지, 캐시 설정은 적절하게 되어 있는지, 콘텐츠 크기가 필요 이상으로 크진 않은지 이 책의 최적화 포인트를 꼼꼼히 체크해 보자.
정보제공 :
저자소개
유동균(지은이)
라인 파이낸셜 플러스에서 근무했으며, 조선일보 홈페이지를 포함한 여러 웹사이트 및 서비스 성능을 컨설팅했다. 이런 경험과 지식을 정리하여 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등에서 웹 성능 최적화와 프론트엔드 개발 관련 강의를 진행했다. 그중 인프런의 성능 최적화 강의가 큰 인기를 끌어 첫 책을 집필하게 되었다. 현재는 블록체인 회사인 해치랩스에서 프론트엔드 개발을 총괄하고 있다.
목차
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 함수 분석