강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

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) 47 reviews

1,480 learners

  • hackurity01
React
Chrome DevTools

Reviews from Early Learners

What you will learn!

  • 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.

Recommended for
these people

Who is this course right for?

  • 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

Need to know before starting?

  • HTML5, Javascript, CSS

  • React.js

Hello
This is

3,731

Learners

205

Reviews

106

Answers

4.9

Rating

3

Courses

  • (전) 해치랩스 프론트엔드 개발자

  • (전) 라인 파이낸셜 프런트엔드 개발자

  • 삼성 SSAFY, 프로그래머스 등 프런트엔드 개발 강의

  • 웹 성능 최적화 프로젝트 및 강의 제작

  • 마이크로소프트웨어 393호(JS 주제), 392호(블록체인 주제) 기고

Curriculum

All

21 lectures ∙ (7hr 53min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

47 reviews

5.0

47 reviews

  • Junsu Shin님의 프로필 이미지
    Junsu Shin

    Reviews 2

    Average Rating 5.0

    5

    14% enrolled

    1편 들으면서 정말 유익했는데, 이번에는 프로젝트 수업 분량이 늘어서 더 좋네요. 많이 배우고 갑니다~

    • 유동균
      Instructor

      안녕하세요 Junsu Shin님. 강의에 관심을 가져주셔서 감사합니다! 다음 강의에서도 더 새롭고 유용한 실습이 될 수 있도록 노력하겠습니다! :)

  • dgh12님의 프로필 이미지
    dgh12

    Reviews 8

    Average Rating 5.0

    5

    100% enrolled

    이번에 파트 1과 같이 수강했습니다. 최적화라면 구글 검색을 찾아보고 그 마저도 이해가 안 되서 좌절한 적도 많았는데, 직접 풍부한 예시와 친절하신 설명으로 많은 도움이 됐습니다. 좋은 강의를 출시해주셔서 감사하고 다음 시리즈가 나온다면 꼭 듣겠습니다^^

    • jhkim님의 프로필 이미지
      jhkim

      Reviews 1

      Average Rating 5.0

      5

      76% enrolled

      좋은 강의 감사드립니다. 다만 다음 시리즈 내실 때 소스 화면을 좀 더 키워주시면 좋을 것 같습니다. 감사하겠습니다.

      • 유동균
        Instructor

        안녕하세요, jhkim님. 미처 소스코드 화면을 키우지 못한 점 죄송합니다. 😭 다음 강의는 더욱 가독성 좋은 화면으로 찾아뵙겠습니다! 강의에 관심을 가져주셔서 감사합니다!

    • im p님의 프로필 이미지
      im p

      Reviews 3

      Average Rating 5.0

      5

      95% enrolled

      좋은강의입니다. 다만 변수명을 조금만더 신경써주시면 좋을것같아요. ex) state.category.category 이런것들은 혼란이 좀 생깁니다

      • 볼보이님의 프로필 이미지
        볼보이

        Reviews 3

        Average Rating 5.0

        5

        33% enrolled

        $59.40

        hackurity01's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!