강의

멘토링

로드맵

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

こんにちは
です。

526

受講生

29

受講レビュー

51

回答

4.8

講座評価

6

講座

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

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

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

 

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

 

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

カリキュラム

全体

76件 ∙ (15時間 13分)

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

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

受講レビュー

全体

21件

5.0

21件の受講レビュー

  • smjung님의 프로필 이미지
    smjung

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • 닭강정
      知識共有者

      안녕하세요. 소중한 수강평 감사합니다. Smjung님에게 도움이 되신 것 같아 저도 큰 보람을 느낍니다. 앞으로도 더 알찬 강의로 보답드릴 수 있도록 노력하겠습니다. 감사합니다!

  • JIWOO KIM님의 프로필 이미지
    JIWOO KIM

    受講レビュー 8

    平均評価 5.0

    5

    30% 受講後に作成

    • 닭강정
      知識共有者

      안녕하세요. JIWOO KIM님. 소중한 별점 남겨주셔서 감사합니다. 덕분에 다음 강의를 준비하는 데 큰 힘이 됩니다. 앞으로도 학습에 많은 도움이 되길 바랍니다!

  • JMK님의 프로필 이미지
    JMK

    受講レビュー 9

    平均評価 5.0

    5

    100% 受講後に作成

    덕분에 MERN 스택 전체를 맛 볼 수 있었습니다!

    • 닭강정
      知識共有者

      안녕하세요. JMK 수강생님. 소중한 후기 감사합니다! MERN 스택 전체를 한 번에 경험해보셨다니 정말 기쁘네요. 앞으로도 학습에 도움이 되길 바랍니다! 감사합니다.

  • 김진우님의 프로필 이미지
    김진우

    受講レビュー 2

    平均評価 5.0

    5

    61% 受講後に作成

    어느정도 지식이 있는 상태에서 보면 도움되는 강의. 빠르게 진행되지만 기초지식(node의 미들웨어나 json의 데이터를 옮기는 구조 등)이 조금 있다면 프로세스를 알기 쉬운 강의라고 생각됩니다. 저는 모르는부분은 열심히 찾아보면서 하고 있는데 도움이 됩니다. 감사합니다!

    • 닭강정
      知識共有者

      안녕하세요. 김진우 수강생님. 좋은 피드백 남겨주셔서 감사합니다! 이미 기초 지식이 있으신 분들에게 도움이 되었다니 기쁩니다. 앞으로도 더 좋은 강의로 찾아 뵙도록 하겠습니다. 응원합니다!

  • 윈터님의 프로필 이미지
    윈터

    受講レビュー 2

    平均評価 5.0

    5

    38% 受講後に作成

    자세하게 알려주셔서 너무 좋아요 :) 좋은 강의 감사합니다!

    • 닭강정
      知識共有者

      별 5개와 소중한 후기, 정말 감사합니다! 저희 회사 웹사이트 강의를 들어주셔서 감사드리고, 다음 강의에서도 또 뵙길 기대하겠습니다!

¥5,257

dakgangjung123の他の講座

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

似ている講座

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