Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Full-stack

MERN STACK コミュニティ: 開始から配布まで通知するReact

MERN Stackを活用してコミュニティアプリケーションを制作、配布します。 (MongoDB、Express、React、Node + Firebase)

  • pandacoding
토이프로젝트
MongoDB
Express
React
Node.js
Firebase

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

こんなことが学べます

  • React

  • Express

  • MongoDB(モンゴーズ)

  • Firebase (Authentication)

  • AWS E3 (Naver Cloud Service)

MERN Stackで学ぶフルスタックWebプログラミング!

MongoDB、Express、React、Node.js
コミュニティサイトの制作 (feat. Firebase)

  • ✅ MERN Stackを活用してコミュニティ型ウェブサイトを開発します。
  • ✅ Front-endとBack-endのすべての知識を扱い、完成したWEB/APP制作を目指します。

本講義で扱う技術

React
(リアクト)

Express
(エクスプレス)

MongoDB/Mongoose
(モンゴルDB/マングース)

Firebase
(ファイアベース)


ところで、 Reactとは何ですか? ✨

ReactはFacebookで作成されたJavaScriptライブラリです。
Vue.js、Angularなど、今日私たちが利用できる多くのJavascript Framework / Libraryがあるにもかかわらず、ReactはFront-endの世界で最も人気があり、開発者が最も探しているオプションの1つです。

Reactの特徴

1️⃣ JSX

Javascript XMLとして、XML/HTMLと同じ文法です。 HTMLに似たコードをJS内で動作させることができます。これは、ブラウザが読み取り可能なJSに最適化されてレンダリングされるため、通常のJSよりもはるかに高速です。

2️⃣ Virtual DOM

2013年以前は、WebサイトまたはWebページが新しいデータをユーザーに表示するには、常に更新を使用する必要がありました。ただし、Reactは必要な部分だけがデータが変わる部分だけを新しく表示し、Webページを再レンダリングする必要はありません。これは、ユーザーがアプリと同様の経験をReact WEB / APPで提供できることを意味します!


川の一つに
MERN Stackを捕まえた!

#1.
React

投稿、会員登録など、さまざまなコンポーネントを作成し、コミュニティサイトに必要なすべての機能を実装します。必要に応じてHookをコンポーネントサイクルに合わせて提供し、UserサービスはFirebaseを使用して迅速に開発し、Reduxを使用して管理されます。

#2.
Express

ExpressでWebサーバーを作成し、Reactで作成したアプリを表示します。クライアント側で送信されるテキスト/画像データをDB、またはサーバーに保存します。このレッスンでは、Naver Cloudを使用して外部ストレージに画像を保存する方法も学習します。

#3.
MongoDB /
Mongoose

NoSQL DBであるMongoDBをMongooseで管理します。投稿情報とユーザー情報をDBに保存、読み取り、変更、削除するCRUDプロセスについて学びます。このプロセスでは、Mongooseを使用してMongoDBからモデルを作成し、そのモデルをさまざまなメソッドとして扱います。

#4.
React-Bootstrap、
Emotion

すばやくUI / UXを完成できるReact-Bootstrapをプロジェクトに導入し、必要に応じてSASSベースのスタイリングライブラリであるEmotionを活用してウェブサイトデザインを制作します。

ログイン/ログアウトの実装
ユーザープロファイル登録の実装

私はこの講義
聞くことできますか? 🙋‍♂️

もしプログラミングに入門しながら、自分だけのウェブサイトを直接配布まで経験したいことはありませんでしたか?今回の講義はフロントエンドとバックエンドの領域の両方を扱うので、講義に従うだけであなただけのウェブサイトを作ることができます。

Q. この講義を通じてウェブ開発に入門できますか?

今回の講義で使用するすべてのスタックは、その技術に初めて接する人々を対象に講義内容が企画されました。そのため、その技術に関する知識がなくても講義を受講するのに大きな支障がないように十分な説明が行われますが、HTML/JS/CSSなど基礎的なウェブ開発の知識がなければ、やや難しいかもしれません。 (選手の知識をぜひご確認ください!)

Q. 私はフロントエンド(バックエンド)しか経験がないのに大丈夫でしょうか?

コミュニティウェブサイトの制作に必要な部分だけを効率的に学習し、新しい技術スタックを使用するたびに「なぜこの技術を使用するのか」、「この技術はどのように使用するのか」などの情報を講義の内部に十分に溶かしました。基本的にReactがメインの講義ですが、ウェブサイトの全体的な流れを捉えることができるので、どんな方向の開発者を希望しても自信を持ってお勧めできそうです。

Q. このレッスンで MERN Stack をすべてマスターできますか?

いいえ。この講義は、フレームワーク、あるいはライブラリを導入してウェブサイトを初めて開発する人のレベルで難易度が設定されているため、スタック別秒/中級程度の内容を扱います。今回の講義を通じて本人のウェブ適性を確認するのも一つの良い方法になりそうです。

Q. どの程度の選手知識が必要でしょうか?

この記事を見てみると良いと思います。基本的にJavaScriptのData型と(配列とオブジェクトを含む)、ユーザー定義関数の宣言と使用度合いの知識があれば大きな支障がないようです。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを使って完成したウェブサイトを開発したい人

  • BackEndの知識が不足してプロジェクトの実装が難しい人

  • 本人だけのサイトを直接配布してみたい人

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

  • HTML/CSS

  • JavaScript

こんにちは
です。

22,130

受講生

550

受講レビュー

268

回答

4.8

講座評価

6

講座

문의 : nani6765@gmail.com

カリキュラム

全体

49件 ∙ (6時間 45分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

27件

4.7

27件の受講レビュー

  • coookieee995538님의 프로필 이미지
    coookieee995538

    受講レビュー 1

    平均評価 5.0

    5

    12% 受講後に作成

    The lecture is very informative and easy to understand! I have taken many other lectures from Inflearn, but this is the first lecture that I am writing a review for, so I am very satisfied with it! I really liked how it was covered in detail AtoZ, and I think it was good at picking out points that made it a little easier to understand. Actually, as a non-major, I was at a loss when it came to learning development, but the clear explanation is really great. I recently used the React library that is used on many websites, so I think it will be very helpful in practice! I think those who are interested in React will understand it very clearly if they listen to this lecture once :) Pandacoding, thank you so much for the great lecture!! Please release other lectures soon!!!

    • pandacoding
      知識共有者

      Thank you :) - You are the first to leave a review, thank you :) I also started coding as a non-major and am currently working as a developer. I think one of the most important things to learn coding is not to lose interest in coding. In that sense, I tried hard to get away from simple grammar explanations and listing lectures. I will continue to try my best so that you will not lose interest in coding.

  • geonu1101님의 프로필 이미지
    geonu1101

    受講レビュー 4

    平均評価 4.8

    4

    71% 受講後に作成

    I took the course after learning React and Node once. Overall, it was good for reviewing what I had learned before, and I was at a loss as to how to connect and handle React and Node, but I learned how to transfer server and client data with Axios. However, the only regret was that the font of the instructor's IDE was too small, so it was not easy to read when watching the lecture on my tablet. And since the instructor tried to cover a variety of topics in a short class, I couldn't understand the code for the Redux part at all, so I looked back at the lecture I had seen before. I didn't even know that using Amazon S3 meant using Naver Cloud. It was my fault. Lastly, I haven't received an answer for two weeks even after posting a question. Is the instructor busy? ㅠㅠ.. Since it's a paid course, I wish he would put more effort into answering questions. Still, it was good to be able to grasp the big picture of how to use the front, backend, DB, and external storage.

  • qlsnaos12님의 프로필 이미지
    qlsnaos12

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    It's a little fast, but it's okay. You can listen to it multiple times~~ I'm just over 30% done now, and it's fun~ I was scared to try React after developing with View, but thanks to the instructor, I'm having fun! // Added I was so busy that it took me a long time to listen to the end ㅜㅜ I don't know how to thank you because I learned so much! It was great to get a big picture of how web development is done, and I learned that there are still many areas where I'm lacking, so I plan to study those areas more while working on a separate project. Thank you~

  • copperhun5642님의 프로필 이미지
    copperhun5642

    受講レビュー 1

    平均評価 5.0

    5

    94% 受講後に作成

    The progress is so fast that it's a bit tiring. But the backend part seems really useful. It seems like something even a beginner can watch. I plan on watching it over and over again.

  • rgc05824542님의 프로필 이미지
    rgc05824542

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    I think I learned more than I expected. I was able to learn not only how to use the database and the technology stack, but also how to apply it, and I was able to see many improvements due to the differences in the writing style.

    • pandacoding
      知識共有者

      Thank you :) - Sorry for the late reply! I hope you don't just learn grammar, but learn how to apply and use it (__)

¥4,535

pandacodingの他の講座

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

似ている講座

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