강의

멘토링

로드맵

Programming

/

Front-end

基礎から学ぶNext YTMusicクローンコーディング(with next.js 14、UIマスター)

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand で YoutubeMusic ウェブサイトをクローンします。 NextJS基礎からUI重点でWebフロント基礎をマスターすることができます。

  • dodocoding
실습 중심
클론코딩
Next.js
React
TailwindCSS
zustand
Clone Coding

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

こんなことが学べます

  • Next.js App Router

  • (理論) React Suspense ( Streaming, Progressive Hydration )

  • (理論)Next.jsレンダリング方式とCSR、SSR、Hydration

  • Next.js RSC、RCC、use client

  • TailwindCSS, RadixUI, Shadcn

  • YT Music Player CloneCoding

  • Zustand状態管理

  • Typescript タイピングの基礎

  • レスポンシブUIの開発方法

最近、FE開発者に求められるというNextJS技術スタック!
NextJS実務に必要な部分だけがぴったりですよ🍭

リアクトの勉強後、NextJSを公式文書だけで見てプロジェクトを進めるのは難しいです。
だからYoutubeMusic Cloneコーディングを介して迅速かつ簡単に、
たった一日で! NextJSをうまく使えるように講義をしました。
独自のNextJSプロジェクトを進行するとき、このレッスンはベストベースになることができます。

この講義の特徴

📌 講義手書きノートガイド各章ごとにGoal、復習ポイント、さらに学ぶ(公式文書、概念など)

📌 講義チェックポイント提供:コードをたどらなくても大丈夫です!チャプタースターブランチがあります。

📌理論10%実践90% :最も難しいレンダリング、サーバーコンポーネント、hydrationの概念について説明します。

📌 ポートフォリオ: クローンコーディングを通じて結果を得ることができます。

こんな方におすすめです

ReactからNextへ
拡張したい!

Reactは扱うと思いますが、
Nextで詰まったら、
この講義はぴったりです!

Next.jsプロジェクト
作りたい!

Next.jsに基づいて
すぐにプロジェクトをしなければならないなら、
良いアシスタントになります。

クローンコーディングで簡単
楽しく体得してください!

適切なコードベースに基づいて
独自のプロジェクトに拡張してみてください!

受講後は

  • どのサイトを見ても、Next.jsでクローンコーディングできます。 😲

  • Next.js AppRouterからプロジェクトを進めることができます。

  • Zustandでグローバル状態管理ができます。

  • さまざまな方法のレンダリングの理解とPageRouter、React CSR、SSR、Hydrationがわかります。

  • Vercelを通して私が作ったプロジェクトを他の人に見せることができます。

  • TailwindCSS + Radix UI + Shadcnの組み合わせにより、誰よりも迅速にUI開発が可能です。


こんな内容を学びます 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

アプリルーターでプロジェクト全体の構造を把握する方法を学びます。そして、いつサーバーコンポーネントを使用するのか、なぜサーバーコンポーネントが必要なのか理論を学びます。 FEレンダリング変遷史を通じてバニラJS > React > NextJS PageRouter > AppRouteの歴史を学びます。

レスポンシブデザイン+インタラクティブウェブ

モバイルおよびタブレット画面に対応できる戦略を紹介します。モバイル画面だけに見えるDrawerなどUI Componentやスタイリングでディテールを活かしました。今後のWebビューで包んでアプリを制作してみてはいかがでしょうか?

Music Player with Zustand

Zustandグローバルステータス管理ツールを使用してプレーヤーを学びます。ユーザーエクスペリエンスを向上させるためのディテールなUIスキルを盛り込んだ。 Zustandで任意のページで音楽を再生するようにイベントを連動します。

UI Components & Typescript

さまざまなUIをコンポーネントにまとめます。そして、必要に応じてタイプスクリプトを適用して、プロジェクトで発生するエラーを事前に防ぐ方法を学びます。

受講前の注意

練習環境

  • Node.js、VS Code、Githubを使用します。


学習資料

  • Githubとチャプター別CheckPoint: Link

  • 手書きノートとワークブックを提供! : Link

  • LiveDemo:Link

選手の知識と注意事項

  • 基本的なHTML、CSS、Reactの知識

  • TailwindCSSでスタイリングしています。 (+要約講義があります。😀

  • (*最初に私はTailwindCSSを嫌いました。しかし最初にランニングカーブ(1時間ほど)開発経験の向上と開発速度が圧倒的に速くなりました。!本当に後悔しないでしょう。)

知識共有者の
他の講義が気になったら?

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsでプロジェクトを開始したい方

  • Next.jsに基づいてパブリッシングをマスターしたい人

  • コンポーネントライブラリを通じて迅速に開発したい方

  • Next.jsテクノロジスタックを増やすFE開発者

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

  • 基礎レベルのHTML、CSS、React

こんにちは
です。

3,826

受講生

155

受講レビュー

88

回答

4.8

講座評価

5

講座

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

カリキュラム

全体

80件 ∙ (7時間 6分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

37件

4.4

37件の受講レビュー

  • kotlinjava님의 프로필 이미지
    kotlinjava

    受講レビュー 21

    平均評価 5.0

    5

    100% 受講後に作成

    Next.jsでのキャッシュ処理や最適化のようなパフォーマンス関連の内容は多いですが、個人的にはUIの勉強が必要でした。HTMLやCSSの講座を受ける気にはなれなかったのですが、この講座があったので受講しました。先生のレベルが段違いですね。笑 でも、言われた通りにコードを書いているうちに身についたのか、実力が上がったように感じました。shadcnやTailwind CSSを学ぶのに最適でした。パート2が出るのを楽しみにしています。

    • zmlee128891님의 프로필 이미지
      zmlee128891

      受講レビュー 2

      平均評価 4.0

      3

      100% 受講後に作成

      とても良かったです。ただ、最後の部分が急いで終わってしまったので、少し残念です。

      • dodocoding
        知識共有者

        受講していただきありがとうございます。より体系的にお伝えするべきでしたが、より良い講義でお会いしましょう。

    • smc91191589님의 프로필 이미지
      smc91191589

      受講レビュー 13

      平均評価 5.0

      5

      100% 受講後に作成

      nextjs講義の中で最高だと思います〜 良い講義はよく聞きました〜

      • dodocoding
        知識共有者

        100%受講ありがとうございます。よりアップグレードされたレッスンで今後探してみましょう。 ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      受講レビュー 2

      平均評価 5.0

      5

      11% 受講後に作成

      • sthwin님의 프로필 이미지
        sthwin

        受講レビュー 12

        平均評価 4.3

        3

        100% 受講後に作成

        リアクトとtailwind css復習次元で講義を聞くようになりました。 中間の中間の説明が多少不足しているという感じを受ける部分がありましたが、なんと言うのは難しいですね。 ただ個人的にタイプスクリプトで統一して進めたらどうかと思う部分も見えました。 それでもクローンコーディングしながら多くの役に立ちました。

        • dodocoding
          知識共有者

          受講評 ありがとうございます。 !次に、より改善された講義でお会いしましょう。足りない講義を聞いてくれてありがとう。その後も質問がありましたら最後まで回答させていただきます。

      ¥5,631

      dodocodingの他の講座

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

      似ている講座

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