Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

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

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

  • 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,338

受講生

671

受講レビュー

393

回答

4.8

講座評価

11

講座

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

48件 ∙ (8時間 1分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

15件

4.8

15件の受講レビュー

  • whe19150746님의 프로필 이미지
    whe19150746

    受講レビュー 8

    平均評価 4.8

    5

    31% 受講後に作成

    Tôi thích nó vì nó giống như một phiên bản nâng cao của bài giảng React. Thật tuyệt khi thử nhiều thứ hơn là chỉ đơn giản.

    • yoongeonung님의 프로필 이미지
      yoongeonung

      受講レビュー 12

      平均評価 5.0

      5

      63% 受講後に作成

      Tôi mới tham gia khóa học đến ngày đầu tiên nhưng nó rất thú vị và tôi đã học được rất nhiều điều, vì vậy tôi thực sự khuyên bạn nên tham gia khóa học này. Các bài giảng và mã hóa nhân bản hiện tại nhàm chán đến mức tôi thậm chí còn ngủ quên, nhưng các bài giảng của Jaenam Jeong, giống như một buổi học, lại rất thú vị! Tôi thực sự khuyên bạn nên làm điều đó và nếu có cơ hội vào lần tới, tôi hy vọng bạn sẽ tạo một khóa học kiểu tương tự dành cho những người mới bắt đầu chưa có khả năng chuyển từ trình độ sơ cấp sang trình độ trung cấp.

      • 0sun님의 프로필 이미지
        0sun

        受講レビュー 5

        平均評価 5.0

        5

        100% 受講後に作成

        Cuối cùng tôi đã cứng đầu! Trước hết, giọng nói của người hướng dẫn rất hay. Bản thân giọng nói đã hấp dẫn đến mức tôi rất bị cuốn hút vào bài giảng. Và... bài giảng này còn nhiều hơn những gì tôi nghĩ. Tôi đã học được nhiều hơn những gì tôi dự định ban đầu!!

        • ucopy님의 프로필 이미지
          ucopy

          受講レビュー 5

          平均評価 5.0

          5

          94% 受講後に作成

          Đó là một bài giảng thực tế.

          • khh23028104님의 프로필 이미지
            khh23028104

            受講レビュー 9

            平均評価 5.0

            5

            27% 受講後に作成

            Tôi thực sự rất thích bài giảng tốt. Tôi đặc biệt ấn tượng với lời giải thích trực tiếp.

            ¥2,694

            jaenamの他の講座

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

            似ている講座

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