강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

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

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

（5.0）受講レビュー 53件

受講生 1,561名

難易度 中級以上

受講期間 無制限

  • hackurity01
React
React
Chrome DevTools
Chrome DevTools
React
React
Chrome DevTools
Chrome DevTools

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

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

5.0

5.0

Junsu Shin

14% 受講後に作成

1編聞きながら本当にお得でしたが、今回はプロジェクトの授業分量が増えてより良いですね。たくさん学んでいきます〜

5.0

dgh12

100% 受講後に作成

今回はパート1のように受講しました。 最適化ならグーグル検索を探してみてもそのさえ理解できず挫折したことも多かったのですが、直接豊富な例と親切な説明で多くの助けになりました。 良い講義をリリースしていただきありがとうございます。

5.0

jhkim

76% 受講後に作成

良い講義ありがとうございます。ただ、次のシリーズに来るときにソース画面をもう少し育てていただければと思います。ありがとうございます。

受講後に得られること

  • Web サービスのパフォーマンスを分析する方法

  • さまざまな Web パフォーマンス最適化手法

  • ブラウザ動作原理

  • Chrome devtools の使い方

  • React devtools の使い方

  • フロントエンドのパフォーマンス最適化

実力あるFE開発者として成長するため
本当！ Webフロントエンドのパフォーマンス最適化。

前の部分に走った
鮮やかな受講評価を確認してください！

レッスンページでより多くの受講評価を見ることができます。 (クリック)

この講義は？

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

Part.1 過去の講義

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

Part.2 現在の講義 

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

Part.3 予定講義

  • 準備中！

さまざまな例を通して、 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,970

受講生

234

受講レビュー

108

回答

4.9

講座評価

3

講座

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

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

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

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

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

カリキュラム

全体

21件 ∙ (7時間 53分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

53件

5.0

53件の受講レビュー

  • junsushin45461566님의 프로필 이미지
    junsushin45461566

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    14% 受講後に作成

    1編聞きながら本当にお得でしたが、今回はプロジェクトの授業分量が増えてより良いですね。たくさん学んでいきます〜

    • hackurity01
      知識共有者

      こんにちはJunsu Shinさん。講義に関心をお寄せいただきありがとうございます！次の講義でも、より新しくて有用な練習になるよう努力します！ :)

  • wwwbbb10977님의 프로필 이미지
    wwwbbb10977

    受講レビュー 9

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    今回はパート1のように受講しました。 最適化ならグーグル検索を探してみてもそのさえ理解できず挫折したことも多かったのですが、直接豊富な例と親切な説明で多くの助けになりました。 良い講義をリリースしていただきありがとうございます。

    • jhkim7984님의 프로필 이미지
      jhkim7984

      受講レビュー 1

      ∙

      平均評価 5.0

      5

      76% 受講後に作成

      良い講義ありがとうございます。ただ、次のシリーズに来るときにソース画面をもう少し育てていただければと思います。ありがとうございます。

      • hackurity01
        知識共有者

        こんにちは、jhkimさん。未来のソースコード画面を育てていないことを申し訳ありません。 😭次のレッスンは、より読みやすく、良い画面で探してみましょう！講義に関心をお寄せいただきありがとうございます！

    • shine78841433님의 프로필 이미지
      shine78841433

      受講レビュー 3

      ∙

      平均評価 5.0

      5

      95% 受講後に作成

      良い講義です。ただ、変数名を少しだけ気にしてくれればいいと思います。 ex) state.category.category これらのものは混乱が発生します

      • dragonpepper954083님의 프로필 이미지
        dragonpepper954083

        受講レビュー 2

        ∙

        平均評価 5.0

        5

        33% 受講後に作成

        「良い」

        ￥9,363

        hackurity01の他の講座

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

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

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

        hackurity01

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

        중급이상

        중급이상

        React, Chrome DevTools

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

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

        hackurity01

        似ている講座

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

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

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

        hackurity01

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

        중급이상

        중급이상

        React, Chrome DevTools

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

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

        hackurity01

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

        aftercamp

        Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

        중급이상

        중급이상

        React, react-usememo, Tech Interview

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

        aftercamp

        フロントエンド開発のスパイス、Web API (feat. React)강의 썸네일

        フロントエンド開発のスパイス、Web API (feat. React)

        vroomfan

        実務で活用できるWeb APIを扱います。一度は必ず直面するであろう要件を解決するための武器を、ぜひ手に入れてください。

        초급

        초급

        JavaScript, React, Web API

        フロントエンド開発のスパイス、Web API (feat. React)강의 썸네일

        フロントエンド開発のスパイス、Web API (feat. React)

        vroomfan

        Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する강의 썸네일

        Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

        neneee

        Spring Boot + React.js ログイン（+ソーシャル）サービスを理解するとは、 JWTベース認証およびソーシャルログイン(Kakao/Google)を含む実践型ログインシステムを直接実装しながら、 フロントエンドとバックエンドの認証フローを深く理解できるように設計された講座です。 フロントエンドはReact.js、バックエンドはSpring Bootをベースに構成されており、実際のサービス環境で使われる Access Token + Refresh Token方式、HttpOnly Cookie、Reduxを活用したユーザー状態管理、 Roleベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

        초급

        초급

        React, Node.js, REST API

        Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する강의 썸네일

        Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

        neneee

        iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

        iOS/Androidアプリ開発のための本番 React Native - Basic

        Wintho

        Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

        초급

        초급

        React Native, React, ES6

        iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

        iOS/Androidアプリ開発のための本番 React Native - Basic

        Wintho

        一口サイズに切って食べる実践プロジェクト - SNS編강의 썸네일

        一口サイズに切って食べる実践プロジェクト - SNS編

        winterlood

        さあ、実践に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証&認可、無限スクロール、画像アップロード、いいね、無限ネスト型コメント、ダークモードなどの機能を作ってみます。この過程でZustandとTanstack Queryを利用したサーバーおよびグローバル状態管理技法も見ていく予定です。

        중급이상

        중급이상

        supabase, zustand, react-query

        一口サイズに切って食べる実践プロジェクト - SNS編강의 썸네일

        一口サイズに切って食べる実践プロジェクト - SNS編

        winterlood

        フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

        フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

        John Ahn

        このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

        초급

        초급

        Clone Coding, Node.js, React

        フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

        フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

        John Ahn

        Reactを上手に扱える開発者になる강의 썸네일

        Reactを上手に扱える開発者になる

        nakjasabal0079

        「リアクトが上手な開発者になる」という本が出版されました。 この本はリアクト学習前に必要なウェブの基本原理から最新のリアクトフックまで体系的に案内し、しっかりとした基礎知識を提供します。合計40個以上の多彩な実戦プロジェクトと豊富な実習例題を通じて理論を実務にすぐ適用し、問題解決能力を育てることができます。また、リダックスツールキット、Zustand、Firebaseなど現代ウェブ開発に必須の技術を一緒に学び、完成度の高いリアクトアプリケーション開発者として成長できるよう支援します。

        초급

        초급

        JavaScript, React, Firebase

        Reactを上手に扱える開発者になる강의 썸네일

        Reactを上手に扱える開発者になる

        nakjasabal0079

        [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

        [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

        nybs

        フロントエンドプロジェクトのミッションコンテンツです。DevTimeというタイマーアプリを直接実装しながらプロジェクト実習ができるよう、PRD企画書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスと同等レベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてみましょう 🚀

        입문

        입문

        React

        [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

        [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

        nybs

        一日で作る自分だけのビジュアルノベルゲーム강의 썸네일

        一日で作る自分だけのビジュアルノベルゲーム

        Neo

        React、Javascript、SpringAI、Springbootを使って自分だけのビジュアルノベルゲームを作ってみましょう。 SpringAIとReactを通じてWebベースのビジュアルノベルゲームを作る方法をお教えします！ Neo + Essential

        초급

        초급

        React, Spring Boot, AI

        一日で作る自分だけのビジュアルノベルゲーム강의 썸네일

        一日で作る自分だけのビジュアルノベルゲーム

        Neo

        キーワードと実習で読むWebフロントエンド基礎概念総まとめ강의 썸네일

        キーワードと実習で読むWebフロントエンド基礎概念総まとめ

        ronpark [DEL] 251126125407

        Web開発入門者のためのコンパス、あなたがWebフロントエンドについて知らないことを発見し、体系的に進むためのガイド講義です。

        입문

        입문

        Network, Google Chrome, Chrome DevTools

        キーワードと実習で読むWebフロントエンド基礎概念総まとめ강의 썸네일

        キーワードと実習で読むWebフロントエンド基礎概念総まとめ

        ronpark [DEL] 251126125407

        SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

        SpringAI + Reactで作る自分だけの感情日記サービス

        Neo

        SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

        초급

        초급

        React, Kotlin, Spring Boot

        SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

        SpringAI + Reactで作る自分だけの感情日記サービス

        Neo

        # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

        # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

        dakgangjung123

        React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

        초급

        초급

        React, Electron, GUI

        # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

        # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

        dakgangjung123

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

        codecamp

        Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

        초급

        초급

        React, Next.js, expo

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

        codecamp

        完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

        完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

        IT s Dev

        完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

        입문

        입문

        React, React Native, react.js

        完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ강의 썸네일

        完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

        IT s Dev

        [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

        [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

        codecamp

        10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

        중급이상

        중급이상

        React, Next.js, cursor

        [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

        [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

        codecamp

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

        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 つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

        ludgi

        SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門강의 썸네일

        SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

        ehtjd339667

        ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！ 素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

        초급

        초급

        React, Java, AWS

        SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門강의 썸네일

        SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

        ehtjd339667

        TypeScript Korea：React with TypeScriptセミナー강의 썸네일

        TypeScript Korea：React with TypeScriptセミナー

        woongjae

        タイプスクリプトとリアクト関連講座です。

        중급이상

        중급이상

        React, TypeScript

        TypeScript Korea：React with TypeScriptセミナー강의 썸네일

        TypeScript Korea：React with TypeScriptセミナー

        woongjae