강의

멘토링

커뮤니티

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,533

Learners

1,684

Reviews

9,755

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

    It's not cheap, but it's so hard to take the class. If it's a lecture that's free on YouTube, you can listen to it, but it's not organized, and they always tell you to look at the official document because it's all in it... It's good to provide the official document, but there is a basic math textbook, but isn't that the role of the instructor? Just because there's a textbook doesn't mean everyone gets a first-class grade. If you say that it's all in the textbook, so you can look at it, and if you explain some parts roughly, it can be very difficult and confusing for some people. I think that separating the backend and the frontend is also a way to raise the price. The two lectures don't feel naturally connected, and when I first create the backend, when I come to the frontend and look at it, the part that the instructor created doesn't have the configuration part in the part that I created... I feel uneasy every time that happens. Also, since the previous level is already known, as a busy office worker, I can't invest time in all the lectures. It's like I'm not very good at math, but I can't just look at sets all the time. Even if you record a lecture at a higher level than the previous lecture, I hope you make it an independent lecture. In fact, I thought a lot about how to convey the inconveniences I felt while listening to several lectures without being too exaggerated, so I think this part came from my impressions while listening to the TypeScript lecture.. You just change what you already made in JavaScript to TypeScript, so I didn't feel like I gained much since I didn't listen to the previous lecture. So I'm trying to listen to it a few more times to understand it, but since I'm also busy with my main job, the burden of listening to the lecture increases, and I feel sorry that my complaints are directed at the instructor, but I hope you understand that there are opinions like this. The last part about distribution is also like that, so I feel like my curiosity about how to actually distribute it and see visible results is not resolved. I think everyone has a different style, but I personally don't think it's a good quality lecture for the price. However, I think this front-end lecture is the best among the lectures I've listened to from Zerocho. I think that the fact that you turned off the music at the beginning and end was a consideration for the opinions of the students, so I'm grateful. I hope that you will continue to develop as a Zerocho.

    • zerocho
      Instructor

      Thank you for your valuable opinion. I am currently writing lecture notes and making more systematic classes for the course, but TypeScript is a very early course, so it must have felt much more chaotic. If I were to release a course these days, I would have released a combined JavaScript + TypeScript course and released the JavaScript part for free on YouTube. I will gradually renew and improve this part. Regarding the Slack Clone Coding course, I originally planned to release it for 90,000 to 100,000 won for the front and backend courses, but many people found full-stack courses burdensome, so I separated the target groups. However, since I released them separately, there were bugs and course improvements piled up, so there were some parts that were not connected. I will practice again and fix it. It would be better if you could tell me what you know. I know you had a lot of complaints, but I feel that you were as considerate as possible when leaving your review. Thank you for leaving a sincere review, and I apologize.

  • dla14347593님의 프로필 이미지
    dla14347593

    Reviews 4

    Average Rating 4.3

    4

    100% enrolled

    I've been listening to Zerocho's lectures consistently, and I feel that the explanations and examples are good enough to be used in practice. However, one thing I regret is that sometimes the lectures are copied and pasted, or the source code that is not very important is processed quickly, so it takes time to apply the code. If git branches are separated by lecture, it would be easier to check and test the examples. Also, if you leave links to the explanations or mentioned sites or documents in the middle, it would be easier to refer to them. Lastly, thank you for always giving great lectures.

    • ckdduf6651459님의 프로필 이미지
      ckdduf6651459

      Reviews 2

      Average Rating 5.0

      5

      96% enrolled

      It's really great. It covers a lot of the overall front-end technology. The answers are almost like Slack clone coding, so they're quick to the point of real-time socket communication, so communication is really good. If you listen to Zerocho's free React lecture and listen to this, you'll get a lot out of it.

      • milkyway님의 프로필 이미지
        milkyway

        Reviews 6

        Average Rating 5.0

        5

        100% enrolled

        I haven't finished the lecture yet, but I think it's a good enough lecture, and I'm writing it in advance because a pop-up popped up on Inflearn asking me to write a course review. First of all, as the course introduction says, it uses TypeScript, but you can think of it as a React, Webpack, SWR, Emotion, and Socket.IO course. If you're taking the course to study React + TypeScript, you might be a little disappointed. On the other hand, even if you don't know TypeScript, there's no problem taking the course. However, I recommend the All-in-One TypeScript course, and I think it's a good course for those who want to study React + TypeScript while also using TypeScript. First of all, since it's a lecture that's faithful to React, it's good for setting up React structure and development direction. Second, it tells you the initial settings of Webpack and starts, but even if you don't know it, you can still develop, but since I think the initial settings are really important later, the content on the initial settings was really good. Third, it was good that it suggested which units to create style components in when applying styles and proceeded with the class as is. Lastly, it was good to give basic explanations and tips on socket communication, but I can't give you a definitive answer because I'm listening to it now. The downside is that, in my opinion, it's been a while since the lecture came out, so there are a lot of changes in the code. However, since they are consistently uploading updated codes to GitHub, and if you have any difficulties, you can ask questions on the Inflearn Q&A board or Slack and they will answer quickly, so if you want to study on your own, you can sufficiently supplement it. I'm listening while reflecting the contents of GitHub react-query in parallel with the lecture contents, and I was able to search and solve the contents that changed due to library updates. Lastly, as for the lecture listening tip, for the initial setup, there are some changes, so instead of following along, copy and paste the GitHub code, listen to the lecture step by step, and try setting it up on your own, I think it's a good idea. Also, since it's a basic lecture, if you're already using React and TypeScript well in practice and have experience applying socket communication, there may be less content than you think. Personally, I gained a lot from it, so it was a good lecture experience.

        • dongwooklee96님의 프로필 이미지
          dongwooklee96

          Reviews 4

          Average Rating 4.5

          5

          50% enrolled

          Originally, I thought I wasn't suited for online lectures because there weren't many solid lectures.... But I'm currently taking this course and it's really fun.

          $30.80

          zerocho's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!