Tối ưu hóa hiệu suất web thực tế dành cho nhà phát triển front-end (hợp tác với React) - Phần. 1
hackurity01
React tạo ra dịch vụ web và học cách đo lường hiệu suất cũng như tối ưu hóa nhanh hơn và hiệu quả hơn.
중급이상
React, Chrome DevTools
BEST
フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2
React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。
学習した受講者のレビュー
こんなことが学べます
Web サービスのパフォーマンスを分析する方法
さまざまな Web パフォーマンス最適化手法
ブラウザ動作原理
Chrome devtools の使い方
React devtools の使い方
フロントエンドのパフォーマンス最適化
実力あるFE開発者として成長するため
本当！ Webフロントエンドのパフォーマンス最適化。
前の部分に走った
鮮やかな受講評価を確認してください！
この講義は？
Inflearnのベスト！
本番Webパフォーマンス最適化シリーズ🎲
さまざまな例を通して、 Webサービスの分析と最適化技術を学ぶことができる講義です。
一般的に理論だけを伝える無責任な一般的な最適化講義とは異なり、
実例では、直接分析と最適化を学ぶことができます
国内初のパフォーマンス最適化エキス講義です！
上位10％フロントエンド
開発者に向かって。
フロントエンドという分野が出てからかなり経ったが、
Webパフォーマンスの最適化に精通しているフロントエンド開発者はあまりありません。
このような現実の中で、
Webパフォーマンス最適化技術を身につけ、先進のフロントエンド人材になるか、
単純なパブリッシングだけをするただそのような従業員になるかは皆さんの選択です。
講義を事前に
確認してみてください。
学習内容
- Performanceパネルによる分析
- Lighthouseパネルを使用した分析
- ネットワークパネルを使用した分析
- Coverageパネルを使用した分析
- React Developer Toolsの活用法
- Redux DevToolsの活用法
- 画像遅延（Lazy）ロード
- 画像サイズの最適化
- 動画サイズの最適化
- フォントの最適化
- キャッシュの最適化
- 不要なCSSを削除する方法
- Layout Shiftの回避方法
- UseSelector レンダリングのトラブルシューティング
- Redux Reselectによるレンダリングの最適化
- Memoizationによる最適化
- ボトルネック関数ロジックの改善
クラスプレビュー
学習対象を確認してください！
- このレッスンは、フロントエンドのWeb開発経験がある方に適したレッスンです。特に、React（リアクト）の使用経験があれば、より簡単に学習できます。
この講義を作った
知識共有者を紹介します。
流動菌
- （現）ハッチラプスフロントエンド開発者
- （前）ラインファイナンシャルフロントエンド開発者
- サムスンSSAFY、プログラマスなどのフロントエンド開発講義
- Webパフォーマンス最適化プロジェクトと講義制作
- マイクロソフト393号(JSテーマ)、392号(ブロックチェーンテーマ)寄稿
パフォーマンスの最適化ということを「どのように」学ぶのが良いかについての原論的な悩みをしてこの講義を作ることになりました。以前に複数のWebサービスの性能を分析し、最適化してみた経験を振り返ってみると、理論から多くお知らせするよりもサンプルサービスを直接分析して実習してみれば、Web性能の最適化について確実に学習できると思いました。
実は性能最適化というのは状況によって変わることができ、方法も多様だが、その中で核心的なものを集めておき、単に最適化技法だけではなくブラウザの動作原理や性能の分析方法など、ウェブフロントエンド開発に骨となって肉がなることも教えてくれますので、一生懸命学習してください。質問はいつも歓迎です。
予想される質問Q&A。
Q. 講義の難易度はどのくらいですか？
基本的にはWebに関する知識が必要です。しかし、性能最適化の部分では基礎から詳しく説明をしましたので、性能最適化を初めてご利用の方でもご理解いただけます。
Q. このレッスンではどのプログラム（またはツール）を使用しますか？
Chromeの開発者ツール（devtools）を主に使用します。その他に必要に応じて追加のライブラリを使用しますが、使い方や簡単な説明を一緒にするので学習するのに困難はないでしょう。
Q. この講義だけの特別な利点がありますか？
Web パフォーマンスの最適化を学習することは困難です。なぜなら当然の資料もなく、ほとんど断片的な理論だからです。しかし、このレッスンでは、そのような断片的な最適化技術を集めて、直接学習し訓練することができるいくつかのWebサービスを用意しました。そのため、どのようにサービスを分析し、何に基づいて、どのような最適化技術を適用する必要があるのかを学ぶことができます。
こんな方に
おすすめです
学習対象は
誰でしょう？
Web パフォーマンスの最適化に関心のある開発者
より高速で軽量な Web サービスを作成したい開発者
Chrome devtools をさらに活用したい開発者
競争力を身につけたいWebフロントエンド開発者
前提知識、
必要でしょうか？
HTML5、Javascript、CSS
React.js
3,792
受講生
211
受講レビュー
107
回答
4.9
講座評価
3
講座
(전) 해치랩스 프론트엔드 개발자
(전) 라인 파이낸셜 프런트엔드 개발자
삼성 SSAFY, 프로그래머스 등 프런트엔드 개발 강의
웹 성능 최적화 프로젝트 및 강의 제작
마이크로소프트웨어 393호(JS 주제), 392호(블록체인 주제) 기고
カリキュラム
全体
21件 ∙ (7時間 53分)
講座資料（こうぎしりょう）:
授業資料
1. 0-1) 講義紹介
03:33
2. 3-1) 実習内容紹介
04:45
5. 3-4) 画像サイズ最適化
30:50
6. 3-5) 動画サイズ最適化
17:40
10. 3-7) キャッシュ最適化
43:43
11. 3-8) 不要な CSS 削除
29:12
12. 3-9) 要約まとめ
10:54
講座掲載日:
最終更新日:
受講レビュー
全体
49件
5.0
49件の受講レビュー
junsushin45461566受講レビュー 2
∙
平均評価 5.0
5
14% 受講後に作成Nghe Phần 1 thực sự rất có ích, nhưng lần này thậm chí còn tốt hơn vì số lượng lớp dự án đã tăng lên. Tôi đang học được rất nhiều~
- hackurity01知識共有者
Xin chào Junsu Shin. Cảm ơn bạn đã quan tâm đến bài giảng! Chúng tôi sẽ cố gắng cung cấp những bài thực hành mới hơn và hữu ích hơn trong bài giảng tiếp theo! :)
- wwwbbb10977
受講レビュー 8
∙
平均評価 5.0
5
100% 受講後に作成Lần này tôi tham gia khóa học cùng với Phần 1. Khi nói đến tối ưu hóa, đã có nhiều lúc tôi tìm kiếm trên Google và cảm thấy thất vọng vì không thể hiểu được, nhưng những ví dụ phong phú và những lời giải thích tử tế đã giúp tôi rất nhiều. Cảm ơn bạn đã xuất bản một bài giảng hay, và tôi chắc chắn sẽ nghe bộ tiếp theo khi nó ra mắt ^^
- jhkim7984
受講レビュー 1
∙
平均評価 5.0
5
76% 受講後に作成Cảm ơn bạn vì bài giảng tuyệt vời. Tuy nhiên, sẽ là một ý tưởng hay nếu phóng to màn hình nguồn khi phát hành loạt phim tiếp theo. Cảm ơn.
- hackurity01知識共有者
Xin chào, jhkim. Tôi xin lỗi vì không thể phóng to màn hình mã nguồn. 😭 Chúng ta sẽ đến bài giảng tiếp theo với màn hình dễ đọc hơn! Cảm ơn bạn đã quan tâm tới bài giảng!
- shine78841433
受講レビュー 3
∙
平均評価 5.0
- junikim
受講レビュー 3
∙
平均評価 5.0
期間限定セール、あと3日日で終了
￥1,223,920
24%
￥9,371
hackurity01の他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[Gia hạn] Tạo NodeBird SNS bằng React강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
