[Assignment 2回顧録]氏カメル-商品照会履歴とフィルタリング

9042 ワード

钳机能实装コード


🔗 Github


🔗 链接的配置


🔗 机能固有的视频链接


🔗 ピグマリンク


👊 React Classコンポーネントとして開発


直接実施:

  • 全ページ共通コンポーネント寸法と造形
  • ブランドリストフィルタと興味のないリストフィルタ
  • 課題完了後の回顧内容


    🔰 チームプロジェクト、初期設計と機能分担が重要


  • 課題はイメージがなく、隊員たちは慌てていた.最初の課題のように、イメージがあればそのまま見てもいいのですが、文章を読んだり身につけたりして画面に機能が含まれているので、それぞれ考え方が違います.

  • 夜の時間を利用して、それぞれの読む内容によって、隊員たちと整理しました.南珠はPigmaを使って指导方针を制定し、その中でメンバーたちがどのように画面に描くか、机能がどのように区分されるか、一泻千里!決まりました

  • 玄燦とともに「商品照会履歴書ページ」を開発することにした.1回目の設計では十分にコミュニケーションをとり、ピグマで原型を作り、機能を分担するので、プロジェクトは順調に進めることができます.
  • 🔰 LocalStorageでは階層管理も可能です


  • 今回の課題の開発は特に遅く,classコンポーネントとして開発する必要があるという指摘もある.
    本ではclassコンポーネント/ライフサイクルを何度も読みました.でも今開発成功能素子かな~!このような結論の下でclassコンポーネントだけでプロジェクトを開発した経験はない.

  • 以下は課題終了後,他のチームが作成したコードを良いコードとして紹介して入れる.
    LocalStorageで保存するとは思わなかったので、classでloadを管理するのは、本当に大変でした…!これでもいい…!
  • export default class Storage {
      constructor(title) {
        this.title = title;
      }
    
      save = (list = []) => {
        const obj = {
          data: list,
          timestamp: new Date().getDay(),
        };
    
        if (!localStorage.getItem(this.title)) {
          localStorage.setItem(this.title, JSON.stringify(obj));
        } else {
          let previousTime = JSON.parse(localStorage.getItem(this.title))?.timestamp;
          let currentTime = new Date().getDay();
    
          if (previousTime !== currentTime) {
            return localStorage.clear();
          } else {
            return localStorage.setItem(this.title, JSON.stringify(obj));
          }
        }
      };
    
      load = () => {
        return JSON.parse(localStorage.getItem(this.title))?.data;
      };
    }

    🔰 URLデザイン


  • 次のリンクのように商品情報値全体に渡す必要はありません.prod 4も必要ありません.
    ID値そのものだけを簡潔に伝える.
    http://localhost:3000/productdetail/prod4/ナイキ%20コート%20黒%20 L/ナイキ/6000/false
    http://localhost:3000/productdetail/4

  • この部分については、プロジェクトの進行中に誰かが言及したが、自信がなかった.上記のように情報値を使ったことはありませんが、私が正しいのか間違っているのか、そして私が担当している部分ではないので、意見を出すときは消極的です.❭と❌を明確に区別できる開発者になる!
  • 🔰 Git Branchの管理

  • 支社によれば、機能開発後の滞留作業を効率的に行うことができるはずです.
  • ブランチ
  • を作成
  • 分岐機構に機能開発(commit)
  • を蓄積する.
  • 分岐に
  • をプッシュする.
  • 要求
  • を送信する.
  • 合併
  • 🔰 コードのメンテナンスと簡潔性を常に考慮して再構築します!


  • 一緒に協力して開発して、やはり誰かが見逃した場所を探してくれた.
    もちろん間違いですが、変数名はこれがもっといいはずです...!これはこの方法で試してみてはいかがでしょうか…!などは自由に話し合い、助け合って進めることができます.

  • 特に最終日に再包装するときはif-else文の使用を減らすように努力し、このコードを初めて見た人の心で読むことが重要であることに気づきました.
  • 👀 残念と解決策


    開発日程は以下の通りで、時間が経つのは早いですね.
    (私たちのメンバーが朝目が覚めると、グダ町で午前4-5時まで一緒に働いていても...)
  • 木:設計と図面
  • 金:開発機能分担内容
  • 土曜日:コード終了後に配置し、README
  • を作成する
    まず、それぞれの機能配分内容を開発するのが1位で、提出日にとどまり、再構築する時間がありましたが、他の人のコードを1つずつ見る時間がありませんでした.😢
    (提出してから、余裕を持ってコメントしました.)
    一緒にプロジェクトをすると同時に体力管理も必須!