강의

멘토링

커뮤니티

Programming

/

Front-end

Next.jsでReactを始める

Reactが初めてですか? Reactの基本概念をしっかり固めながらも、素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみましょう。 実務で開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todoの例題は非常に重要なので、2回開発する必要があります。1回目はコンポーネント中心に、次はブラウザのパスに合わせて処理されるルーティング中心に! ログインはZustandを利用しましょう!本当に少ないコード量でグローバルステートを処理できます。

難易度 入門

受講期間 無制限

  • zk202308a5410
JavaScript
JavaScript
React
React
Web Application
Web Application
Ajax
Ajax
JavaScript
JavaScript
React
React
Web Application
Web Application
Ajax
Ajax

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

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

4.9

5.0

체스

100% 受講後に作成

講義を聞いた後、React.jsにある程度自信がつきました。 (), {}, state, set, アロー関数, フックの基本機能...などをなぜ使うのかわかるような気がします。

5.0

Codingbear

100% 受講後に作成

シンプルな核心概念講義、良いですね。

5.0

마사오

81% 受講後に作成

リアクト(Next)初心者の私に勇気を与えてくれて、 真っ暗な海の灯台のような講義です。

受講後に得られること

  • コンポーネントとコンポーネントを構成する方法

  • コンポーネントの状態(state)と属性(props)

  • APIサーバーと連携するReactアプリケーション

  • Next.jsを利用したルーティング処理

  • Zustandで状態管理する

React、Next.jsで
高速なWebアプリ開発を始めましょう!

実務必須機能だけを集めて素早く完成させます。


Reactが初めてで途方に暮れていますか?
Next.jsとJavaScriptで基礎からしっかりと、
実務例題中心の学習でしっかりとした開発基礎を固めてみましょう。


Reactを始めよう
Next.jsでReactの核心だけを素早く学ぶ実践講座

JavaScript、React、Next.js 16、App Router、React 19、Zustand
実務必須の例題を中心にコンポーネント状態管理ルーティングを完璧にマスターします。



講義で学んだ内容をもとにTodoリストログイン機能を備えた
実際のサービスレベルのWebアプリケーションを直接完成させます。



JSONPlaceholder API連携、Zustandを活用したグローバル状態管理、Next.jsルーティング実習
フロントエンド開発の全体プロセスを体験しながらスキルを向上させます。

React와Next.js
初心者のためのカリキュラム

Section 1 - ReactとNext.jsを始める

本講義は、React初心者のためにNext.jsフレームワークを使用してプロジェクトを始める方法をご案内します。JavaScriptの基本知識とWeb開発の基礎をもとに、Reactの核心概念であるコンポーネント、Props、Stateを学習し、実際の開発に必要な必須例題を扱います。

Section 2 - コンポーネント深層学習

関数型コンポーネントの生成と制御、繰り返し文の活用、PropsとStateを通じたデータ管理方法を詳しく学びます。また、コンポーネント間の通信方式とコンテナ/プレゼンテーションコンポーネントパターンを理解し、実際のカウンターコンポーネント分離練習を通じてコンポーネント設計能力を向上させます。

Section 3 - 単一ページTodoアプリケーションの実装

Reactの配列処理機能(スプレッド演算子、filter)を活用してTodoリストを管理するアプリケーションを開発します。Todo項目の登録、削除、修正機能を実装し、画面デザインを改善してユーザーフレンドリーなUIを完成させます。このセクションでは、コンポーネントベース開発の実質的な適用を経験します。

Section 4 - 外部API連携Todoアプリケーション

非同期通信の概念を理解し、Fetch APIを使用して外部RESTful APIと連携する方法を学習します。動的ルーティング処理、Linkコンポーネントの活用、POST、PUT、DELETEメソッドを利用したデータCRUD作業の実装を通じて、リアルタイムデータ処理能力を強化します。

Section 5 - Zustandを活用したグローバル状態管理

軽量グローバル状態管理ライブラリであるZustandを使用して、ログイン状態のようなグローバルデータを効率的に管理する方法を学びます。ストアの作成、Persist機能を活用したローカルストレージ連動、依存性のないコンポーネント構造設計、およびログアウト機能を実装して、アプリケーションの状態管理能力を高めます。

ReactとNext.js、どこから始めればいいか途方に暮れていませんか?
この講座はまさにこのような方々のために作りました。


✔️ ReactとNext.jsを初めて学ぶ入門者

  • 理論だけでは物足りなかったReactの基本概念をNext.jsと一緒にしっかり固めたい方

  • 最小限の知識で素早くReactプロジェクトを始めたい方

  • コンポーネント構造、Props、Stateなど、核心原理を簡単かつ明確に学びたい方

✔️ 実務中心のWeb開発経験を積みたい学習者

  • 実務でよく使われる必須例題だけを集めて集中的に学習したい方

  • Todoリスト、ログインなど実際のサービスで必要な機能を直接実装してみたい方

  • APIの連携とZustandを活用した状態管理まで経験したい方

✔️ フロントエンド開発者を目指したい方

  • Next.jsのルーティングシステムを理解し、動的ルート設定を扱えるようになる方

  • コンポーネントの分離、再利用などクリーンコードの作成のための設計原則を学ぶ方

  • Tailwind CSSを活用して魅力的なUIを直接デザインし、実装する経験を積む方


もうReact学習の難しさで迷わないでください。
この講座を通じてNext.jsと共に確かな実力を備えたフロントエンド開発者として成長できます。

受講前の参考事項


実習環境

  • オペレーティングシステム:Windows、macOS、Linuxすべて対応可能です。

  • 必須インストールプログラム:Node.js(最新LTSバージョン推奨)、VS Codeまたは他のコードエディタ

  • 推奨スペック:スムーズな開発環境のために、SSDストレージおよび8GB以上のRAMを推奨します。

事前知識と注意事項

  • JavaScriptの基本文法(変数、関数、オブジェクト、配列)に対する理解が必要です。

  • ウェブ開発の基礎知識があれば、学習に役立ちます。

  • Reactフレームワークの経験がなくても始められます。

  • Next.js 15バージョンとApp Routerを基準に学習します。

学習資料

  • 강의 슬라이드 PDF 파일이 제공될 예정입니다.

  • 実習例題を通じて直接コードを作成し、実行することができます。

  • JSONPlaceholderを活用したAPI連携実習が含まれます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを初めてやってみたい人

  • Next.jsを初めて始める人

  • Reactの概念を素早く学習したい人

  • フロントエンドとバックエンドの構造と役割を知りたい人

  • Zustandを React に適用したい人

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

  • JavaScript基礎知識(変数、制御文、配列、関数)

こんにちは
です。

2,210

受講生

161

受講レビュー

287

回答

4.8

講座評価

5

講座

「구멍가게코딩단(クモンガゲコーディング団)」は、2015年から開発関連職種の人々の集いのために作られたコミュニティです。

講義の進行は、現在「クモンガゲコーディング団(小さな店のコーディング団)」を運営しているクッキーマネージャーが担当しています。

 

2000年から開発を始め、ベンチャー企業、中小企業、大企業、フリーランスなどでの開発経験があります。

2010年代からは、主に企業向けの講義やコンサルティングを主な業務としています。

ネイバーカフェ

 

主な著書

コードで学ぶSpring Webプロジェクト

コードで学ぶSpring Boot

コードで学ぶReact

RESTful API サーバーの実装

Spring 6 レガシープロジェクト

Java Web開発ワークブック

React Native イン・アクション(翻訳)

開発/講義

サムスンSDS開発チーム勤務

SK顧客幸福株式会社 勤務

KT / SK / ポスデータ / 教保生命 / 新世界 / アシアナ / 国民健康保険公団など、企業向け講義

カリキュラム

全体

37件 ∙ (8時間 6分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

9件

4.9

9件の受講レビュー

  • 123ddd님의 프로필 이미지
    123ddd

    受講レビュー 5

    平均評価 5.0

    5

    32% 受講後に作成

    • c01님의 프로필 이미지
      c01

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      講義を聞いた後、React.jsにある程度自信がつきました。 (), {}, state, set, アロー関数, フックの基本機能...などをなぜ使うのかわかるような気がします。

      • codingbeer님의 프로필 이미지
        codingbeer

        受講レビュー 11

        平均評価 4.2

        修正済み

        5

        100% 受講後に作成

        シンプルな核心概念講義、良いですね。

        • zk202308a5410
          知識共有者

          お久しぶりです。😭😭

      • moomgyucha8486님의 프로필 이미지
        moomgyucha8486

        受講レビュー 2

        平均評価 5.0

        5

        32% 受講後に作成

        • wtkim님의 프로필 이미지
          wtkim

          受講レビュー 28

          平均評価 4.9

          5

          32% 受講後に作成

          ¥2,442

          zk202308a5410の他の講座

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

          似ている講座

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