강의

멘토링

로드맵

BEST
Programming

/

Front-end

Slack Clone Coding [Real-time Chat with React]

Let's start serious React web development by creating it following the Slack service! From sign-up, login, room creation, to real-time chat!

(4.8) 95 reviews

2,878 learners

  • zerocho
Clone Coding
React
TypeScript
Webpack
Babel

Reviews from Early Learners

What you will learn!

  • React Web Development

  • Initial Front Setup (Without CRA)

  • SWR (Redux Alternative)

  • Emotion (Styled Component)

  • Socket.io Real Time Chat

A chat application created with my own hands,
Effectively, more simply! 💬

In this lecture?

Created following the Slack service
Let's start full-fledged React web development!
(Slack + React, aka Sleact!)

React web development,
How should I learn?

I heard that Redux isn't being used much these days...
I heard you're moving from JavaScript to TypeScript...
Is it true?

Have you heard this a lot? Sadly, it’s true. That’s why in this lecture, we’ve kicked out Redux and applied TypeScript instead of JavaScript. I’ll show you that you can develop React apps without Redux, and TypeScript isn’t as hard as you think!


I recommend this to these people!

Anyone who wants to learn how to develop web with React

For those who want to learn TypeScript again

Anyone who wants to implement the front-end part through clone coding


Zero second slack clone,
Front-end concerns completely resolved!

  • We will create services using TypeScript in line with the latest front-end trends . However, for those who are reluctant to use TypeScript, we have structured the lecture so that it can also be done using JavaScript. (JavaScript source code provided!)
  • We don't use Redux. Instead we use a library called SWR .
  • It implements all the functions required to implement a chat application, such as membership registration, login, chat room creation, user invitation, real-time chat, user mentions, and image upload.
  • Although not explained in the lecture, the backend source code is also provided.

Learn these skills.

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


Make it yourself!

Sign up, log in, workspace
Implementation of various workspace functions

Live Chat and Online Lists


#1
The source code

Provides.

https://github.com/zerocho/sleact (shortcut)

#2
Quickly answer the question
I will answer you.

The great thing about my course is the Q&A. If you have a question, I will answer it within a day.
Please study actively by freely asking questions about course-related content.
It will help you understand the content better!


Introducing the knowledge sharer .

Web Development Bestseller
author

Today's Pickup Co., Ltd.
CTO


Frequently Asked Questions 💬

Q. TypeScript, do I really need to know it?

Personally, I recommend learning TypeScript. The JavaScript ecosystem is gradually moving to TypeScript. However, this course provides JavaScript source code and shows you how to apply TypeScript in the video, so you can proceed with JavaScript alone. (Just change tsx, ts files to jsx, js, and delete the :type, <type> part. It's very simple.)

Q. Is SWR a verified library?

This is a library created by Vercel (formerly Zeit), the creator of Next.js and now.sh. You can trust and use it. It has 16,000 GitHub stars~

Q. Is there a reason why you didn't use CRA when setting it up?

I always make it a rule to set up manually instead of using CRA in my lectures. You need to know how to set up manually to understand the principles of CRA. I recommend using CRA after learning the principles.

Please note before taking the class!

  • Socket.io uses version 2. You need to install version 2.
  • The actual deployed service can be found at sleact.nodebird.com .
  • Frequently asked questions will be compiled into a FAQ and posted on the Inflearn blog.
  • If there is a problem with the video or content, please contact us and we will re-edit and upload it.
  • If there is something you are curious about implementing that is not in the lecture, I will make a bonus video if many people ask questions.

Player Knowledge & Linked Lectures

Essential Player Knowledge

Eight web games with React, Babel, and Webpack!

If you want to learn more about TypeScript!

The current trend! The world of TS, more stable than JS

Curious about other clone coding lessons?

A crazy 22 hour Twitter clone!

Recommended for
these people

Who is this course right for?

  • Those who want to learn React grammar and start web development

  • For those who want to follow a proper service instead of a simple tutorial

  • Those who want to learn development with increased stability using TypeScript

Need to know before starting?

  • HTML/CSS

  • JS Basic Knowledge

  • React Basic Grammar (Take a free course)

Hello
This is

65,730

Learners

1,621

Reviews

9,708

Answers

4.8

Rating

22

Courses

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

Curriculum

All

46 lectures ∙ (11hr 1min)

Published: 
Last updated: 

Reviews

All

95 reviews

4.8

95 reviews

  • dyonglove님의 프로필 이미지
    dyonglove

    Reviews 25

    Average Rating 4.2

    4

    100% enrolled

    手ごろな価格ではないのに、クラスを聴くのは難しいです。 YouTubeで無料で公開する講義なら十分に聞くことができるだろうが、整頓もされておらず、毎回公式文書にすべて出ていると言われるが…ありますか?定石があるので、誰もが一等級を受けるわけではないですね。定石に全部出ているので見ればいいと、ある部分は大まかに説明すれば聞く人によっては非常に難しくて混同して感じることもあります。バックエンドとフロントエンドをあえて分けるのも値上げする方便だと思います。二つの講義が自然に繋がらない感じですが、まずバックエンドを作ったのですがフロントに来てみると、講師様が作った部分にコンフィグ部分が私が作った側にはないとか。また、その前のレベルに該当するのはすでに知っている内容なので、忙しい会社員として、すべての講義に多時間を投資することはできません。まるで数学をめちゃくちゃうまくやっているわけではありませんが、毎回集合だけ見ているとは思えません。前講義より上位レベルの講義を撮っても独立した講義で作っていただきたいです。実は色々な講義を聞いて、私が感じる不便さを最大限過ぎないように伝えるためにたくさん悩んだので、この部分はタイプスクリプト講義を聞いて感じた感想が出てきたようですが。全講義を知らなかった私としてはあまり得られる感じではありませんでした。だから何度も聞いて把握しようとしているのですが、本業も忙しいのでそれほど講義を聞く負担が上がり、その不満が講師様に向けられて申し訳ない心もありますが、こういう意見もあることをご確認ください。最後の配布部分も、それでどのように実質的に配布し、目に見える結果を見ることができるのか気になることが解決されない感じです。それぞれスタイルが違うと思いますが、個人的に価格に比べて良い質の講義ではないと思います。しかし、私が今まで聞いたゼロチョの講義の中で、今回のフロントエンド講義が一番良かったと思います。前後の部分に音楽を取り出してくださったことも、受講生たちの意見を聞いて心配してくださったという考えに感謝した気がしました。これからも発展するゼロチョ様になりますように。

    • zerocho
      Instructor

      大切なコメントありがとうございます。私が最近講座は講義教案も作成し、より体系的に授業を作っていますが、タイプスクリプトの方は初創期講座なので、はるかに精神のない感じが強く召されたようです。私が最近講座を出したとしたら、JavaScript+タイプスクリプトを合わせて講座を出してJavaScript部分はYouTubeに無料で解放されたようですね。この部分は私が次第にリニューアルしながら改善していくようにします。スラッククローンコーディング講座については、もともとフロントとバックエンドを合わせて9~10万ウォンに発売しようとしたが、フルスタック講座の負担になる方が多く、ターゲット層を分離しました。ところが分離したまま発売してみると、それぞれバグや講座改善事項が積み重ねられ、二つのつながりが少しずれた部分があったようですね。もう一度練習して修正します。知っている部分を教えてください。苦情が多かったのですが、できるだけ配慮して受講評を残してくださったのが感じられます。誠実なスカンピョン残してくれてありがとうと申し訳ありません。

  • dla14347593님의 프로필 이미지
    dla14347593

    Reviews 4

    Average Rating 4.3

    4

    100% enrolled

    ゼロチョ様の講義を着実に聞いていますが、説明や例も実務で活用するほど良いと感じています。しかし、残念なことは、一度講義で服用したり、それほど重要ではないソースは急速に進むことがあり、そのコードを適用するのに時間がかかることがあります。コースごとにgit branchが分離されていれば、もう少し簡単に例を確認してテストしてみることができるようです。また、途中で説明や言及したサイトや文書はリンクを残していただければ簡単に参考にできるようです。最後に、毎回良い内容で講義していただきありがとうございます。

    • ckdduf6651459님의 프로필 이미지
      ckdduf6651459

      Reviews 2

      Average Rating 5.0

      5

      96% enrolled

      本物ちゃんです フロントの全体的な技術をたくさん扱ってくれます 回答もほぼスラッククローンコーディングなので、リアルタイムソケット通信するレベルに早く取り付けていただき、コミュニケーションもすごく上手な方です。ゼロチョーのリアクト無料講座を聞いて、これを聞くと、たくさんのことを手に入れることができます。

      • milkyway님의 프로필 이미지
        milkyway

        Reviews 6

        Average Rating 5.0

        5

        100% enrolled

        まだ講義は全部聞いていませんが、十分に良い講義だと思われ、インフラで受講評してほしいポップアップが浮いて事前に少ないです。 まず講座紹介そのままタイプスクリプトを書いたが、与えるリアクト、ウェブパック、SWR、Emotion、Socket.IO講座と考えればいいと思います。リアクト+タイプスクリプトを勉強しに講座を聞くと少し残念です。逆に言えば、タイプスクリプトを知らなくても講義を聞くには何の問題もありません。 ただ、私のおすすめはオールインワンタイプスクリプト講座を進め、リアクト+タイプスクリプトの勉強をしようとする方が軽くタイプスクリプトも書いて聴きやすい講座という気がします。 長所を先に言えば、まずはリアクトに忠実な講義であるだけにリアクト構造、開発方向をつかむのに最適です。 2つ目はWebパックの初期設定を知らせて起動するのには分からなくても開発するのに支障はありませんが、後で本当に重要なのが初期設定だと思うほど初期設定に関する内容が本当に良かったです。 3つ目は、スタイルを身に着けるときにどの単位でスタイルコンポーネントを作るかを提示し、そのまま授業進行するのもよかったです。最後にソケット通信に関する基本説明とヒントを与えるのも良かったのですが、これは今聞いているので確信はありませんね。 欠点は、私が見たときに出てきたか、ちょっとした講義とコードが変わっていることです。ただ、FitHubにアップデートコードを着実に上げておいて、詰まっていることがあるなら、インフラの質問掲示板やSlackに質問すれば、答えを早くしてくれるので、一人で勉強する気があれば十分補完可能で、私は講義内容と並行してFetHub react-query内容も一緒に反映して聞いているのにライブラリアップデートに変わった内容は十分に検索して解決できるレベルでした。 最後に講義聞くヒントを言えば初期セッティングのような場合には変わり点があるので、追いつきながら聞かないで一旦フェイトハブコードを貼り付けてからじっくりと講義を聞いてみて一人でセッティングしてみる方法も良いと思います。 そして基礎講義であるだけに、すでにリアクトとタイプスクリプトを実務でうまく使用中であり、ソケット通信も適用してうまく書いたことがあれば、思ったより内容が少ないでしょう。 個人的に前に得ていくことが多く、良い経験になった講義でした。

        • dongwooklee96님의 프로필 이미지
          dongwooklee96

          Reviews 3

          Average Rating 4.3

          5

          50% enrolled

          もともと私がインターネット講義とうまく合わないと思っていましたが、頑強な講義がほとんどないからです。

          Limited time deal

          $3,499.00

          25%

          $30.80

          zerocho's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!