강의

멘토링

커뮤니티

Programming

/

Front-end

Next.jsでReactを始める

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

難易度 入門

受講期間 無制限

  • zk202308a5410
react19
react19
next.js15
next.js15
신입프론트엔드
신입프론트엔드
웹개발
웹개발
네카라쿠배
네카라쿠배
JavaScript
JavaScript
React
React
Web Application
Web Application
Ajax
Ajax
react19
react19
next.js15
next.js15
신입프론트엔드
신입프론트엔드
웹개발
웹개발
네카라쿠배
네카라쿠배
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,209

受講生

161

受講レビュー

287

回答

4.8

講座評価

5

講座

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

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,429

          zk202308a5410の他の講座

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

          似ている講座

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