BEST

Front-end

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

Name: フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る
Price: 22000 KRW
Rating: 4.8 (17 reviews)

開発から配布まで！一つのサービスを完成するための険しい旅をろ過なくお見せします。初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！

（4.8）受講レビュー 17件

受講生 1,284名

jaenam

React

GraphQL

Firebase

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

受講後に得られること

リアクトウェブサービス開発
GraphQL
React-Query
Firebase

鮮やかに臨場感が感じられる講義を聞いて
ランダムコーディングをはじめ、ショッピングモールサービス制作まで！ 🩳

一つのサービス
完成するまでの旅 🚢

本講義は受講生と共にライブで行われた講義で、すぐに必要な内容だけを素早く見つけて適用します。
開発過程で行われる様々な問題状況を悩み、解決していく過程をろ過なくお見せします。

このレッスンで、無作為のコーディングを始めても何とか完成できることをお見せしたいと思います。
これにより、何かを作るのに苦労している就学者やジュニアの方々に勇気をあげたいと思います。
完全なコードは羽毛に公開されていますので参考にしてください！

「リアクト学習はしたが、いざ単独でプロジェクトを進行しようとするので、やっぱりです。
他人はどのように開発勉強をしているのか気になります」
_{-フロントエンド就職準備生-}

「バックエンド側の知識が全くなく、開発を考えるだけでも幕を閉じ、
プロジェクトの進行に限界を感じます。」
_{-ジュニアフロントエンド開発者-}

「コーディングして詰まったときにどのように処理すべきかわからない。
さらに、GraphQLとBFFを練習してみたいです。」
_{-フロントエンド開発者-}

ライブコーディングで
毎日一つずつ学びます🎥

1日目

クライアント環境設定（vite）、ルーター処理
商品リストおよび詳細ページの作成
React Query キャッシュポリシー
GNBの作成

2日目

Mock Service Workerの導入
商品リストとカートmock APIを書く
カートのページを書く

3日目

カートAPIの適用
invalidateQueries vs.楽観的な更新
ショッピングカートの削除と選択機能の実装

4日目

カートの状態管理（recoil）
お支払いページ

5日目

モノレポ導入(yarn workspace)
サーバー環境設定
スキーマとリゾルバの定義

6日目

json DBの作成
サーバーの変更クライアントに反映

7日目

無限スクロール - サーバー操作
useInfiniteQuery
intersectionObserver

8日目

Admin APIの作成
アドミンページ - リスト、商品追加、編集、削除機能の実装

9日目

Firebaseの適用

10日目

Firebase 適用の仕上げとデプロイ

🔔10日間直接ぶつかり、学ぶコーディングでショッピングモールサービスを作りましょう。

講義を聞いた後
受講生の様子😎

自分でプロジェクトを進めるのに十分な知識を身につけることができます。
プロジェクト進行過程で出会う様々な問題状況を解決する力が生じます。

実務経歴9年目の様々なノウハウを惜しみなく分かち合います。
無作為プロジェクトを始めて問題状況に遭遇するたびに
検索、デバッグ、いろいろな推測を総動員して何とか解決していく方法をお知らせします。

Q&A 💬

Q. 講義受講が可能な水準が気になります。

本講義ではリアクトやタイプスクリプトについての基本知識は別途取り上げないので、ある程度学習がされている状態でなければ円滑な受講が可能だと思います。しかし、他の知識まで要求されるほどではありません。

Q. 理論も講義内容の中に含まれていますか？

中間中間プロジェクトの進行に必要なほどの知識をお知らせしたり、映像撮影時に参加していたメンバーの質問にリアルタイムで回答を差し上げる内容が含まれています。それ以上の詳細な理論の説明はありませんので参考にしてください！

Q. この講義の内容はポートフォリオに適していますか？

スタイリングを最小限に抑えて開発だけに集中したいので、本講義の内容だけではポートフォリオにするほどのクオリティを得るのは難しいです。ただし、本講義を通じて新たなプロジェクトを進行するのに十分なノウハウを得ることができると思います。

Q. 特別に準備しなければならない実践環境はありますか？

講義ではMacOSに基づいて作業を進めましたが、OSの場合、Windows環境で発生する問題についてもある程度対応策の紹介をしておきました。そしてIDEはVSCodeを使っていましたが、他の開発ツールを使っても全く問題ありません。

知識共有者の
他の講義が気になったら？ 💁‍♂️

コアJavaScript （クリック）

Javascript ES6+を正しく学ぶ - 初心者 (クリック)

Javascript ES6+を正しく学ぶ - 中級（クリック）

Javascript ES6+を正しく学ぶ - ボーナス（クリック）

こんな方に
おすすめです

学習対象は
誰でしょう？

私はリアクト学習をしましたが、いざ単独でプロジェクトを進めようとしたら、幕末のフロントエンドの取材
バックエンド側の知識が全くなく、プロジェクト進行に限界を感じるジュニアフロントエンド開発者
GraphQL / BFFを練習したいフロントエンド開発者と就学者

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

ReactJS
Typescript

こんにちは
です。

32,812

受講生

688

受講レビュー

395

回答

4.8

講座評価

講座

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI

カリキュラム

全体

48件 ∙ (8時間 1分)

セクション 1．無計画無根本ライブコーディング講座紹介

1件 ∙ (4分)

1. Intro
04:17

セクション 2．無作為に始めましょう。一度クライアントから！

4件 ∙ (50分)

2. クライアント環境設定/ルータ処理
09:33
3. 商品リストページの作成
20:05
4. 商品詳細ページ/React-Query cacheポリシー
12:27
5. GNB / 1日目仕上げ
08:22

セクション 3．mock APIでデータ通信を準備します。

5件 ∙ (49分)

6. MSW(モックサービスワーカー)
17:07
7. 問題のあるルートライブラリの削除
02:27
8. カート mock API
09:07
9. カートに入れる API/カートのページ
18:15
10. 2日目仕上げ
02:28

セクション 4．カートページにAPIをリンクします。

5件 ∙ (45分)

セクション 5．ステータス管理を導入して支払いページを作成します。

4件 ∙ (42分)

セクション 6．ローカルサーバーの仕事をしましょう！

6件 ∙ (46分)

セクション 7．サーバーにjson DBを連動します。

4件 ∙ (47分)

セクション 8．無限スクロールを適用しましょう！

5件 ∙ (51分)

セクション 9．アドミンページにCRUDを適用してみてください。

4件 ∙ (50分)

セクション 10．DBをFirebaseに移動しましょう。

4件 ∙ (36分)

セクション 11．Firebase連動仕上げて配布まで！

6件 ∙ (57分)

講座掲載日:

最終更新日:

受講レビュー

全体

17件

4.8

17件の受講レビュー

whe19150746
受講レビュー 8
∙
平均評価 4.8
5
31% 受講後に作成
リアクト川の高級版のようなのでいいですね。
yoongeonung
受講レビュー 12
∙
平均評価 5.0
5
63% 受講後に作成
今やっと1日目までしか受講していませんが、とても面白くて学んだことが多くておしゃべりしたいと思います。既存のクローンコーディングや講座はとても面白くなくて退屈で眠りに落ちるまでしていましたが、勉強する感じのチョン・ジェナムの講義はとても面白いですね！カンチュガンチュして次に機会になれば初級から中級に進められていないジュニアのためのこれと似たスタディ型講座一つ作っていただきたいと思います。
0s
受講レビュー 7
∙
平均評価 5.0
5
100% 受講後に作成
いよいよ頑張りました！まず、講師の声がとても良いです。声自体が魅力があり、講義になるように惹かれます。そして…思った以上の講義です。最初に目指したよりも多くを学びます！
ucopy
受講レビュー 5
∙
平均評価 5.0
5
94% 受講後に作成
実用的な講義ですね。
khh23028104
受講レビュー 9
∙
平均評価 5.0
5
27% 受講後に作成
良い講義もとてもよく聞きました。特にライブで鮮やかに説明してくれるのに印象深かったです。

￥2,823

jaenamの他の講座

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

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

초급

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

コアJavaScript

jaenam

ES6以前までのJavaScript全体を貫通する重要な概念について、全体的な流れを調べる講義です。

초급

JavaScript

コアJavaScript

jaenam

Javascript ES6+を正しく学ぶ - 中級

jaenam

ES6+を正しく学ぶコースは、JavascriptのES6以降の標準ECMAScript仕様について、理論に基づいてES5とは異なる点と概念と動作原理を深く見ていきます。

중급이상

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 中級

jaenam

Javascript ES6+を正しく学ぶ - 初心者

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

초급

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 初心者

jaenam

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

초급

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

リアクト公式文書を一緒に勉強する

jaenam

2023年にリニューアルされたReact公式文書を一緒に学習します。

입문

React, JavaScript, react.js

リアクト公式文書を一緒に勉強する

jaenam

モダンJavaScriptディープダイブスタディ

jaenam

《モダンJavaScriptディープダイブ》本の内容をそのまま追いつくスタディ映像です。

초급

JavaScript

モダンJavaScriptディープダイブスタディ

jaenam

エフェクティブタイプスクリプトスタディ

jaenam

《エフェクティブタイプスクリプト》本の内容をそのまま追従するスタディ映像です。一緒に勉強すればはるかに簡単になります！

초급

TypeScript

エフェクティブタイプスクリプトスタディ

jaenam

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

초급

REST API, GraphQL, React

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

초급

ES6, JavaScript

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

似ている講座

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

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

MERN stack (feat. TypeScript) を活用して、地図サービスを最初から最後まで作成する講義です。API 公式ドキュメントを見ながら、一つずつ順を追って作成してみましょう。

초급

MongoDB, Express, React

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

Vue3＆amp; Firebase(v10)を活用してコミュニティを作る講義でVue3実践活用法、Firebase基礎から実戦、最新のWeb技術活用法、知識共有者経験共有など多様な方面で開発者として一段階成長できるようにします！

중급이상

Vue.js, Firebase, Quasar

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

Next + React Query で SNS サービスを作成する

zerocho

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

Next + React Query で SNS サービスを作成する

zerocho

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

초급

REST API, GraphQL, React

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

Spring BootとReactで実装するソーシャルログイン

oncoding

スプリングブートとReactを活用し、通常ログインとソーシャルログインを統合実装する方法を学びます。 MPAとSPA環境の両方でログインシステムを構築し、JWTとOAuth2認証を実習します。実務にすぐに適用可能なサンプルプロジェクトを通じて、全体のログインフローを理解し実装することができます。

중급이상

Java, Spring Boot, JPA

Spring BootとReactで実装するソーシャルログイン

oncoding

Next.js 15 with Spring Boot

zk202308a5410

従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 15の核心を貫き、'本当の'Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率を両方とも掴む方法を体験してください。 Next.jsらしく開発しましょう！Next.jsの機能をどのように適用すべきかを実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。講義の目標は最大限速くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。

중급이상

JavaScript, React, Spring Boot

Next.js 15 with Spring Boot

zk202308a5410

これ一つで完結-高品質ReactとSpring Boot 65時間フルスタック開発講座(Docker、AWS、GITHUB-ACTIONS)

greencoding1234

1人IT創業、1人事業家の両方を経験した著者が作った率直で淡白、直感的で深いReact+Spring Boot講座 (Docker、AWS、GITHUB-ACTIONS) そのままこれで一つの講座に統一しました。

입문

React, AWS, Docker

これ一つで完結-高品質ReactとSpring Boot 65時間フルスタック開発講座(Docker、AWS、GITHUB-ACTIONS)

greencoding1234

Flutterでメッセンジャーアプリ作り

DEV MOO

FlutterのRiverpodの状態管理とFirebaseを活用してメッセンジャーアプリを制作します。

초급

Flutter, Firebase, riverpod

Flutterでメッセンジャーアプリ作り

DEV MOO

ティンダーファイアベースクローン|リアクトネイティブ

The Coders Studios

最小限の時間内にリアクトネイティブを学ぶことができます。不要な部分は入れませんでした。

중급이상

React Native, Firebase

ティンダーファイアベースクローン|リアクトネイティブ

The Coders Studios

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

초급

React, Java, AWS

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

중급이상

Next.js, React, GraphQL

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

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

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

초급

React, Electron, GUI

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

dakgangjung123