강의

멘토링

커뮤니티

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
Next.js
React
React
TailwindCSS
TailwindCSS
zustand
zustand
Clone Coding
Clone Coding
실습 중심
실습 중심
클론코딩
클론코딩
Next.js
Next.js
React
React
TailwindCSS
TailwindCSS
zustand
zustand
Clone Coding
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

こんにちは
です。

4,049

受講生

170

受講レビュー

94

回答

4.8

講座評価

5

講座

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

カリキュラム

全体

80件 ∙ (7時間 6分)

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

受講レビュー

全体

38件

4.4

38件の受講レビュー

  • hjux님의 프로필 이미지
    hjux

    受講レビュー 21

    平均評価 5.0

    5

    100% 受講後に作成

    Next.jsとTailwindCSS、Shadcnを活用してレスポンシブコンポーネントの実装を実習できて、とても役に立ちました。

    • dodocoding
      知識共有者

      受講ありがとうございます。より良い講義でお会いしましょう。!!

  • kotlinjava님의 프로필 이미지
    kotlinjava

    受講レビュー 22

    平均評価 5.0

    5

    100% 受講後に作成

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

    • smc91191589님의 프로필 이미지
      smc91191589

      受講レビュー 13

      平均評価 5.0

      5

      100% 受講後に作成

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

      • dodocoding
        知識共有者

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

    • ghee3218844님의 프로필 이미지
      ghee3218844

      受講レビュー 2

      平均評価 5.0

      5

      11% 受講後に作成

      • agw45365001님의 프로필 이미지
        agw45365001

        受講レビュー 5

        平均評価 5.0

        5

        33% 受講後に作成

        内容はとても良いです。ただテンポが速くてnext ある程度知って聞かなければ理解できますよ。

        • dodocoding
          知識共有者

          受講評ありがとうございます。 next.jsに関連する内容や難しい内容がありましたら、たくさん質問してください。講義内容の伝達が足りない部分があるかもしれないので、気をつけて回答させていただきます。

      期間限定セール、あと04:20:57日で終了

      ¥32,340

      30%

      ¥5,842

      dodocodingの他の講座

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

      似ている講座

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