강의

멘토링

커뮤니티

BEST
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講座受講者レベル)

こんにちは
です。

35,707

受講生

2,360

受講レビュー

1,528

回答

4.9

講座評価

13

講座

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

안녕하세요 🙇‍♂

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

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

 

カリキュラム

全体

88件 ∙ (22時間 9分)

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

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

受講レビュー

全体

64件

5.0

64件の受講レビュー

  • 민경언님의 프로필 이미지
    민경언

    受講レビュー 15

    平均評価 3.3

    5

    31% 受講後に作成

    인프런에서 꽤 많은 유료 강의를 들었는데..모든 면에서 이정환님의 강의는 최고 입니다. 그래서 이정환님의 강의는 모두 들었습니다. 이번 리액트 SNS 강의도 좋으네요.. 이정환님의 강의는... 1. 강의 준비를 해온 것이 들으면서 느껴집니다. => 다른 강사들의 영상을 보면 거의 대부분 스크립트 준비 같은 건 안합니다. 대부분 제목 수준의 내용만 준비 하는 것 같습니다. 그러다 보니 영상을 보면 버벅 거리고, 한 말 또 하고.. 예제가 결과와 다르게 나오고..어떤 경우는 하도 침을 꼴깍 넘기는 소리를 너무 많이 내서 더러워서 이후로 듣지 않은 것도 있습니다. 그런데 이정환님의 강의는 촬영 전에 스크립트를 철저히 준비 하는 것이 보다 보면 느껴집니다. 그러니까 중언도 없고, 진행이 매끄럽습니다. 매우 만족 스럽고, 정말 돈을 내고 들을 만 하다고 느껴 집니다. 2. 강의 환경 준비를 잘 합니다. => 다른 강사들의 영상과 다르게 처음 부터 끝까지 음향이 일정 합니다. 이정환님의 강의를 보면 거의 움직이지 않고 촬영 합니다. 움직이면 음성이 고른 높낮이로 녹음이 되지 않기 때문에 그런 것 같습니다. 3. 강의 내용 품질이 좋습니다. => 다른 강사들의 영상을 보면 대부분 PPT에 그냥 타이핑 해서 보여줍니다. 별로 정성스럽다는 느낌이 들지 않습니다. 유료로 보는 입장에서 좀 돈이 아깝다는 느낌이 들기도 합니다. 이정환님의 강의는 PPT로 보여지는 화면이 없습니다. 모두 애니메이션화 된 화면으로 설명을 합니다. 그러다 보니 이해가 빠를 수 있습니다. 그런데 이정환 님의 강의를 보다 보니..문제가 있습니다. 다른 강사들의 유료 영상 미리보기를 보면 품질이 맘에 들지 않아 구매가 꺼려 집니다... 다른 강사들은 이정환님의 강의를 보고 벤치마킹 해야 합니다. 인프런 측에서도 이정환님의 강의를 벤치 마킹 해서 이를 기준으로 삼고 유료로 운영 하고자 하는 강사들에게 따를 것을 요청 해야 합니다. 돈 내고 보는 건데 보다 좋은 품질을 서비스 해야 하는 것이 당연한 것 아닐까요? 그래서..이정환님의 강의만 강의라고 부릅니다. 다른 강사들의 영상은 그냥 영상 이라고 부릅니다..강의라고 부르기엔 부족 합니다.

    • kaeuhy님의 프로필 이미지
      kaeuhy

      受講レビュー 1

      平均評価 5.0

      修正済み

      5

      10% 受講後に作成

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

      • 챙준님의 프로필 이미지
        챙준

        受講レビュー 9

        平均評価 5.0

        5

        100% 受講後に作成

        강의를 시작하기 전에 들었던 Live Session 에서 좋은 영감을 받았고, 프로젝트를 따라하면서 더 감을 잘 익힐 수 있었던 것 같아요. Tanstack Query 를 활용한 서버 상태 관리의 유용함에 대해 좀더 깊게 생각할 수 있었고, 제가 생각했을 때 저의 주력 프레임워크인 TypeScript, React 와 Zustand, Supabase 까지 폭넓게 배울 수 있었습니다. 누구든 사이드 프로젝트에 대한 고민이 있을 때, 이 강의를 접하고 나면 정말 좋은 시작이 될 것 같아요. 강력 추천합니다!

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

          受講レビュー 8

          平均評価 5.0

          5

          67% 受講後に作成

          내가 이런걸 만들수있을까 싶던것을 하나하나 쉽고 자세한 설명과 함께 만들어가다보니 점점 구현되고있는게 신기합니다 ㅎㅎ 이강의 하나만 반복해서 들으면 프론트와 백엔드의 흐름과 생태환경을 제대로 이해할수 있을듯 싶습니다. 이전강의도 다 챙겨봤는데, 앞으로도 좋은 강의 부탁드립니다~

          • Ay Caramba님의 프로필 이미지
            Ay Caramba

            受講レビュー 4

            平均評価 5.0

            5

            56% 受講後に作成

            아직 완강하진 않았지만 수강평 남깁니다. 이 강의를 통해서 포트폴리오를 만들어야지~ 라는 생각보다 이 강의를 통해서 supabase와 리액트를 사용한 프로젝트의 플로우는 어떻게 흘러갈까? 라는 생각으로 전체적인 흐름을 보려는 생각으로 수강하시면 더 좋을 것 같습니다. 강의 질은 엄청 좋습니다. 이 강의 전에 supabase강의를 들었지만 그 강의와는 다르게 정말 차원이 다르게 자세하게 설명해주십니다. 물론 이 강의만 듣고 supabase는 이렇구나~ 보다는 이 강의를 통해서 아주 기본적인 개념 틀을 잡으신 후에 supabase의 공식 문서를 통해 더 공부하시면 전보다 훨씬 이해가 잘되서 더 좋습니다. 물론 이정환님께서 설명을 잘해주시고, 시각자료로 더 쉽게 설명해주셔서 가능한 일인것 같습니다. 때문에 꼭 이 강의를 들으셨으면 좋겠습니다. 그리고 zustand와 리액트 쿼리 강의도 이 강의에 포함되어 있는데 엄청 좋습니다... 이해가 잘 되고요. 이 강의를 통해서 나중에 혼자 더 공부할때 도움이 많이 되는것 같습니다.

            ¥6,867

            winterloodの他の講座

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

            似ている講座

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