Thumbnail
BEST 개발 · 프로그래밍 프론트엔드
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
(4.9)
42개의 수강평 ∙ 540명의 수강생

55,000원

지식공유자 : 유동균
총 24개 수업˙총 2시간 54분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 685 공유
중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
웹 서비스의 성능을 분석하는 방법
다양한 웹 성능 최적화 기법들
브라우저 동작 원리
크롬 devtools 사용법

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

이 강의의 생생한 수강평! ✨

이 강의는?

인프런 베스트!
실전 웹 성능 최적화 시리즈 🎲

Part.1현재 강의  

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

Part.2

  • 일반 홈페이지 최적화
  • 이미지 갤러리 최적화

Part.3예정 강의  

  • 준비중!

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


강의 관련 질문을 
확인해보세요 🙋‍♂️

Q. 강의 난이도는 어느 정도인가요?

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

Q. 이 강의에서는 어떤 프로그램(또는 툴)을 사용하나요?

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

Q. 이 강의만의 특별한 장점이 있을까요?

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

 


이 강의를 만든 
지식공유자를 소개합니다.

유동균

  • (현) 라인 파이낸셜 프런트엔드 개발자
  • 삼성 SSAFY, 프로그래머스 등 프런트엔드 개발 강의
  • 웹 성능 최적화 프로젝트 및 강의 제작
  • 마이크로소프트웨어 393호(JS 주제), 392호(블록체인 주제) 기고

성능 최적화라는 걸 ‘어떻게' 배우는 게 좋은가에 대한 원론적인 고민을 하다가 이 강의를 만들게 되었습니다. 이전에 여러 웹 서비스의 성능을 분석하고, 최적화해본 경험을 돌이켜보니, 이론부터 많이 알려드리기보다 예제 서비스를 직접 분석하고 실습해본다면 웹 성능 최적화에 대해 확실하게 학습할 수 있겠다는 생각이 들었어요.

사실 성능 최적화라는 것은 상황에 따라 달라질 수 있고, 방법도 다양하지만, 그 중 핵심적인 것들을 모아 놨고, 단순히 최적화 기법만이 아닌 브라우저의 동작 원리성능의 분석 방법 등 웹 프론트엔드 개발에 뼈가 되고 살이 되는 것들도 알려주니 열심히 학습해주세요. 질문은 언제나 환영입니다.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
웹 성능 최적화에 관심이 있는 개발자
더 빠르고 가벼운 웹 서비스를 만들고 싶은 개발자
크롬 devtools를 더욱 잘 활용하고 싶은 개발자
경쟁력을 갖추고 싶은 웹 프론트엔드 개발자
📚
선수 지식,
필요한가요?
HTML5, Javascript, CSS
React.js

안녕하세요
유동균 입니다.
유동균의 썸네일
커리큘럼 총 24 개 ˙ 2시간 54분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 1장. 블로그 사이트 최적화
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장. 통계 사이트 최적화
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 사용법)
A) Performance 패널 가이드 15:24
강의 게시일 : 2020년 07월 14일 (마지막 업데이트일 : 2020년 07월 14일)
수강평 총 42개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
42개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
유니짜장 thumbnail
혼자 공부하면서 긴가민가했던 내용을 잘 설명해주셔서 좋았어요!^^
2020-11-02
지식공유자유동균
안녕하세요 유니짜장님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 다음 강의도 준비하고 있으니 곧 알찬 내용으로 찾아뵙겠습니다. 감사합니다.
2020-11-14
지식공유자유동균
Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
2021-09-06
이충만 thumbnail
유익한 강의였습니다! 면접전에 봤더라면 합격했을 텐데... ㅠㅠ
2020-08-09
지식공유자유동균
안녕하세요 이충만님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 이전 면접은 어쩔 수 없지만, 다음 면접에서는 좋은 결과 있기를 바랍니다. 다음 강의에서도 도움이 되도록 더 알찬 내용으로 찾아 뵙겠습니다. 감사합니다.
2020-08-10
지식공유자유동균
거의 1년이 다 되었네요.. Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
2021-09-06
­정산아(공과대학 컴퓨터공학과) thumbnail
다음 강의도 얼른 듣고 싶어요! 필요하지만 쉽게 찾아보기 힘든 강의라 가치있는 강의라고 생각합니다.
2020-08-09
지식공유자유동균
안녕하세요 정산아님, 웹 성능 최적화 강의의 유동균입니다. 가치있는 강의라 생각해주셔서 감사합니다! 다음 강의에서도 더 도움이 될 수 있도록 알찬 내용으로 찾아뵙겠습니다. 감사합니다.
2020-08-10
지식공유자유동균
거의 1년이 다 되었네요.. Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
2021-09-06
윤태영 thumbnail
실제 현업에서 최적화를 진행하는데 많은 도움이 되었습니다. Part2 도 기대 됩니다. 빨리 나오면 좋겠네요.
2020-08-24
지식공유자유동균
안녕하세요 윤태영님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 다음 번에도 좋은 강의로 찾아 뵙겠습니다. 감사합니다. :)
2020-08-24
지식공유자유동균
Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
2021-09-06
Junsu Shin thumbnail
웹 퍼포먼스 관련해서 좋은 자료를 찾기가 힘든데 강의로 잘 정리되어 있어서 너무 좋네요. Part 2도 기대합니다!
2021-04-15
지식공유자유동균
Part.2 소식을 전해드립니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰도 있습니다! (~9/13)
2021-09-06

55,000원

폴더에 추가 685 공유
지식공유자 : 유동균
총 24개 수업˙총 2시간 54분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
수강 전 궁금한 점이 있나요?
문의하기
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스