강의

멘토링

컀뮀니티

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) 97 reviews

2,886 learners

  • zerocho
Clone Coding
React
TypeScript
Webpack
Babel

Reviews from Early Learners

What you will gain after the course

  • 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

66,419

Learners

1,676

Reviews

9,752

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

97 reviews

4.8

97 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

          もずもず私がむンタヌネット講矩ずうたく合わないず思っおいたしたが、頑匷な講矩がほずんどないからです。

          $30.80

          zerocho's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!