BEST

Programming

Front-end

フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 1

Name: フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 1
Price: 41250 KRW

React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。

（4.9）受講レビュー 144件

受講生 2,073名

hackurity01

3시간 만에 완강할 수 있는 강의 ⏰

React

Chrome DevTools

学習した受講者のレビュー

こんなことが学べます

Web サービスのパフォーマンスを分析する方法
さまざまな Web パフォーマンス最適化手法
ブラウザ動作原理
Chrome devtools の使い方
フロントエンドのパフォーマンス最適化

Webフロントエンドのパフォーマンス最適化、自信がありますか？
最適化手法をまとめてきちんと学びましょう！

この講義の鮮やかな受講評！ ✨

この講義は？

Inflearnのベスト！
本番Webパフォーマンス最適化シリーズ🎲

Part.1 現在の講義

ブログサイトの最適化
オリンピック統計サイトの最適化

Part.2

一般ホームページの最適化
イメージギャラリーの最適化

Part.3 予定講義

準備中！

さまざまな例を通して、 Webサービスの分析と最適化技術を学ぶことができる講義です。
一般的に理論だけを伝える無責任な一般的な最適化講義とは異なり、
実例では、直接分析と最適化を学ぶことができます
国内初のパフォーマンス最適化エキス講義です！

講義に関する質問
確認してください🙋‍♂️

Q. 講義の難易度はどのくらいですか？

基本的にはWebに関する知識が必要です。しかし、性能最適化の部分では基礎から詳しく説明をしましたので、性能最適化を初めてご利用の方でもご理解いただけます。

Q. このレッスンではどのプログラム（またはツール）を使用しますか？

Chromeの開発者ツール（devtools）を主に使用します。その他に必要に応じて追加のライブラリを使用しますが、使い方や簡単な説明を一緒にするので学習するのに困難はないでしょう。

Q. この講義だけの特別な利点がありますか？

Web パフォーマンスの最適化を学習することは困難です。なぜなら当然の資料もなく、ほとんど断片的な理論だからです。しかし、このレッスンでは、そのような断片的な最適化技術を集めて、直接学習し訓練することができるいくつかのWebサービスを用意しました。そのため、どのようにサービスを分析し、何に基づいて、どの最適化技術を適用すべきかを学ぶことができます。

この講義を作った
知識共有者を紹介します。

流動菌

（現）ハッチラプスフロントエンド開発者
（前）ラインファイナンシャルフロントエンド開発者
サムスンSSAFY、プログラマスなどのフロントエンド開発講義
Webパフォーマンス最適化プロジェクトと講義制作
マイクロソフト393号(JSテーマ)、392号(ブロックチェーンテーマ)寄稿

パフォーマンスの最適化ということを「どのように」学ぶのが良いかについての原論的な悩みをしてこの講義を作ることになりました。以前に複数のWebサービスの性能を分析し、最適化してみた経験を振り返ってみると、理論から多くお知らせするよりもサンプルサービスを直接分析して実習してみれば、Web性能の最適化について確実に学習できると思いました。

実は性能最適化というのは状況によって変わることができ、方法も多様だが、その中核となるものを集めておき、単に最適化技法だけではなくブラウザの動作原理や性能の分析方法など、ウェブフロントエンド開発に骨となって肉がなることも教えてくれますので、一生懸命学習してください。質問はいつも歓迎です。

こんな方に
おすすめです

学習対象は
誰でしょう？

Web パフォーマンスの最適化に関心のある開発者
より高速で軽量な Web サービスを作成したい開発者
Chrome devtools をさらに活用したい開発者
競争力を身につけたいWebフロントエンド開発者

前提知識、
必要でしょうか？

HTML5、Javascript、CSS
React.js

こんにちは
です。

3,692

受講生

205

受講レビュー

106

回答

4.9

講座評価

講座

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

カリキュラム

全体

24件 ∙ (2時間 54分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．Intro

4件 ∙ (6分)

セクション 2．第1章ブログサイトの最適化

11件 ∙ (1時間 23分)

5. 1-1) 実習内容紹介
02:45
6. 1-2）分析ツールの紹介＆amp;コードのダウンロード
02:10
7. 1-3) サービスナビゲーションとコード分析
04:34
8. 1-4) Audits ツールによるページ監査
04:19
9. 1-5) 画像サイズの最適化
10:50
10. 1-6) bottleneckコードナビゲーション
11:44
11. 1-7) bottleneck コードの最適化
10:02
12. 1-8) bundleファイル解析(bundle-analyzer)
07:43
13. 1-9) Code Splitting &
12:35
14. 1-10) テキスト圧縮の適用
14:10
15. 1-11）1講義のまとめ
02:34

セクション 3．第2章統計サイトの最適化

8件 ∙ (1時間 9分)

16. 2-1）実習内容＆amp;分析ツールの紹介
02:35
17. 2-2）サービスナビゲーション＆amp;コード分析
13:13
18. 2-3) アニメーション分析(ReflowとRepaint理論)
15:34
19. 2-4) アニメーションの最適化
10:12
20. 2-5) コンポーネント Lazy Loading (Code Splitting)
06:05
21. 2-6) コンポーネント Preloading
11:16
22. 2-7) イメージ Preloading
08:33
23. 2-8）2講義まとめ
02:29

セクション 4．付録（Chrome devtoolsの使用法）

1件 ∙ (15分)

講座掲載日:

最終更新日:

受講レビュー

全体

144件

4.9

144件の受講レビュー

윤태영
受講レビュー 1
∙
平均評価 5.0
5
96% 受講後に作成
실제 현업에서 최적화를 진행하는데 많은 도움이 되었습니다. Part2 도 기대 됩니다. 빨리 나오면 좋겠네요.
- 유동균
  知識共有者
  안녕하세요 윤태영님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 다음 번에도 좋은 강의로 찾아 뵙겠습니다. 감사합니다. :)
- 유동균
  知識共有者
  Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
정산아(공과대학 컴퓨터공학과)
受講レビュー 1
∙
平均評価 5.0
5
42% 受講後に作成
다음 강의도 얼른 듣고 싶어요! 필요하지만 쉽게 찾아보기 힘든 강의라 가치있는 강의라고 생각합니다.
- 유동균
  知識共有者
  안녕하세요 정산아님, 웹 성능 최적화 강의의 유동균입니다. 가치있는 강의라 생각해주셔서 감사합니다! 다음 강의에서도 더 도움이 될 수 있도록 알찬 내용으로 찾아뵙겠습니다. 감사합니다.
- 유동균
  知識共有者
  거의 1년이 다 되었네요.. Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
유니짜장
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
혼자 공부하면서 긴가민가했던 내용을 잘 설명해주셔서 좋았어요!^^
- 유동균
  知識共有者
  안녕하세요 유니짜장님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 다음 강의도 준비하고 있으니 곧 알찬 내용으로 찾아뵙겠습니다. 감사합니다.
- 유동균
  知識共有者
  Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
이충만
受講レビュー 9
∙
平均評価 5.0
5
100% 受講後に作成
유익한 강의였습니다! 면접전에 봤더라면 합격했을 텐데... ㅠㅠ
- 유동균
  知識共有者
  안녕하세요 이충만님, 웹 성능 최적화 강의의 유동균입니다. 도움이 되셨다니 다행입니다! 이전 면접은 어쩔 수 없지만, 다음 면접에서는 좋은 결과 있기를 바랍니다. 다음 강의에서도 도움이 되도록 더 알찬 내용으로 찾아 뵙겠습니다. 감사합니다.
- 유동균
  知識共有者
  거의 1년이 다 되었네요.. Part.2 소식을 전해드리려고 왔습니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰드립니다! (~9/13)
Junsu Shin
受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成
웹 퍼포먼스 관련해서 좋은 자료를 찾기가 힘든데 강의로 잘 정리되어 있어서 너무 좋네요. Part 2도 기대합니다!
- 유동균
  知識共有者
  Part.2 소식을 전해드립니다! 공지사항 확인하시면 기존 수강생 분들을 위한 할인 쿠폰도 있습니다! (~9/13)

期間限定セール、あと5日日で終了

￥41,250

25%

￥6,578

hackurity01の他の講座

知識共有者の他の講座を見てみましょう！

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

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

중급이상

React, Chrome DevTools

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

似ている講座

同じ分野の他の講座を見てみましょう！

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

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

중급이상

React, Chrome DevTools

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

유동균

리액트 취준생을 위한 Zustand 실전 입문 가이드

DevForGoal

이 강의는 수강생이 Zustand의 기본 원리부터 실전 적용까지 체계적으로 학습하도록 돕습니다.

입문

React, zustand

리액트 취준생을 위한 Zustand 실전 입문 가이드

DevForGoal

이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편

코드캠프

No Code, Only Prompt 10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만드는 '진짜' 실무적용 바이브코딩을 배울 수 있습니다.

입문

React, Next.js, cursor

이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편

코드캠프

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

중급이상

React, react-usememo, 기술면접

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

중급이상

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

초급

REST API, GraphQL, React

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

웹 개발 입문자를 위한 나침반, 당신이 웹 프론트엔드에 대해 모르는 것을 발견하고 체계적으로 나아가기 위한 가이드 강의입니다.

입문

네트워크, Google Chrome, Chrome DevTools

키워드와 실습으로 읽는 웹 프론트엔드 기초개념 총정리

어메이징론

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정