강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト:完璧ガイド

React、Node.js、MongoDBを活用して会社のWebサイトを自分で制作する過程を学べる実践的な講座です。 簡単なReact、Node.jsの基礎知識があれば、一緒にフルスタックプロジェクトを作りましょう!

  • dakgangjung123
프로젝트
React
Node.js
MongoDB
HTML/CSS
JavaScript

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

受講後に得られること

  • React & Tailwind CSS で トレンディな UI を 設計、実装

  • Node.jsとExpressでバックエンドサーバー構築

  • MongoDBとExpress Routerによるデータベース設計と管理

  • フロントエンドとバックエンド間のデータ通信理解

  • 実際の会社ウェブサイトレベルのプロジェクト完成

2025-03-23 アップデート

私だけの会社ウェブサイトがついに公式ドメインにデプロイされました!🎉
https://my-company.site
講義購入前に直接アクセスして体験してみてください。


🔐 管理者ページアクセス案内
https://my-company.site/admin
ID: admin / パスワード: test123

  • AWS S3とTinyMCEエディターは費用の問題で現在無効化された状態です。

  • 機能構成を確認する用途でのみ軽く見ていただければありがたいです :)

会社のウェブサイトはどのように顧客との第一印象を左右するのでしょうか?

答えはReact、Node.js、MongoDB、HTML/CSS、JavaScriptを活用した強力な技術スタックにあります。多くのユーザーが企業サイトのトレンディなUIと効率的なデータ管理を通じてInteractionを体験しています。

本講義では、Reactでフロントエンドを、Node.jsとMongoDBでバックエンドを設計し、実際の企業ウェブサイトレベルのプロジェクトを完成させます。効率的な状態管理、RESTful API統合、データベース設計など、実務で求められる核心技術を深く扱います。

単純に真似するチュートリアルではなく、体系的な学習を通じてProduction Readyレベルのウェブサイトを作りながら実戦開発者の感覚を身につけてみましょう!

この講義の特徴

[[SPAN_1]]📌[[/SPAN_2]]会社の第一印象を決定づけるウェブサイト制作のノウハウを公開します。3年間のプロジェクト経験を通じて得た効率的で実用的な開発方法論をお伝えします。

📌フロントエンドからバックエンドまでスキーマ設計、状態管理、データベース最適化など実務で必ず必要な技術とinsightを提供します。

📌理論20%、実習80%。すべてのコードを直接作成してテストし、実際に動作する完成度の高いWebサイトを作ってみます。

📌中級から上級へのステップアップを目指す方のための講座。基本的なHTML、CSS、JavaScript、そしてReact & Node.jsの簡単な知識さえあれば、誰でも受講できます。

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト:完璧ガイド - 紹介動画

こんな内容を学びます。

React、Tailwind CSSでUI設計・実装
コンポーネントを活用して再利用可能なモダンUIを設計し、効率的な状態管理でレスポンシブWebサイトを実装します。

Node.jsとExpressでバックエンド構築
RESTful APIを設計し、クライアントとサーバー間のデータを安定的に通信するバックエンド技術を学びます。

MongoDBを活用したデータ管理
MongoDBのスキーマ、モデルでデータ構造を設計し、Express Routerで柔軟なRESTful APIを実装して、リアルタイムデータ中心のWebアプリを制作します。

実戦プロジェクト:会社ウェブサイト制作
React、Node.js、MongoDBを統合してProduction Readyウェブサイトを完成!

React & FastAPIで作る投票コミュニティプラットフォーム:決済システムで収益化まで!

リアルタイム投票、コメント、いいね等の核心的なソーシャル機能から、カカオペイ・トスペイ連動による決済システムまで!
段階別実習でコミュニティプラットフォーム構築と収益化戦略を一度に身につけましょう。

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

React、Electron、Zustandを活用して実習しながらデスクトップタイマーアプリ制作からWindows・Mac・Linux配布まで体験してみましょう。
Zustandグローバル状態管理とGUI配布プロセスを身につけながら、デスクトップアプリ開発の全体的な流れを一度に学習できます。

私がタイタニックに乗っていたら?!PyTorch & Next.jsで生存確率予測AIウェブサービス作り

「もし私がタイタニック号に乗っていたら生き残ることができただろうか?」という興味深い質問を実際のデータで解いてみます。
PyTorchでAIモデルを作り、FastAPIでバックエンドサーバー、Next.jsでWebインターフェースを実装し、AIとWeb開発を網羅するフルスタックプロジェクトを完成させることができます。

受講前の参考事項

実習環境

  • 講義はWindowsmacOS環境で実習できるように構成されています。Linuxユーザーも講義についてくることができます。

  • 講義ではVisual Studio Code (VS Code)を基本的なコードエディタとして使用し、無料でインストール・使用することができます。

  • 最新バージョンのNode.jsMongoDBが必要です。インストール方法は講義で詳しくご案内します。


提供資料:ソースコード、PDF講義資料、サンプルプロジェクトファイル

  • 学習資料は講義と一緒にGitHub Repositoryで提供され、簡単にダウンロードして実習することができます。

  • Notionから提供される基本コードと一緒にコード実習を簡単に行うことができます。

前提知識および注意事項

  • HTML, CSS, JavaScript, React, Node.jsの基礎を知っていれば、講義をより楽に受講することができます。

  • Tailwind CSS、MongoDBを初めて使用する方でも十分についてこられるよう、基礎から一歩ずつ説明します。

  • 基本的なGitの使用経験があれば、実習を進めるのがより便利です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React, Node.js, MongoDBでフルスタックWeb開発に挑戦したい方々

  • 実際の企業サイトレベルのプロジェクトを完成させてみたい方

  • ウェブ開発を始めたばかりで、体系的に学びたい初心者

  • ポートフォリオにプロジェクトを追加したい就活生および社会人

  • 基礎を固めながら実務に必要な開発技術を習得したい方々

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

  • React

  • Node.js

  • HTML

  • CSS

  • JavaScript

こんにちは
です。

686

受講生

31

受講レビュー

57

回答

4.8

講座評価

7

講座

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

カリキュラム

全体

76件 ∙ (15時間 13分)

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

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

受講レビュー

全体

21件

5.0

21件の受講レビュー

  • ratel1412님의 프로필 이미지
    ratel1412

    受講レビュー 20

    平均評価 4.8

    5

    100% 受講後に作成

    • smjung4105님의 프로필 이미지
      smjung4105

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      • dakgangjung123
        知識共有者

        こんにちは。貴重な受講レビューをありがとうございます。 Smjungさんのお役に立てたようで、私も大きなやりがいを感じています。今後もより充実した講義でお応えできるよう努力いたします。ありがとうございます!

    • jiwookim24371님의 프로필 이미지
      jiwookim24371

      受講レビュー 8

      平均評価 5.0

      5

      30% 受講後に作成

      • dakgangjung123
        知識共有者

        こんにちは。JIWOO KIMさん。貴重な星評価をいただき、ありがとうございます。おかげで次の講義を準備する大きな力になります。今後も学習に大いにお役に立てることを願っています!

    • jmk님의 프로필 이미지
      jmk

      受講レビュー 9

      平均評価 5.0

      5

      100% 受講後に作成

      おかげでMERNスタック全体を味わうことができました!

      • dakgangjung123
        知識共有者

        こんにちは。JMK受講生様。貴重なレビューありがとうございます!MERNスタック全体を一度に体験されたとのこと、本当に嬉しいです。今後も学習のお役に立てることを願っています!ありがとうございます。

    • yasisicoco님의 프로필 이미지
      yasisicoco

      受講レビュー 2

      平均評価 5.0

      5

      61% 受講後に作成

      ある程度知識がある状態で見ると役に立つ講義。 速く進行されますが基礎知識(nodeのミドルウェアやjsonのデータを移す構造など)が少しあればプロセスを理解しやすい講義だと思います。私は分からない部分は一生懸命調べながらやっていますが役に立ちます。ありがとうございます!

      • dakgangjung123
        知識共有者

        こんにちは。キム・ジヌ受講生様。良いフィードバックをいただき、ありがとうございます!すでに基礎知識をお持ちの方々にお役に立てたとのことで嬉しいです。今後もより良い講義でお会いできるよう努めてまいります。応援しています!

    ¥5,469

    dakgangjung123の他の講座

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

    似ている講座

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