본문 바로가기

추천 검색어

실시간 인기 검색어

프론트엔드 성능 최적화 가이드

웹 개발 스킬을 한 단계 높여 주는
프로그래밍인사이트
유동균 저자(글)
인사이트 · 2022년 11월 15일
9.9
10점 중 9.9점
(21개의 리뷰)
도움돼요 (56%의 구매자)
  • 프론트엔드 성능 최적화 가이드 대표 이미지
    프론트엔드 성능 최적화 가이드 대표 이미지
  • 프론트엔드 성능 최적화 가이드 부가 이미지1
    프론트엔드 성능 최적화 가이드 부가 이미지1
  • 프론트엔드 성능 최적화 가이드 부가 이미지2
    프론트엔드 성능 최적화 가이드 부가 이미지2
  • A4
    사이즈 비교
    210x297
    프론트엔드 성능 최적화 가이드 사이즈 비교 172x225
    단위 : mm
01 / 04
MD의 선택 무료배송 소득공제
10% 19,800 22,000
적립/혜택
1,100P

기본적립

5% 적립 1,100P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,100P
  • 리뷰 작성 시, e교환권 추가 최대 300원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서 포함 15,000원 이상 구매 시 무료배송
도서+사은품 또는 도서+사은품+교보Only(교보굿즈)

15,000원 미만 시 2,500원 배송비 부과

교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송

20,000원 미만 시 2,500원 배송비 부과

해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과

1Box 기준 : 도서 10권

그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
2/17(월) 출고예정
기본배송지 기준
배송일자 기준 안내
로그인 : 회원정보에 등록된 기본배송지
로그아웃 : '서울시 종로구 종로1' 주소 기준
로그인정확한 배송 안내를 받아보세요!

이달의 꽃과 함께 책을 받아보세요!

1권 구매 시 결제 단계에서 적용 가능합니다.

알림 신청하시면 원하시는 정보를
받아 보실 수 있습니다.

북카드

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

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

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

이 책의 총서 (7)

작가정보

저자(글) 유동균

라인 파이낸셜 플러스에서 근무했으며, 조선일보 홈페이지를 포함한 여러 웹사이트 및 서비스 성능을 컨설팅했다. 이런 경험과 지식을 정리하여 삼성 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 함수 분석

추천사

  • 사용자에게 쾌적한 웹 서비스를 제공하기 위해서는 최적화가 필수지만, 성능을 저해하는 원인이 무엇인지 진단하는 것조차 쉽지 않다. 이 책은 실습을 통해 웹에서 주로 발생하는 문제 유형과 그에 대한 해결 방법을 명료하게 제시한다.

  • 프론트엔드 성능의 중요성과 최적화 기법에 익숙하지 않은 독자들에게 길라잡이가 될 책이다. 실습을 통해 직관적으로 노하우를 전달해 주며, 실시간으로 최적화되는 과정을 살필 수 있다.

  • 프론트엔드 개발에서 성능 최적화는 선택이 아니라 필수다. 이 책은 한 번쯤 고민해 봤을 최적화 포인트와 해결 방법을 쉽게 설명한다. 특히 B2C 서비스를 개발하고 있다면 강력하게 추천한다.

  • 좋은 서비스를 만들고 싶다면 PM과 디자이너뿐 아니라 엔지니어도 사용자 경험을 고려하여 개발해야 한다. 사용자에게 seamless한 경험을 선사하고 싶다면 이 책이 좋은 가이드가 될 것이다

  • 흔해 보이는 음식이라도 백종원 레시피를 따라 하면 맛이 다르다. 같은 웹 사이트여도 이 책의 예제를 따라 하고 나면 잘 차려진 밥상처럼 변하는 마법 같은 책. '비슷해 보이는데 내 웹은 왜 느릴까?'라는 생각이 든다면 반드시 이 책을 맛보길 바란다.

  • 현장감이 느껴진다. 실제로 발생할 만한 상황을 예제로 하여, 더 빠르고 가벼운 웹 서비스를 만들고 싶은 웹 개발자에게 해결책을 제시한다

출판사 서평

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

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

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

구글에서는 로딩 속도가 빠른 웹 페이지의 검색 결과를 상위에 표시한다. 사람들은 질문에 대한 답을 가능한 한 빨리 찾고자 하며, 실제로 페이지 속도에 신경을 쓴다는 것이다. 구글은 오래전부터 '웹 성능'이라는 주제에 관심을 갖고 성능 향상을 위한 다양한 시도를 해 왔다. 그 과정에서 Lighthouse와 AMP 같은 기술이 탄생하기도 했다. 더불어 성능 관련 정책을 주기적으로 업데이트하며, 구글에 검색되길 원하는 페이지의 성능을 높이도록 권장하고 있다.
PM, 디자이너뿐만 아니라 개발자도 사용자 경험을 필수로 고려해야 한다. 내가 만든 웹 서비스를 사용자가 기분 좋게 이용하길 바란다면 사용자 성능 부담을 줄이는 미니멀리스트가 되어야 한다. 불필요하게 많은 코드가 로드되지는 않는지, 캐시 설정은 적절하게 되어 있는지, 콘텐츠 크기가 필요 이상으로 크진 않은지 이 책의 최적화 포인트를 꼼꼼히 체크해 보자.

기본정보

상품정보 테이블로 ISBN, 발행(출시)일자 , 쪽수, 크기, 총권수, 시리즈명을(를) 나타낸 표입니다.
ISBN 9788966263745
발행(출시)일자 2022년 11월 15일
쪽수 244쪽
크기
172 * 225 * 23 mm / 611 g
총권수 1권
시리즈명
프로그래밍인사이트

Klover 리뷰 (21)

구매 후 리뷰 작성 시, e교환권 200원 적립

10점 중 10점
/도움돼요
프론트엔드 최적화를 고민하는데 도움을 줍니다.
10점 중 10점
/도움돼요
성능최적화에 대해 잘 다루고 있는 것 같습니다.
한번은 꼭 읽어봐야할 것 같아요
10점 중 10점
/집중돼요
좋은 내용으로 도움이 많이 됐습니다
10점 중 10점
/도움돼요
처음에는 표지가 깔끔해서 비슷한 분야의 책들 중 고른 것인데 내용도 도움됩니다
10점 중 10점
/도움돼요
프론트에서 성능 최적화가 얼마나 중요한 지 알게 된 이후 책을 통해 보완하고자 구매했습니다 ㅎㅎ 실제 코드와 실습을 통해 해 볼 수 있어 좋네요 ㅎㅎ
10점 중 10점
/최고예요
포인트리 모아서 샀는데 깨끗하게 잘 왔네요.
10점 중 10점
/도움돼요
매우 좋은 내용입니다.
10점 중 10점
/추천해요
재미난 책 잘 받았습니다. 열심히 공부할게요!
10점 중 10점
/도움돼요
프론트엔드 성능최적화에 도움이됩니다
10점 중 7.5점
/도움돼요
크롬 개발자도구 활용 능력을 향상시키는데 큰 도움이 됬습니다 기능구현에 능숙해진 이후 성능최적화를 위해 읽으면 좋을거 같아요

문장수집 (4)

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)

구매 후 리뷰 작성 시, e교환권 100원 적립

컴포넌트 지연 로딩 기법을 적용해 보았습니다. 이 기법을 적용하면 최초 페이지를 로드할 때 강장 필요 없는 모달과 관련된 코드가 번들에 포함되지 않아, 로드할 파일의 크기가 작아지고 초기 로딩 속도나 자바스크립트의 실행 타이밍이 빨라져서 화면이 더 빨리 표시된다는 장점이 있습니다.
프론트엔드 성능 최적화 가이드
프론트엔드 개발자에게 성능이 중요하다
프론트엔드 성능 최적화 가이드

교환/반품/품절 안내

  • 반품/교환방법

    마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환 신청, [1:1 상담 > 반품/교환/환불] 또는 고객센터 (1544-1900)
    * 오픈마켓, 해외배송 주문, 기프트 주문시 [1:1 상담>반품/교환/환불] 또는 고객센터 (1544-1900)
  • 반품/교환가능 기간

    변심반품의 경우 수령 후 7일 이내,
    상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
  • 반품/교환비용

    변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
  • 반품/교환 불가 사유

    1) 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
    2) 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
    3) 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
    4) 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
    5) 디지털 컨텐츠인 ebook, 오디오북 등을 1회이상 ‘다운로드’를 받았거나 '바로보기'로 열람한 경우
    6) 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
    7) 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
    8) 세트상품 일부만 반품 불가 (필요시 세트상품 반품 후 낱권 재구매)
    9) 기타 반품 불가 품목 - 잡지, 테이프, 대학입시자료, 사진집, 방통대 교재, 교과서, 만화, 미디어전품목, 악보집, 정부간행물, 지도, 각종 수험서, 적성검사자료, 성경, 사전, 법령집, 지류, 필기구류, 시즌상품, 개봉한 상품 등
  • 상품 품절

    공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는 이메일과 문자로 안내드리겠습니다.
  • 소비자 피해보상 환불 지연에 따른 배상

    1) 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁 해결 기준 (공정거래위원회 고시)에 준하여 처리됨
    2) 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함

상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

스물하나, 서른아홉
이벤트
  • 단말기_이규태에디션
  • EBS 겨울방학 특집 쿠폰이벤트
01 / 02
TOP