강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

Slack 클론 코딩[실시간 채팅 with React]

Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!

(4.8) 수강평 95개

수강생 2,878명

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 리액트 웹 개발

  • 프론트 초기 세팅(CRA 없이)

  • SWR(리덕스 대체)

  • Emotion(스타일드 컴포넌트)

  • Socket.io 실시간 채팅

내 손으로 만드는 채팅 애플리케이션, 
효과적으로, 더 간단하게! 💬

이 강의에서는?

Slack(슬랙) 서비스를 따라 만들며 
본격적인 리액트 웹 개발을 시작해봅시다!
(슬랙+리액트, 일명 Sleact!)

리액트 웹 개발, 
어떻게 배워야 하는 걸까요?

요즘 리덕스를 잘 안 쓰는 추세라던데... 
자바스크립트에서 타입스크립트로 넘어가고 있다던데...
진짜인가요?

이런 말 많이 들어보셨나요? 슬프게도 사실입니다. 그래서 이 강의에서도 리덕스(Redux)를 걷어내고, 자바스크립트 대신 타입스크립트를 적용했습니다. 리덕스 없이도 리액트 앱 개발이 가능하고, 타입스크립트도 생각보다 어렵지 않다는 걸 보여드릴게요!


이런 분들에게 추천드려요!

React 웹 개발 방법을 배워보고 싶은 분

TypeScript를 새로 배워보고 싶은 분

클론코딩을 통해 프론트엔드 파트를 구현해보고 싶은 분


제로초 슬랙 클론,
프론트엔드 고민 완벽 해결!

  • 최신 프론트엔드 트렌드에 맞춰 타입스크립트로 서비스를 제작합니다. 단, 타입스크립트가 꺼려지는 분들을 위해 자바스크립트로도 진행할 수 있게끔 강의를 구성했습니다. (자바스크립트 소스 코드 제공!)
  • 리덕스를 사용하지 않습니다. SWR이라는 라이브러리를 대신 사용합니다.
  • 회원가입, 로그인, 채팅방 생성, 사용자 초대, 실시간 채팅, 사용자 멘션, 이미지 업로드 등 채팅 애플리케이션 구현에 필요한 기능을 모두 구현합니다.
  • 강의에서 설명하지는 않지만, 백엔드 소스 코드도 함께 제공합니다.

이런 스킬을 배워요.

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


직접 만들어보세요!

회원가입, 로그인, 워크스페이스
각종 워크스페이스 기능 구현

실시간 채팅 및 온라인 리스트


#1
소스 코드를 

제공합니다.

https://github.com/zerocho/sleact (바로가기)

#2
질문에 빠르게
대답해 드립니다.

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!


지식공유자를 소개합니다.

웹개발 베스트셀러
<Node.js 교과서> 저자

주식회사 오늘의픽업
CTO


자주 묻는 질문 💬

Q. 타입스크립트, 꼭 알아야 하나요?

개인적으로 타입스크립트를 배우시는 것을 추천드립니다. 자바스크립트 생태계는 점점 타입스크립트로 옮겨가고 있습니다. 다만 이 강좌에서는 자바스크립트 소스코드를 제공하고, 영상에서 타입스크립트를 적용하는 부분을 알려드리므로, 자바스크립트만으로도 진행하실 수 있습니다. (tsx, ts 파일을 jsx, js로 바꾸고 :타입, <타입> 부분을 지우면 끝입니다. 엄청 간단합니다)

Q. SWR은 검증된 라이브러리인가요?

Next.js와 now.sh를 만든 Vercel(구 Zeit)에서 만든 라이브러리입니다. 믿고 사용하셔도 됩니다. 깃헙 스타가 16,000개예요~

Q. 세팅할 때 CRA를 쓰지 않은 이유가 있나요?

저는 항상 강의에서 CRA를 하지 않고 수동으로 세팅하는 것을 원칙으로 하고 있습니다. 수동으로 세팅하는 법을 알아야 CRA의 원리도 알 수 있으니까요. 원리를 알고 나서 CRA를 쓰는 것을 추천드립니다.

수강 전 참고해주세요!

  • Socket.io는 2버전을 사용합니다. 2버전을 설치하셔야 합니다.
  • 실제 배포된 서비스는 sleact.nodebird.com 에서 확인 가능합니다.
  • 자주 묻는 질문은 FAQ로 정리해서 인프런 블로그에 올리겠습니다.
  • 영상이나 내용에 문제가 있는 경우 문의하시면 재편집해서 올립니다.
  • 강의에 없는데 구현이 궁금하신 것이 있는 경우, 많은 분들이 질문하시면 보너스 영상을 제작합니다.

선수 지식 & 연계 강의

필수 선수 지식

웹게임 여덟 개로 리액트, 바벨, 웹팩까지!

타입스크립트를 더 배우시려면!

요즘 대세! JS보다 안정적인 TS의 세계

다른 클론 코딩 강의가 궁금하다면?

어마어마한 22시간 트위터 클론!

 

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 리액트 문법을 배우고 본격적으로 웹 개발을 하고 싶은 분

  • 단순한 튜토리얼 대신 제대로 된 서비스를 따라 만들고 싶은 분

  • 타입스크립트로 안정성을 높인 개발을 배우고 싶은 분

선수 지식,
필요할까요?

  • HTML/CSS

  • JS 기초 지식

  • React 기본 문법(무료 강좌 듣고 오세요)

안녕하세요
입니다.

65,813

수강생

1,631

수강평

9,712

답변

4.8

강의 평점

22

강의

제 강의의 장점은 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)

커리큘럼

전체

46개 ∙ (11시간 1분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

95개

4.8

95개의 수강평

  • dyonglove님의 프로필 이미지
    dyonglove

    수강평 25

    평균 평점 4.2

    4

    100% 수강 후 작성

    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
      지식공유자

      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

    수강평 4

    평균 평점 4.3

    4

    100% 수강 후 작성

    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

      수강평 2

      평균 평점 5.0

      5

      96% 수강 후 작성

      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

        수강평 6

        평균 평점 5.0

        5

        100% 수강 후 작성

        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

          수강평 3

          평균 평점 4.3

          5

          50% 수강 후 작성

          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.

          2025 추석맞이 감사할인 중 (4일 남음)

          ₩23

          25%

          ₩39,600

          제로초(조현영)님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!