프론트엔드 개발자를 위한, 웹 성능 최적화 꿀팁키트(feat. React) - Part. 1
프론트엔드 개발자를 위한, 웹 성능 최적화 꿀팁키트(feat. React) - Part. 1
수강정보
(11개의 수강평)
122명의 수강생
55,000원
지식공유자 : 유동균
24회 수업 · 총 2시간 54분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상
유동균의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적이게 최적화 하는 방법을 배웁니다.

이런 걸 배워요

  • 웹 서비스의 성능을 분석하는 방법
  • 다양한 웹 성능 최적화 기법들
  • 브라우저 동작 원리
  • 크롬 devtools 사용법

웹 프론트엔드 성능 최적화, 자신있나요?
단편적인 최적화 기법을 모아 제대로 학습하세요!

🗒 이 강의는

다양한 예제를 통해, 웹 서비스의 분석과 최적화 기법들을 배울 수 있는 강의입니다.
흔하게 이론만 알려주는 무책임한 일반적인 최적화 강의와 다른,
실전 예제를 통해 직접 분석과 최적화를 배울 수 있는
국내 최초 성능 최적화 엑기스 강의입니다!

🌈 상위 10% 프론트엔드 개발자를 향해서

프론트엔드라는 분야가 나온지 꽤 지났지만,
웹 성능 최적화에 대해서 잘 알고 있는 프론트엔드 개발자는 별로 없습니다.

이런 현실 속에서,
웹 성능 최적화 기법을 익혀서 고급 프론트엔드 인재가 될지,
단순히 퍼블리싱만 하는 그저그런 직원이 될지는 여러분의 선택입니다.

🎲 웹 성능 최적화 꿀팁키트 시리즈 오픈순서

Part.1 

  • 블로그 사이트 최적화
  • 올림픽 통계 사이트 최적화

Part.2 

  • (오픈 예정)

🙋🏻‍♂️ 강의 관련 예상 질문

Q. 강의 난이도는 어느 정도인가요?
A. 기본적으로 웹에 대한 지식이 필요합니다. 하지만, 성능 최적화의 부분에서는 기초부터 자세히 설명을 했기 때문에 성능 최적화를 처음 접하시는 분이라도 이해하실 수 있습니다.

Q. 이 강의에서는 어떤 프로그램(또는 툴)을 사용하나요?
A. 크롬의 개발자 도구(devtools)를 주로 사용합니다. 그 외에 필요에 따라 추가적인 라이브러리를 사용하는데, 사용법이나 간단한 설명을 같이 하기 때문에 학습하는데 어려움은 없을 겁니다.

Q. 이 강의만의 특별한 장점이 있을까요?
A. 웹 성능 최적화를 학습한다는 것은 어렵습니다. 왜냐하면 마땅한 자료도 없고 대부분 단편적인 이론들이기 때문이죠. 하지만, 이 강의에서는 그런 단편적인 최적화 기법들을 모아서 직접 학습하고 훈련할 수 있는 여러 웹 서비스들을 준비해뒀습니다. 그렇기 때문에, 어떻게 서비스를 분석하고, 무엇을 근거로, 어떤 최적화 기법을 적용해야 하는지를 낱낱이 배울 수 있습니다.

도움 되는 분들

  • 웹 성능 최적화에 관심이 있는 개발자
  • 더 빠르고 가벼운 웹 서비스를 만들고 싶은 개발자
  • 크롬 devtools를 더욱 잘 활용하고 싶은 개발자
  • 경쟁력을 갖추고 싶은 웹 프론트엔드 개발자

선수 지식

  • HTML5, Javascript, CSS
  • React.js

공개 일자

2020년 7월 14일 (마지막 업데이트 일자 : 2020년 7월 14일)
4.7
11개의 수강평
443-bpfull.jpg
윤태영 2달 전
실제 현업에서 최적화를 진행하는데 많은 도움이 되었습니다. Part2 도 기대 됩니다. 빨리 나오면 좋겠네요.
유동균

유동균 2달 전
안녕하세요 윤태영님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 다음 번에도 좋은 강의로 찾아 뵙겠습니다. 감사합니다. :)

default_profile.png
­정산아(공과대학 컴퓨터공학과) 2달 전
다음 강의도 얼른 듣고 싶어요! 필요하지만 쉽게 찾아보기 힘든 강의라 가치있는 강의라고 생각합니다.
유동균

유동균 2달 전
안녕하세요 정산아님, 웹 성능 최적화 강의의 유동균입니다. 가치있는 강의라 생각해주셔서 감사합니다! 다음 강의에서도 더 도움이 될 수 있도록 알찬 내용으로 찾아뵙겠습니다. 감사합니다.

교육과정

모두 펼치기 24 강의 2시간 54분
섹션 1. 1장. 블로그 사이트 최적화
11 강의 83 : 26
1-1) 실습 내용 소개
02 : 45
1-2) 분석 툴 소개 & 코드 다운로드
02 : 10
1-3) 서비스 탐색 및 코드 분석
04 : 34
1-4) Audits 툴을 이용한 페이지 감사
04 : 19
1-5) 이미지 사이즈 최적화
10 : 50
1-6) bottleneck 코드 탐색
11 : 44
1-7) bottleneck 코드 최적화
10 : 02
1-8) bundle 파일 분석 (bundle-analyzer)
07 : 43
1-9) Code Splitting & Lazy Loading
12 : 35
1-10) 텍스트 압축 적용
14 : 10
1-11) 1강 요약 정리
02 : 34
섹션 2. 2장. 통계 사이트 최적화
8 강의 69 : 57
2-1) 실습 내용 & 분석 툴 소개
02 : 35
2-2) 서비스 탐색 & 코드 분석
13 : 13
2-3) 애니메이션 분석 (Reflow와 Repaint 이론)
15 : 34
2-4) 애니메이션 최적화
10 : 12
2-5) 컴포넌트 Lazy Loading (Code Splitting)
06 : 05
2-6) 컴포넌트 Preloading
11 : 16
2-7) 이미지 Preloading
08 : 33
2-8) 2강 요약 정리
02 : 29
섹션 3. 부록 (크롬 devtools 사용법)
1 강의 15 : 24
A) Performance 패널 가이드
15 : 24
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스