강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

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

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

（4.9）受講レビュー 153件

受講生 2,151名

  • 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,868

受講生

226

受講レビュー

108

回答

4.9

講座評価

3

講座

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

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

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

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

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

カリキュラム

全体

24件 ∙ (2時間 54分)

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

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

受講レビュー

全体

153件

4.9

153件の受講レビュー

  • yung66990014님의 프로필 이미지
    yung66990014

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    96% 受講後に作成

    実際の現業で最適化を進めるのに多くの助けになりました。 Part2も期待されます。早く出ればいいですね。

    • hackurity01
      知識共有者

      こんにちはユン・テヨン、Webパフォーマンス最適化講義の流動菌です。お役に立てたのは幸いです！次回も良い講義でお会いしましょう。ありがとうございます。 :)

    • hackurity01
      知識共有者

      Part.2 お知らせをお伝えしようとしてきました！お知らせご確認いただくと、既存の受講生の方のための割引クーポンをいたします！ (~9/13)

  • wjdtksdk6889님의 프로필 이미지
    wjdtksdk6889

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    42% 受講後に作成

    次の講義も早く聞きたいです！必要ですが、簡単に見つけにくい講義といえば貴重な講義だと思います。

    • hackurity01
      知識共有者

      こんにちは精算ではない、Webパフォーマンス最適化講義の流動菌です。 貴重な講義だと思ってくれてありがとう！ 次の講義でももっと役立つように、充実した内容で探してみましょう。 ありがとうございます。

    • hackurity01
      知識共有者

      ほぼ1年になりましたね。 Part.2 お知らせをお伝えしようとしてきました！ お知らせをご確認いただくと、既存の受講生の方のための割引クーポンをいたします！ (~9/13)

  • youmejung1826님의 프로필 이미지
    youmejung1826

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    一人で勉強しながらギンガ民家だった内容をよく説明してくれてよかったです！^^

    • hackurity01
      知識共有者

      こんにちはユニジャパン、Webパフォーマンス最適化講義の流動菌です。お役に立てたのは幸いです！次の講義も用意していますので、すぐに充実した内容でお会いしましょう。ありがとうございます。

    • hackurity01
      知識共有者

      Part.2 お知らせをお届けしようとしました！

  • baldongdongdong9902님의 프로필 이미지
    baldongdongdong9902

    受講レビュー 9

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    お得な講義でした！面接前に見たら合格したでしょう…ㅠㅠ

    • hackurity01
      知識共有者

      こんにちはイ・ジョンマン、Webパフォーマンス最適化講義の流動菌です。 お役に立てたのは幸いです！ 前の面接は仕方ないですが、次の面接では良い結果がありますように。 次の講義でも役立つように、より充実した内容で探してみましょう。 ありがとうございます。

    • hackurity01
      知識共有者

      ほぼ1年になりましたね。お知らせご確認いただくと、既存の受講生の方のための割引クーポンをいたします！ (~9/13)

  • junsushin45461566님의 프로필 이미지
    junsushin45461566

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    Webパフォーマンスに関しては良い資料を見つけるのが大変なのに講義でよくまとめられていてとても良いですね。

    • hackurity01
      知識共有者

      Part.2 お知らせをお届けします！お知らせ ご確認いただくと、既存の受講生の方のための割引クーポンもあります！ (~9/13)

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

￥5,293

23%

￥6,881

hackurity01の他の講座

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

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

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

hackurity01

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

중급이상

중급이상

React, Chrome DevTools

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

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

hackurity01

似ている講座

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

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

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

hackurity01

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

중급이상

중급이상

React, Chrome DevTools

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

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

hackurity01

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

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

vroomfan

実務に適用できるWeb APIを扱います。一度はきっと直面するであろう要件を解決する武器を手に入れてください。

초급

초급

JavaScript, React, Web API

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

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

vroomfan

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

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

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

aftercamp

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

중급이상

중급이상

React, react-usememo, Tech Interview

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

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

aftercamp

React(リアクト) 状態管理フック(Hook)강의 썸네일

React(リアクト) 状態管理フック(Hook)

usefulit

本コースは、Reactにおいて状態管理を効率的に扱うためのuseContextとuseReducerフックを集中的に学習するコースです。 コンポーネント間のデータ受け渡しの複雑性を軽減し、規模のあるアプリケーションにおいて状態を体系的に管理できる方法を実習と共に身につけることができます。 これにより学習者は、グローバル状態管理の基本概念を理解し、実際のプロジェクトですぐに適用できる実務活用能力を身につけることができます。

입문

입문

React, hook, react-hook-form

React(リアクト) 状態管理フック(Hook)강의 썸네일

React(リアクト) 状態管理フック(Hook)

usefulit

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

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

초급

초급

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

Reactが得意な開発者になる강의 썸네일

Reactが得意な開発者になる

nakjasabal0079

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

초급

초급

React, Firebase, JavaScript

Reactが得意な開発者になる강의 썸네일

Reactが得意な開発者になる

nakjasabal0079

知っているように見えるChrome開発者ツール강의 썸네일

知っているように見えるChrome開発者ツール

jejucoding

フロントエンド開発者のためのChrome開発者ツール講義。開発作業の際に活用しやすい様々な機能とヒントを扱っています。

입문

입문

Google Chrome, Chrome DevTools

知っているように見えるChrome開発者ツール강의 썸네일

知っているように見えるChrome開発者ツール

jejucoding

React Native with Expo: ゼロチョから正しく学ぶ강의 썸네일

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

초급

초급

React, React Native, Hybrid App

React Native with Expo: ゼロチョから正しく学ぶ강의 썸네일

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)강의 썸네일

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

초급

초급

Next.js, supabase, React

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)강의 썸네일

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

[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

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

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

ronpark [DEL] 251126125407

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

입문

입문

Network, Google Chrome, Chrome DevTools

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

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

ronpark [DEL] 251126125407

フォローして学習するノード、リアクトシリーズ - 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

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

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

codecamp

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

초급

초급

React, Next.js, expo

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

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

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

完全なフルスタック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

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

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

ehtjd339667

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

초급

초급

React, Java, AWS

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

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

ehtjd339667

Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

gymcoding

探索 → 計画 → 実装 → コミット。検証されたAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで23個のミッションで習得し、3個の実戦プロジェクトを完成します。

입문

입문

React, Next.js, cursor

Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

gymcoding

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

TypeScript Korea：React with TypeScriptセミナー

woongjae

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

중급이상

중급이상

React, TypeScript

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

TypeScript Korea：React with TypeScriptセミナー

woongjae