[最初のプロジェクト]モナミモアクローン後記

団体購入Webクローンプロジェクトの紹介
国民的ボールペンMONAMOOに挑戦したショッピングモール『MONAMOO』モナモールを選んだ理由は,1)ショッピングモールであるため,登録,会員費,カートなど多様な機能を実現でき,2)思った以上に動画やイメージが感性的であることである.reactとCSSのバランスが良いサイトだと思います.
使用済みテクノロジースタック
👉 GitHubの表示
Front-end

React.js(Class)

React-router

React-slick

Sass

Process

github

Postman

Trello

再表示機能

登録、ログイン/ログアウト

ホームページ(MyCurator、商品検索機能、デザイン要素)

リストページ(新製品/価格別フィルタ機能とページ名)

詳細ページ(ショッピングバスケットの追加、蒸し物カタログの追加、商品コメント)

マイページ(最近見た商品/カート/配送先管理)

私が再現した部分

ローカルストレージを使用して

ログインを実現

正規表現、動的ClassNameを使用してメンバー入力Validation

を実現

React State/Propsを使用してカート

を追加、削除、変更します.

React-Slickライブラリカスタムサイト

記憶に残るハーモニー

  removeCnt = productNum => {
    this.setState(
      prevState => ({
        cartList: prevState.cartList.map(el =>
          el.product_option_id === productNum
            ? { ...el, product_amount: el.product_amount - 1 }
            : el
        )
      }),
      () => this.calPrice()
    );
  };

ショッピングバスケットの商品数を減らすコード.
コードを書く前に、以下の3つの問題があまりよくなかったため、多くの悩み+グーグル化が行われました.
1)多様な商品の中で私が商品をクリックするカウントを減らす方法
2)carListというデータでproduct amountのみを変更する
3)setState完了後にcalPrice()関数を実行する方法
⒱私が商品をクリックするcountだけを減らす方法

el.product_option_id === productNum? 

各製品に固有のインデックス値が使用されます.マイナス記号ボタンをクリックすると、index(productNum)をパラメータとしてユーザーに渡され、複数の商品リストでその指数に一致する商品のみがカウントを調整できます.
「91 cartList」という名前のデータでproduct amountのみを変更する方法
cartListデータのproduct amountというkeyの値を変更したいだけですが、他のキー値を処理するのは難しいので困っています.
Google検索ではsetState関数でprevStateというパラメータを使用できるため、spread 연산자とともにproduct amountにアクセスできます.
ΓcalPrice()関数非同期処理

() => this.calPrice()

商品の数量が変化した場合、変化した数量に基づいて総額を再計算して表示したいのですが、calPrice()が最初に実行され、setStateが実行されるというエラーがあります.
なぜならsetStateは非同期関数であり、setStateの2番目のパラメータにコールバック関数として登録され、実行順序を整理するためである.
プロジェクト期間のメリット

チーム発表が始まったばかりの頃は、チームごとに異なる期待があった.その中で私たちのチームは、正直に言うと、アベンジャーズでもないし、局外者のケリーを期待しているチームでもない.そのためか、私たちのチームはお互いが持っている1の能力を分かち合うためにもっと努力しています.解かなかったので悩んでいたら2時間3時間一緒に悩んでいたメンバーがいたので地道に感謝していますそして、私が担当している部分ではなく、他のメンバーと一緒に悩んで、他のスキルを一緒に学ぶことができて嬉しいです.

窃盗を学び、広告を脱いでコードを始めたが、ネットクローンを作ると同時にマーケティングの疑いから抜け出すことができなかった.2年前からペット用品でポートフォリオを拡大してきたモンミだが、好奇心から企業調査も少なかった.Monamiの事業方向を理解してクローンを作成したのですが、なぜページを構成しているのかという理由が分かったので、クローンももっと面白くできました.

「テイクアウトの民族」を締めくくるMonamimallが重なる出前の常連客としては、検索ラベルがアプリケーションの下部にあることがよくあります.「時々欲しいレストランを検索したいのですが、検索タグが一度に見つからないので不便です」「なぜペミンのような大企業がこのようなスポットライトを逃したのか」.最近見つけた答えは「広告費」だと思います.拝民は加盟業者が受け取る広告費の最大の収益源であるため、より重要なのは食品カテゴリのラベルを通じてより多くのユーザーを引きつけることだ.

その意味で、モナミモアは上端Navbarの順序を少し変えて、モナミフィトラベルをホームページに移動することもできます.モナモールに接続されている人の多くは、文房具を購入するために接続されている人で、彼らにとって少し不便でもモナイトサービスへの自然な流入効果が見られます.

プロジェクト期間中の残念な点

バックエンドとのコミュニケーションは初めてなので、不要なコミュニケーションプロセスが作られたので残念です.
たとえば、データ・フォーマットの作成中に、最初からフロント・バックグラウンドでプロジェクトを決定して行えば、より迅速に完了できますが、バックエンドと各分野の理解が足りないため、2～3回の修正が必要です.2つ目のプロジェクトでは、この点を補足したいと思います.