강의

멘토링

커뮤니티

NEW
Programming

/

Web Development

一口サイズで食べやすい実戦プロジェクト - SNS編

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

  • winterlood
  • hyobin
이론 실습 모두
실전프로젝트
한입시리즈
react.js
supabase
zustand
react-query
React
TypeScript

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

こんなことが学べます

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

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

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

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


  • 小さくて軽量なグローバル状態管理ライブラリ

  • 既存のReduxを押し退けている新興の強者

  • https://zustand-demo.pmnd.rs/

Tanstack Query



ただ真似するだけのクローンコーディングではありません。

機能の背景と構造まで、概念説明も完璧に含まれています。

この講義は決して単純にコードを真似して入力するだけで終わる講義ではありません。

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

直接理解して消化できるよう、理論説明もたっぷり盛り込みました。

講義受講対象者のご案内

本講義はReact.jsとTypeScriptの基礎知識をお持ちの方を対象に制作されました

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

一口シリーズの5つの原則

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

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

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

⚖ 原則 2. 親切さ

新しい用語や概念が登場する際に、適当に説明して済ませたり、既にご存知だろうと勝手に判断したりしませんでした。講義を聞きながら別途Googleで検索する必要がないよう、最大限努力しました。

⚖ 原則3. 蓋然性

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

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

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

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

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

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

知識共有者紹介


이정환 | Winterlood

何でも簡単で楽しく説明する方法があると信じている
フロントエンド開発者&教育者

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

  • チュートリアルレベルから脱却して実戦プロジェクトに挑戦してみたい方々

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

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

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

  • React.js基礎(一口サイズのReact講義受講者レベル)

  • TypeScript基礎(一口サイズTypeScript講座受講者レベル)

こんにちは
です。

33,780

受講生

2,061

受講レビュー

1,427

回答

4.9

講座評価

8

講座

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

안녕하세요 🙇‍♂

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

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

 

カリキュラム

全体

88件 ∙ (22時間 13分)

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

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

受講レビュー

全体

9件

5.0

9件の受講レビュー

  • kaeuhy님의 프로필 이미지
    kaeuhy

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    10% 受講後に作成

    강의 커리큘럼을 보며, 참 알차다고 생각했습니다. 이보다 더 완벽한 프론트엔드를 위한 강의는 존재하지 않습니다. 프론트엔드 = 이정환

    • ywc0008님의 프로필 이미지
      ywc0008

      受講レビュー 3

      平均評価 5.0

      5

      60% 受講後に作成

      오래 기다린 보람이 있네요 알찹니다 현업에서 supabase를 썼었는데 한번 돌아보는 계기가 됐네요

      • 이헨님의 프로필 이미지
        이헨

        受講レビュー 3

        平均評価 5.0

        5

        31% 受講後に作成

        그동안 프로젝트에서 zustand와 tanstack query를 그냥 사용하고 있었는데, 강의를 들으면서 왜 써야하는지 이해했습니다. 또한 몰라서 사용하지 못했던 부분, 잘못 사용하고 있었던 것을 다시 배워갈 수 있어서 유익했습니다. 자세하게 설명해주셔서 감사합니다. 이해하면서 차근차근 진행하니 재밌어요 !!

        • 프론트엔드마스터님의 프로필 이미지
          프론트엔드마스터

          受講レビュー 2

          平均評価 5.0

          5

          31% 受講後に作成

          정환님 항상 감사합니다. 강의 들을떄마다 쉽게쉽게 알려주셔서 정말 공부에 도움이 많이됩니다. 강의를 들으면서 제 실력이 한층 더 향상 된다는게 느껴집니다. 항상 건강 조심하시고 훌륭한 강의 만들어주셔서 너무 감사드립니다.

          • 피카님의 프로필 이미지
            피카

            受講レビュー 14

            平均評価 4.9

            5

            6% 受講後に作成

            다른 강의도 모두 수강 하였는데 이번 강의도 너무 기대됩니다 ! 강의 구성만 봐도 너무 알찬 구성이네요 ! 강의 듣고 나서 다시 수강평 작성하도록 하겠습니다.

            期間限定セール

            ¥35,750

            35%

            ¥6,807

            winterloodの他の講座

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

            似ている講座

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