![[React / VanillaJS] UI 요소 직접 만들기 Part 1Course Thumbnail](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
[React / VanillaJS] UI 요소 직접 만들기 Part 1
정재남
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
Basic
React, vanilla-js, ui
BEST
フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る
開発から配布まで！ 一つのサービスを完成するための険しい旅をろ過なくお見せします。 初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！
学習した受講者のレビュー
こんなことが学べます
リアクトウェブサービス開発
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を使っていましたが、他の開発ツールを使っても全く問題ありません。
知識共有者の
他の講義が気になったら？ 💁♂️
こんな方に
おすすめです
学習対象は
誰でしょう？
私はリアクト学習をしましたが、いざ単独でプロジェクトを進めようとしたら、幕末のフロントエンドの取材
バックエンド側の知識が全くなく、プロジェクト進行に限界を感じるジュニアフロントエンド開発者
GraphQL / BFFを練習したいフロントエンド開発者と就学者
前提知識、
必要でしょうか？
ReactJS
Typescript
32,334
受講生
671
受講レビュー
393
回答
4.8
講座評価
11
講座
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: 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. Intro
04:17
2. クライアント環境設定/ルータ処理
09:33
3. 商品リストページの作成
20:05
5. GNB / 1日目仕上げ
08:22
6. MSW(モックサービスワーカー)
17:07
7. 問題のあるルートライブラリの削除
02:27
8. カート mock API
09:07
10. 2日目仕上げ
02:28
講座掲載日:
最終更新日:
受講レビュー
全体
15件
4.8
15件の受講レビュー
Lyn受講レビュー 8
∙
平均評価 4.8
- Yoon Geon-ung
受講レビュー 12
∙
平均評価 5.0
- 0S
受講レビュー 5
∙
平均評価 5.0
- Ucopy Theme
受講レビュー 5
∙
平均評価 5.0
- ak
受講レビュー 9
∙
平均評価 5.0
￥2,678
jaenamの他の講座
知識共有者の他の講座を見てみましょう！
![[React / VanillaJS] UI 요소 직접 만들기 Part 2Course Thumbnail](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338045/cover/01k1cvnt514nzd42eadka09p64?f=avif&w=420)
![이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338102/cover/01k1bjkdeb2ap7p4b0vb2fck06?f=avif&w=420)
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]Course Thumbnail](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스Course Thumbnail](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
![Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]Course Thumbnail](https://cdn.inflearn.com/public/courses/324976/course_cover/1355e898-fc20-4579-a88f-82340b849595/netflix-flutter-eng.png?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
