最初のアイテム[ページの非表示とクローン]

13328 ワード
テキストリンク

📌プロジェクトの概要


隠れた達人、隠れたペヒはクローン人に選ばれた.実は最初から2人のプレイヤータイプがあるのは難しいと思っていましたが、学ぶべきことはたくさんあると思います.また,最初のプロセスDBモデリングから困難に直面した.
今回のプロジェクトでは、会話時間に行われるショッピングモールとは少しコンセプトが異なり、香菜を商品として提供するという観点が近い.

📌使用するテクノロジー

  • Front : React, sass, css module
  • Back :Node, Express, Mysql, jwt, prisma, cors, routes, Bcrypt
  • Common : Github, Slack

    • 📌実装機能と役割

  • Loginページ機能実装[Frontend]
    ✔入力値の様式、inputウィンドウ下部の提示語により変化
    ✔AbledButtonをクリックしてホームページをナビゲート
  • エントリーレベルAPI実装[Backend]
    ✔postメソッドを使用します.APIは、名前、電子メール、およびパスワードをデータベースに格納するための
    • を実装する
  • 上級者検索リストAPI実装
    GETメソッドを使用します.データベース内のPrismaClientを使用して、複数のテーブル内の特定のカラムのみを抽出するAPIを実装します.
    1000 Queryパラメータによるフィルタリング

    📌紹介と創作画面


    https://github.com/wecode-bootcamp-korea/justcode-4-1st-omm-front .readmeで表示できます.

    📌困難なコード


    入力リストのAPI(orm)
    const search = await prisma.masters.findMany({
      select: {
        name: true,
        intro: true,
        work_experience: true,
        reviews: {
          select: {
            id: true,
            comment: true,
            grade: true,
          },
        },
      },
    });
    上級者リストAPIを実装する際、ORM方式で複数のテーブルに特定コラムのみをインポートするコードが作成され、最初はUserTableでサブテーブルMasterにコンテンツがない場合は空の配列として出力される.この問題を解決するためにPrisma公式ページを見つけ,除外コードを用いた.
    where: { NOT: [{ master: null }] }
    また,この過程で表関係の誤り点が見つかり,1対1から1対1に変更された.その後、QueryParameterを使用してフィルタリングする必要があります.難しいですが、チームメンバーに質問して多くの例を見たので、構造を理解し、if文を使用してフィルタリングが完了したAPIを作成することもできます.
    const getMasters = async (search) => {
  const { addressId, lessonId, take } = search;
  let data = {};
  data = {
    take: Number(take),
    select: {
      id: true,
      name: true,
      intro: true,
      master_image: true,
      reviews: {
        select: {
          id: true,
          comment: true,
          grade: true,
          users: {
            select: {
              id: true,
              name: true,
            },
          },
        },
      },
    },
  };
  if (addressId === "null" && lessonId === "null") {
    return await prisma.masters.findMany(data);
  } else if (addressId !== "null" && lessonId === "null") {
    data.where = {
      detailAddress: {
        id: Number(addressId),
      },
    };
  } else if (addressId === "null" && lessonId !== "null") {
    data.where = {
      mastersCategories: {
        some: {
          lessonCategories: {
            id: Number(lessonId),
          },
        },
      },
    };
  } else {
    data.where = {
      detailAddress: {
        id: Number(addressId),
      },
      mastersCategories: {
        some: {
          lessonCategories: {
            id: Number(lessonId),
          },
        },
      },
    };
  }
  return await prisma.masters.findMany(data);
};

    🎁振り返る🎁


    今回チーム形式で行われたプロジェクトを通じて、一緒に行うとき、FrontとBackがお互いに必要な部分を明確に話し、協調する過程がどれほど重要かを認識しました.Query parameterはフロントにどのような変数を追加し、リストページにいくつかのロットに分けて商品を送信し、協議する必要があります.
    また,最初からページのパスを決定することで,後でナビゲーションパスを複数回変更する作業量を減らすことができる.それだけでなく、フロント、バックグラウンドにかかわらずgitinoreに入るコンテンツを先に特定し、コンテンツが変化したときに迅速に共有することがプロジェクトの進行にとって非常に重要です.
    今回は比較的簡単なページとAPIを担当し、復習に重点を置き、フロントとバックグラウンドで行い、prisma内蔵関数やフィルタリング方法など予想外のことを試してみることができます.
    私の知る限りでは、今の仕事の中で、重要なのは規定の期限内に責任のある仕事をすることです.このプロジェクトを行う過程で、日常準備会議、印刷計画会議を行う時間を決めたので、独自にタスクを行う場合よりも、時間通りにタスクを遂行するためにさらに努力しました.
    この点では、毎日、毎週チームメンバーに進捗状況を伝えるよりも、本人を励ますことができます.
    • データ構造計画ステップ、メソッドの定義
    Qtコンパイルエラー