강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Slack クローン コーディング [React を使用したリアルタイム チャット]

Slack サービスを参考に、本格的な React Web 開発を始めましょう。会員登録、ログイン、ルームの作成、リアルタイム チャットまで!

  • zerocho
Clone Coding
React
TypeScript
Webpack
Babel

学習した受講者のレビュー

受講後に得られること

  • React Web 開発

  • フロント初期設定(CRAなし)

  • SWR (リダックス代替)

  • Emotion(スタイルド コンポーネント)

  • Socket.ioリアルタイムチャット

私の手作りチャットアプリケーション、
効果的に、より簡単に! 💬

この講義では?

Slack(スラック)サービスに従って作る
本格的なリアクトウェブ開発を始めましょう!
(スラック+リアクト、別名Sleact!)

リアクトウェブ開発、
どうやって学ぶべきですか?

最近、私はリダックスをうまく使う傾向がありませんでした...
JavascriptからTypeScriptに移行しています...
本当ですか?

こんな言葉をたくさん聞きましたか?悲しいことに本当です。そのため、この講義でもReduxを蹴り、JavaScriptの代わりにTypeScriptを適用しました。リダックスなしでもリアクトアプリ開発が可能で、タイプスクリプトも思ったより難しくないことをお見せします!


こんな方におすすめです!

React Webの開発方法を学びたい方

TypeScriptを新しく学びたい方

クローンコーディングでフロントエンドパーツを実装したい方


ゼロ秒スラッククローン、
フロントエンドの悩み完璧解決!

  • 最新のフロントエンドトレンドに合わせてタイプスクリプトでサービスを制作します。ただし、タイプスクリプトが消えてしまう方のためにJavaScriptにも進めるように講義を構成しました。 (JavaScriptのソースコードを提供!)
  • リダックスを使用しません。 SWRというライブラリを代わりに使用します。
  • 会員登録、ログイン、チャットルームの作成、ユーザーの招待、リアルタイムチャット、ユーザーのメンション、画像のアップロードなど、チャットアプリケーションの実装に必要な機能をすべて実装します
  • レッスンでは説明しませんが、バックエンドのソースコードも付属しています。

このようなスキルを学びます。

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


自分で作ってみてください!

会員登録、ログイン、ワークスペース
各種ワークスペース機能の実装

リアルタイムチャットとオンラインリスト


#1
ソースコード

提供します。

https://github.com/zerocho/sleact (ショートカット)

#2
質問にすばやく
答えます。

私のコースの利点はQ&Aです。質問があれば、一日で答えてください。
講座に関する内容を自由に質問しながら積極的に勉強してみてください。
内容を理解するのに役立つでしょう!


知識共有者を紹介します。

Web開発ベストセラー
作者


よくある質問💬

Q. タイプスクリプト、ぜひ知っておくべきですか?

個人的にタイプスクリプトを学ぶことをお勧めします。 JavaScriptの生態系はますますタイプのスクリプトに移行しています。ただし、この講座ではJavaScriptのソースコードを提供し、映像でタイプスクリプトを適用する部分をお知らせしますので、JavaScriptだけでも進めることができます。 (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で入手できます。
  • よくある質問はよくある質問でまとめてInflearnブログに掲載します。
  • 映像や内容に問題がある場合は、お問い合わせください。再編集してアップロードします。
  • 講義にいないのに実装が気になったことがある場合、多くの方が質問されればボーナス映像を制作します。

選手の知識及び連携講義

必須選手の知識

Webゲーム8個でリアクト、バーベル、Webパックまで!

タイプスクリプトをもっと学ぶには!

最近大勢! JSより安定したTSの世界

他のクローンコーディング講義が気になったら?

とんでもない22時間Twitterクローン!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React 文法を学び、本格的に Web 開発をしたい方

  • 単純なチュートリアルではなく、きちんとサービスに従って作成したい方

  • TypeScript を使用して開発の安定性を高めたい方

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

  • HTML/CSS

  • JS の基礎知識

  • React 基本文法(無料講座を受講してください)

こんにちは
です。

66,504

受講生

1,682

受講レビュー

9,755

回答

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分)

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

受講レビュー

全体

97件

4.8

97件の受講レビュー

  • 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.

          ¥4,941

          zerochoの他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

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