인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Full-stack

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation(NextJS)

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

Clone Coding
Node.js
React
Next.js
TypeScript

初級者のための講座です。

こんなことが学べます

  • リアクト

  • タイプスクリプト

  • PostgreSQL

  • ドッカー

  • NextJS

  • 展開

NextJS、Typescript、ExpressJS、Postgres
最もホットなフルスタックの組み合わせでRedditをクローンします!

この講義では?

世界的なコミュニティ、レディットサイト
最初から一緒に作ってみます。

最近、JavaScriptスタックで最もよく使われるフルスタックの組み合わせであるNextJS Typescript ExpressJS Postgresの組み合わせで、ある程度複雑なアプリケーションを最初から一緒に作ってみることになり、フルスタック開発に自信を持てるようにこの講義を作ることになりました。

このレッスンの特徴は、すべてのソースコードを最初から1つずつ追いながら学習できることです。ソースコードを1行ずつ説明し、その後にコーディングを一緒に始めて何度も繰り返し学習をするようになります。実習中心の講義ですが、混乱したり難しい概念は深く学習して進むことになります。すべての部分は、図表を通してできるだけ視覚的に理解できるように努めました。

使用される言語とフレームワーク👉

レディットサイトを作成するとき、フロントエンド部分はリアクトのNextJSを使用し、
バックエンド部分はNodeJSとExpressJSを使用します。どちらの部分も言語はタイプスクリプトを使用します。データベースはPostgreSQLを利用し、TypeORMを利用して制御することになります。


学習する内容を紹介します📚

セクション1

全体的な構造を作る

フロントエンドとバックエンド、データベースを使用できるように準備します。

セクション2

エンティティを作成する

アプリケーションで必要なデータを生成するために各Entityを生成します。

セクション3

会員登録、ログイン

会員登録とログインページを作成し、ユーザーに関するデータはReact Contextを利用して処理します。

セクション4

コミュニティを作成する

コミュニティ作成ページ、コミュニティ作成、画像アップロードなどを実装します。

セクション5

ポストページを作成する

各コミュニティに含まれる投稿を作成し、投稿ページを作成します。

セクション6

コメントと投票機能を実装する

コメントと投票機能を実装します。

セクション7

無限スクロールとユーザーページの作成

useSWRInfiniteとIntersection observerを利用した
無限スクロール機能を実装してユーザーページを生成します。

セクション8

アプリケーションのデプロイ

EC2インスタンスを使用して、これまでに作成したアプリケーションをデプロイします。

 

知識共有者の
他の講義が気になったら? 📖

累積受講生 50,000+人、フォローして学ぶウェブ開発シリーズ 

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

学習対象は
誰でしょう?

  • JavaScriptでフルスタックアプリを作成したい人

  • 楽しく勉強したい人

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

  • JavaScript

  • リアクトJS

  • ノードJS

こんにちは
です。

82,859

受講生

2,636

受講レビュー

2,428

回答

4.8

講座評価

20

講座

안녕하세요. 

즐겁게 개발하고 있는 개발자입니다. 

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

カリキュラム

全体

103件 ∙ (17時間 39分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなに役立つ受講レビューを書いてください!