강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

一口サイズで切って食べる実践プロジェクト - SNS編

いよいよ実践に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証・認可、無限スクロール、画像アップロード、いいね、無限ネストコメント、ダークモードなどの機能を実装します。この過程で、ZustandとTanstack Queryを利用したサーバーおよびグローバル状態管理の手法も学んでいく予定です。

難易度 中級以上

受講期間 無制限

  • winterlood
  • hyobin
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript

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

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

5.0

5.0

민경언

31% 受講後に作成

Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。

5.0

kaeuhy

10% 受講後に作成

講義カリキュラムを見て、本当に充実していると思いました。 これより完璧なフロントエンドのための講義は存在しません。 フロントエンド = 이정환

5.0

챙준

100% 受講後に作成

講義を始める前に聞いたLive Sessionで良いインスピレーションを受け、プロジェクトを真似しながらより感覚をよく身につけることができたと思います。Tanstack Queryを活用したサーバー状態管理の有用性についてもう少し深く考えることができ、私が思うに私の主力フレームワークであるTypeScript、ReactとZustand、Supabaseまで幅広く学ぶことができました。 誰でもサイドプロジェクトについて悩みがある時、この講義に触れた後は本当に良いスタートになると思います。強くお勧めします!

受講後に得られること

  • React.js + TypeScript + Supabaseを利用して、実務レベルのSNSプロジェクトを作成します。

  • 認証&認可、無限スクロール、画像アップロード、いいね、無限ネストコメント、ダークモードなどの機能を作ってみます。

  • ZustandとTanstack Queryを利用したサーバーおよびグローバル状態管理の手法について見ていきます。


> 一口チャレンジ8期募集通知を申し込むhttps://link.onebitefe.com/r/e3mm1n

로드맵-강의상세

画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/3fr3f6

シリーズ講義リンク
> 一口サイズでかじり取るReact :https://inf.run/v3XAj
一口サイズでかじり取るTypeScript : https://inf.run/FpLm4
一口サイズでかじり取るNext.js : https://inf.run/v3XAj

React.js + TypeScriptを通じて

実務レベルのSNSサービスを作ってみます。

チュートリアルばかり繰り返しているなら、次は実践プロジェクトに挑戦する番です。

本講義では React.js + TypeScript + Supabaseを活用して

実際のユーザーに提供可能なレベルの実務級SNSサービスを、最初から最後まで作ってみます。

デモサイト : https://demo-onebite-log.vercel.app/

> テストアカウントのメールアドレス:test@onebitefe.com

> テストアカウントのパスワード:123456


単なるUIの実装ではなく、

実際のサービスを構成する核となる機能を自ら作ってみます。

この講義は、単なるUIやCRUDの実装だけを教えるチュートリアル講義ではありません。

認証/認可、画像アップロード、無限スクロール、いいね、無限階層コメント、ダークモードなど

今日の実サービスで使用されている核心的な機能を、自ら設計し実装してみます。


⚙️ ユーザー認証 & 認可

  • メールでの会員登録/ログイン

  • ソーシャルログイン(GitHub)

  • パスワードを忘れた場合

  • セッション管理

  • RLSを利用した認可

⚙️ フィードの無限スクロール

  • useInfiniteQueryを利用したフィードの無限スクロール管理

  • キャッシュデータの管理


⚙️ 画像添付

  • Supabase Storageを利用した画像アップロードおよび管理

  • ポスト、プロフィール画像のアップロード機能を実装


⚙️ いいね

  • 並行性問題の解決 (RPC)

  • キャッシュ操作による素早い結果反映


⚙️ 無限階層コメント

  • 無限に入れ子になるコメント機能の実装

  • 再帰的コンポーネントレンダリング


⚙️ テーマ変更機能

  • システム、ダーク、ライトテーマを提供

  • Persistを利用したテーマの維持およびちらつき防止機能の実装




より強力なReactアプリのためのツールを紹介します

TailwindCSS + Zustand + Tanstack Query

複雑な機能をうまく扱うためには、私たちのツールも共にアップグレードされなければなりません。

本講義では、以下に案内する強力なツールを一つずつ習得し、

実際のプロジェクトに積極的に活用していく予定です。


Tailwind CSS


  • CSSスタイリングをより便利にするためのツール

  • スタイリングのための別途のCSSファイルが不要

  • https://tailwindcss.com/


Shadcn/ui


  • Tailwind CSSベースのデザインライブラリ

  • 高品質なコンポーネントを提供(例:Input、Button、Dialogなど)

  • https://ui.shadcn.com/

Zustand


Tanstack Query


  • サーバー状態管理ライブラリ

  • 非同期データフェッチのローディング、エラー処理をサポートします。


  • https://tanstack.com/query/latest


ただ書き写すだけのクローンコーディングではありません。

機能の背景や構造まで、概念の説明も完璧に盛り込みました。

この講義は、決して単にコードを書き写して終わるような講義ではありません。

なぜそのように実装するのか、どのような流れで構成されるのか

直接理解し、自分のものにできるよう、理論の説明もたっぷりと盛り込みました。

講義の受講対象のご案内

本講義はReact.jsとTypeScriptの基礎知識がある方を対象に制作されました。

もし上記の技術に慣れていない場合は、以下の事前講義を先に受講することをお勧めします。

「一口サイズ」シリーズの5つの原則

⚖ 原則 1. 直感的で豊富な視覚資料

同じ料理であっても見た目が良い方がより美味しく感じられるように、
同じ概念の説明であっても、より直感的で魅力的な視覚資料の方がより理解しやすいだろうと考えています。

したがって、アニメーションを含む直感的な視覚資料を作るために、絶えず努力しました。

⚖ 原則 2. 親切さ

新しい用語や概念が登場した際、適当に説明して流したり、すでに知っているだろうと決めつけたりはしませんでした。講義を聴きながら別途ググる必要がないよう、最大限努力しました。

⚖ 原則 3. 蓋然性

受講生の皆さんの興味を維持するために、講義の中で新しい内容が登場する際、常に前の内容と関連があるか、急に流れが途切れるような感じを与えないか、常に蓋然性を考えながら講義を作成しました。

⚖ 原則4. 良い発声と滑舌

長い時間私の声を聞いていただくことになるため、良い発声と滑舌のために常に努力しています。
そのために、2倍速で再生してもすべて聞き取れるように講義を制作しました。

一度聴いてみてください! 2倍速再生リンク

⚖ 原則 5. コミュニケーション

受講生専用コミュニティに集まり、お互いに知識やニュースを共有しながら成長します。

講師紹介


イ・ジョンファン | Winterlood

何でも分かりやすく、楽しく説明する方法があると信じている
フロントエンドエンジニア & 教育者

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 「一口シリーズ」の受講生の皆様(React.js + TypeScript 受講完了者)

  • React.jsとTypeScriptの知識をすでにお持ちの方

  • チュートリアルレベルを脱して、実践プロジェクトに挑戦してみたい方へ

  • 質疑応答が月〜金に最低1回以上、毎日行われる講義をお探しの方

  • 知識共有者が自ら運営する、受講生コミュニティが活発な講義をお探しの方

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

  • React.js 基礎 (「一口リ액트(한입 리액트)」講座受講生レベル)

  • TypeScriptの基礎 (「一口TypeScript」講座受講生レベル)

こんにちは
です。

37,205

受講生

2,604

受講レビュー

1,600

回答

4.9

講座評価

13

講座

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

カリキュラム

全体

88件 ∙ (22時間 9分)

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

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

受講レビュー

全体

88件

5.0

88件の受講レビュー

  • nataek2159님의 프로필 이미지
    nataek2159

    受講レビュー 15

    平均評価 3.3

    5

    31% 受講後に作成

    Inflernでかなり多くの有料講座を受講しましたが、あらゆる面でイ・ジョンファンさんの講座は最高です。 そのため、イ・ジョンファンさんの講座はすべて受講しました。今回のReact SNS講座も良いですね。 イ・ジョンファンさんの講座は... 1. 講座の準備をしてきたことが聞いていて感じられます。 => 他の講師の動画を見ると、ほとんどの場合スクリプトの準備などはしていません。 ほとんどがタイトルレベルの内容だけを準備しているようです。そのため動画を見ると、つっかえたり、同じことを繰り返したり... 例題が結果と違って出てきたり...ある場合は、あまりにも唾を飲み込む音を多く出すので不快で、その後聞かなかったこともあります。 しかし、イ・ジョンファンさんの講座は、撮影前にスクリプトを徹底的に準備していることが見ていて感じられます。 だから重複もなく、進行がスムーズです。非常に満足で、本当にお金を払って聞く価値があると感じられます。 2. 講座環境の準備をしっかりしています。 => 他の講師の動画と違って、最初から最後まで音響が一定です。 イ・ジョンファンさんの講座を見ると、ほとんど動かずに撮影しています。 動くと音声が均一な高低で録音されないため、そうしているようです。 3. 講座内容の品質が良いです。 => 他の講師の動画を見ると、ほとんどがPPTにただタイピングして見せています。 あまり丁寧だという感じがしません。有料で見る立場として、少しお金がもったいないという感じがすることもあります。 イ・ジョンファンさんの講座は、PPTで見せる画面がありません。すべてアニメーション化された画面で説明をします。 そのため理解が早くなります。 しかし、イ・ジョンファンさんの講座を見ていると...問題があります。 他の講師の有料動画のプレビューを見ると、品質が気に入らず購入をためらってしまいます... 他の講師は、イ・ジョンファンさんの講座を見てベンチマークすべきです。 Inflearn側も、イ・ジョンファンさんの講座をベンチマークして、これを基準として有料で運営しようとする講師たちに従うことを要請すべきです。 お金を払って見るのに、より良い品質をサービスすべきなのは当然のことではないでしょうか? だから...イ・ジョンファンさんの講座だけを講座と呼びます。 他の講師の動画はただの動画と呼びます...講座と呼ぶには不十分です。

    • cjswodmsgus5064님의 프로필 이미지
      cjswodmsgus5064

      受講レビュー 2

      平均評価 5.0

      修正済み

      5

      10% 受講後に作成

      講義カリキュラムを見て、本当に充実していると思いました。 これより完璧なフロントエンドのための講義は存在しません。 フロントエンド = 이정환

      • jjmullan님의 프로필 이미지
        jjmullan

        受講レビュー 9

        平均評価 5.0

        5

        100% 受講後に作成

        講義を始める前に聞いたLive Sessionで良いインスピレーションを受け、プロジェクトを真似しながらより感覚をよく身につけることができたと思います。Tanstack Queryを活用したサーバー状態管理の有用性についてもう少し深く考えることができ、私が思うに私の主力フレームワークであるTypeScript、ReactとZustand、Supabaseまで幅広く学ぶことができました。 誰でもサイドプロジェクトについて悩みがある時、この講義に触れた後は本当に良いスタートになると思います。強くお勧めします!

        • hyezzm1200님의 프로필 이미지
          hyezzm1200

          受講レビュー 10

          平均評価 5.0

          5

          67% 受講後に作成

          自分がこんなものを作れるのかと思っていたことを、一つ一つ簡単で詳しい説明と共に作っていくうちに、だんだん実装されていくのが不思議です😊😊 この講義一つだけを繰り返し聞けば、フロントエンドとバックエンドの流れと生態環境をしっかり理解できそうです。前の講義も全部見ましたが、今後も良い講義をお願いします〜

          • dudals010126님의 프로필 이미지
            dudals010126

            受講レビュー 4

            平均評価 5.0

            5

            56% 受講後に作成

            まだ完走はしていませんが、受講レビューを残します。 この講義を通してポートフォリオを作らなきゃ〜という考えよりも、この講義を通してsupabaseとリアクトを使ったプロジェクトのフローはどのように流れるのか?という考えで全体的な流れを見ようとする思いで受講されるとより良いと思います。 講義の質はとても良いです。この講義の前にsupabase講義を聞きましたが、その講義とは違って本当に次元が違うほど詳しく説明してくださいます。もちろんこの講義だけ聞いてsupabaseはこういうものなんだ〜というよりは、この講義を通してとても基本的な概念の枠組みを固められた後に、supabaseの公式ドキュメントを通してもっと勉強されると、以前よりもずっと理解がよくできてより良いです。 もちろんイ・ジョンファンさんが説明をよくしてくださり、視覚資料でより簡単に説明してくださるので可能なことのようです。そのため、ぜひこの講義を聞かれることをお勧めします。 そしてzustandとリアクトクエリ講義もこの講義に含まれているのですが、とても良いです...理解がよくできますし、この講義を通して後で一人でもっと勉強する時に多くの助けになるようです。

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

            ¥33

            23%

            ¥6,809

            winterloodの他の講座

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

            似ている講座

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