inflearn logo
inflearn logo

Real-world web performance optimization for frontend developers (feat. React) - Part. 2

Learn how to measure the performance of your React-built web services and optimize them for speed and efficiency.

(5.0) 수강평 53개

강의소개.상단개요.수강생.short

난이도 중급이상

수강기한 무제한

React
React
Chrome DevTools
Chrome DevTools
React
React
Chrome DevTools
Chrome DevTools

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

Junsu Shin

14% 수강 후 작성

It was really helpful listening to Part 1, but this time the project class volume has increased, so it's even better. I'm learning a lot~

5.0

dgh12

100% 수강 후 작성

This time, I took the course along with Part 1. When it comes to optimization, I often searched Google and got frustrated because I didn't understand it, but the rich examples and kind explanations helped me a lot. Thank you for releasing a good course, and I will definitely listen to the next series if it comes out^^

5.0

jhkim

76% 수강 후 작성

Thank you for the great lecture. However, I think it would be better if you could make the source screen bigger when you teach the next series. Thank you.

강의상세_배울수있는것_타이틀

  • How to Analyze the Performance of a Web Service

  • Various Web Performance Optimization Techniques

  • How a browser works

  • How to use Chrome devtools

  • How to use React devtools

  • Front-end performance optimization

To grow into a capable FE developer
Real-world! Optimizing Web Frontend Performance.

Running in the last part
Check out the vivid class reviews!

You can see more course reviews on the course page. (Click)

What about this lecture?

Inflearn is the best!
Practical Web Performance Optimization Series 🎲

Part.1 Previous lecture

  • Optimizing your blog site
  • Optimizing Olympic Statistics Site

Part.2 Current lecture 

  • General Home Page Optimization
  • Image Gallery Optimization

Part.3 Scheduled lectures

  • preparing!

This course teaches you analysis and optimization techniques for web services through various examples.
Unlike the typical irresponsible optimization lectures that only teach theories,
You can learn analysis and optimization directly through real-world examples .
This is Korea's first performance optimization X-axis lecture !


Top 10% Frontend
Towards the developers.

It's been quite some time since the field called front-end emerged,
Few front-end developers know much about web performance optimization.

In this reality,
Learn web performance optimization techniques to become a top front-end talent .
It's your choice whether you want to be just another employee who simply publishes.


Pre-lecture
Check it out.

Learning Contents

  • Analysis using the Performance panel
  • Analysis using Lighthouse panels
  • Analysis using the Network panel
  • Analysis using the Coverage panel
  • How to use React Developer Tools
  • How to use Redux DevTools
  • Lazy loading of images
  • Image size optimization
  • Optimize video size
  • Font optimization
  • Cache Optimization
  • How to remove unnecessary CSS
  • How to avoid layout shift
  • Fixing UseSelector rendering issues
  • Optimizing rendering with Redux Reselect
  • Optimization using memoization
  • Improve bottleneck function logic

Preview the class

Please check the learning target!

  • This course is suitable for those with experience in front-end web development. In particular, if you have experience using React, you will be able to learn more easily.

Created this course
Introducing the knowledge sharer.

Fluid bacteria

  • (Current) Hatch Labs Frontend Developer
  • (Former) Line Financial Front-end Developer
  • Samsung SSAFY, Programmers, etc. Front-end development lectures
  • Web Performance Optimization Projects and Lecture Production
  • Contribution to Microsoft Software Issue 393 (JS Topic) and Issue 392 (Blockchain Topic)

I created this course after thinking about the fundamentals of 'how' to learn performance optimization . After looking back on my previous experience analyzing and optimizing the performance of various web services, I thought that rather than just teaching you a lot of theory, if you analyze and practice example services yourself, you will be able to learn web performance optimization more clearly.

In fact, performance optimization can vary depending on the situation, and there are various methods, but I have gathered the core ones, and it is not just an optimization technique, but also the operating principles of browsers and performance analysis methods , so please study hard and learn the bones and flesh of web front-end development. Questions are always welcome.


Expected Questions Q&A.

Q. How difficult is the lecture?

Basic knowledge of the web is required. However, since the performance optimization part is explained in detail from the basics, even those who are new to performance optimization can understand it.

Q. What programs (or tools) do you use in this course?

I mainly use Chrome's developer tools (devtools). In addition, I use additional libraries as needed. Since I provide instructions and simple explanations, you won't have any difficulty learning.

Q. Are there any special advantages to this course?

Learning web performance optimization is difficult because there are no proper materials and most of them are fragmentary theories. However, in this lecture, we have prepared several web services where you can learn and practice by collecting such fragmentary optimization techniques. Therefore, you can learn in detail how to analyze the service, what to base it on, and what optimization techniques to apply.

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • Developers interested in optimizing web performance

  • Developers who want to create faster, lighter web services

  • Developers who want to make better use of Chrome devtools

  • Web Frontend Developer Who Wants to Be Competitive

선수 지식, 필요할까요?

  • HTML5, Javascript, CSS

  • React.js

강의소개.지공자소개

3,987

수강생

235

수강평

108

답변

4.9

강의 평점

3

강의_other

  • (Former) Haechi Labs Frontend Developer

  • (Former) LINE Financial Frontend Developer

  • Frontend development lectures for Samsung SSAFY, Programmers, etc.

  • Web performance optimization projects and course creation

  • Contributed to Microsoftware Issue 393 (JS theme) and Issue 392 (Blockchain theme)

더보기
강의 게시일: 
마지막 업데이트일: 

수강평

전체

53개

5.0

53개의 수강평

  • dragonpepper954083님의 프로필 이미지
    dragonpepper954083

    수강평 2

    평균 평점 5.0

    5

    33% 수강 후 작성

    "Good"

    • jhkim7984님의 프로필 이미지
      jhkim7984

      수강평 1

      평균 평점 5.0

      5

      76% 수강 후 작성

      Thank you for the great lecture. However, I think it would be better if you could make the source screen bigger when you teach the next series. Thank you.

      • hackurity01
        지식공유자

        Hello, jhkim. I apologize for not being able to enlarge the source code screen. 😭 I will come back with a more readable screen in the next lecture! Thank you for your interest in the lecture!

    • junsushin45461566님의 프로필 이미지
      junsushin45461566

      수강평 2

      평균 평점 5.0

      5

      14% 수강 후 작성

      It was really helpful listening to Part 1, but this time the project class volume has increased, so it's even better. I'm learning a lot~

      • hackurity01
        지식공유자

        Hello Junsu Shin. Thank you for your interest in the lecture! I will try to provide newer and more useful exercises in the next lecture! :)

    • wwwbbb10977님의 프로필 이미지
      wwwbbb10977

      수강평 9

      평균 평점 5.0

      5

      100% 수강 후 작성

      This time, I took the course along with Part 1. When it comes to optimization, I often searched Google and got frustrated because I didn't understand it, but the rich examples and kind explanations helped me a lot. Thank you for releasing a good course, and I will definitely listen to the next series if it comes out^^

      • shine78841433님의 프로필 이미지
        shine78841433

        수강평 3

        평균 평점 5.0

        5

        95% 수강 후 작성

        It's a good lecture. However, I think it would be better if you paid a little more attention to variable names. ex) state.category.category These are a bit confusing.

        비슷한 강의

        같은 분야의 다른 강의를 만나보세요!

        강의상세.할인문구

        $53,900.00

        30%

        $59.40