프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
유동균
리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다.
중급이상
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,692
受講生
205
受講レビュー
106
回答
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
講座掲載日:
最終更新日:
受講レビュー
全体
47件
5.0
47件の受講レビュー
Junsu Shin受講レビュー 2
∙
平均評価 5.0
5
14% 受講後に作成1편 들으면서 정말 유익했는데, 이번에는 프로젝트 수업 분량이 늘어서 더 좋네요. 많이 배우고 갑니다~
- 유동균知識共有者
안녕하세요 Junsu Shin님. 강의에 관심을 가져주셔서 감사합니다! 다음 강의에서도 더 새롭고 유용한 실습이 될 수 있도록 노력하겠습니다! :)
- dgh12
受講レビュー 8
∙
平均評価 5.0
- im p
受講レビュー 3
∙
平均評価 5.0
- 볼보이
受講レビュー 3
∙
平均評価 5.0
期間限定セール、あと5日日で終了
￥57,750
25%
￥9,108
hackurity01の他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
