강의

멘토링

커뮤니티

Programming

/

Front-end

Watch Me Code: React x TypescriptでSlackをクローンする

Slackクローンアプリライブコーディングで見るフロントエンド開発の大勢の組み合わせ!

難易度 初級

受講期間 無制限

  • sungeun6kim1465
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript
Clone Coding
Clone Coding
React
React
TypeScript
TypeScript

受講後に得られること

  • React x TSベースプロジェクトの開発プロセス Overview

  • Webpackを含むフロントエンド開発環境設定ノウハウ

  • 各種プラグイン、Profilerなどを活用した最適化スキル

  • Webソケットを活用したリアルタイムチャット機能の実装

■本講義はリアルタイムライブで行われた授業の編集本で、
部分的に音声が不均一になることがあります。ご了承ください。

■完成本リンク(sleact.nodebird.com)は現在アクセスできませんが、
完成本のソースコードは講師様の羽毛で確認できます。

Curriculum


Day 1フロントエンド設定とプロジェクト構成
Lesson 1. フロントエンドセッティング - いつまでもCRAだけに頼ることはできない!

・開発環境とプロジェクト紹介
・フロントエンド設定Ⅰ:package.json、eslintrc、prettierrc、tsconfig.json
・フロントエンド設定Ⅱ:Webpack設定してサーバーに表示


Lesson 2.本格的なクローンコーディングを始める - すべてのサービスは会員登録から

・プロジェクトフォルダの設定とルータの適用
・会員登録ページの作成(ft. Styled Components)


Day 2会員登録、ログイン、DM機能の実装
Lesson 3. ライブラリ、プラグインを活用した最適化とAPI通信

・最適化のためのライブラリ、プラグインとカスタムフックを活用
(@loadable/component、fork-ts-checker-webpack-pluginなど)
· Axiosで会員登録を進める+ CORS問題解決のためのヒント
・会員登録ページを応用してログインページを仕上げる(ft.SWR)

Lesson 4. DM 機能の実装: App 構造を作成する

・DM関連構造の作成(+Channelと共有する機能はあらかじめ実装)
・DM送信(ft. Optimistic UI)
· DMをロードする+ Infinite Scrollingを適用するための設定


Day 3 WebSocketを活用したリアルタイム接続とプロジェクトの構築
Lesson 5. DM 機能の実装: Web ソケット接続と Profiler を活用した最適化

・Webソケット接続とDMメッセージウィンドウの実装
・Profilerを利用した最適化


Lesson 6. Infinite Scrolling + Channel 機能の実装

・リアルタイム接続確認+Infinite Scrollingの実装
・Channel(グループチャット)機能実装後のプロジェクトの仕上げ

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ReactプロジェクトにTSを導入したい人

  • セッティングから配布まで、フロントエンド開発の全過程を見てみたい方

  • ReactとTSの基礎を知っていますが、実際の開発に適用するのが難しい人

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

  • Reactの基礎

  • Typescriptの基本

こんにちは
です。

カリキュラム

全体

6件 ∙ (5時間 22分)

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

受講レビュー

全体

3件

3.7

3件の受講レビュー

  • william5081님의 프로필 이미지
    william5081

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    実務に役立つ知識をいただきます!

    • gkb10a0490님의 프로필 이미지
      gkb10a0490

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

      やはり信じてみます。頑張りました!ありがとうございます。

      • figma3280님의 프로필 이미지
        figma3280

        受講レビュー 1

        平均評価 1.0

        1

        100% 受講後に作成

        案内する方法のバージョンが合わない場合もありますが、それに対する案内が一つもなくて大変です。 フロントエンドのセッティング部分はかかりましたが、それ以降はあまり得られませんでしたね。 Slack クローンコーディング 他の講義をご覧いただくことをおすすめします。

        似ている講座

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