📝Day(49)75日間WE Motivation DIARY

8400 ワード
MOTIVATION_DIARY テキストリンク

-プロジェクトの進捗

  • 素子カードで詳細画像を受信・表示する機能を実現
    • gotoopボタンとテキストハイライト機能が追加され、
  • を上に移動できます.

    • - TODAY I LEARN ERROR 🦠


    地図の構成では,
  • 地図を回転する素子に異なる画像,データを送信する必要があるが,同じ画像のみの問題が発見された.
  • fetchで受信したデータを2回mapに転送し、divでもimgの損失の問題が発生することが分かった.
    <script>
{productDetailImg.map(data => {
            const { detailImg } = data;
            return (
              <div>
                {detailImg.map(data => {
                  return (
                    <img
                      className='productDetailImage'
                      key={data.detail_id}
                      alt={data.name}
                      src={data.img}
                      onMouseOver={changeDetailProductImage}
                      onMouseLeave={this.hoverOut}
                    />
                  );
                })}
              </div>
            );
          })}
  </script>

    - HOW TO FIX MY ERROR 💊


    KEYWORDは
  • ERRORを解決した🔑
  • mapは、プライマリイメージ(div)に1回、詳細コンポーネントに1回の合計2回使用されるため、単独でデータを取得することができる.
  • imgではなくdivの背景画像属性により、背景サイズ、繰返し性、位置属性をスケーリングして受信した画像srcに直接入れることもできる.
    • <script>
<div className='detailImgWrapper'>
            <div
              className='productMainImg'
              style={{
                backgroundImage: `url(${productImg})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                backgroundPosition: 'center',
              }}
</div>
            {productDetailImg.map(product => {
              return (
                <ProductDetailCard
                  key={product.detail_id}
                  detailImage={mainImage}
                  name={product.name}
                />
              );
            })}
       </div>
</script>

    -知らない

  • の無限スクロールを学習する前に、スクロールに関するmdnの正式なドキュメントを参照してください.
    • のプロパティと効果

    -学んだこと


    反応中にスクロールイベントによって無限スクロールを実現する方法としては、1>onScrollイベント2>Intersection Observer APIがあるそうです.明日はこの2つを勉強してから、機能の実現を完成します.

    -うまくやっている点と改善すべき点

  • 短いけど寝る前に日記を書いて寝る!よくやった.
  • 現在2時20分、今日は早く寝たいのですが、夜の時間は厳しいようです.明日は家にいるばかりでなく、喫茶店に行きましょう.まずは早起き~

    • -目標および締切日:2021～10-06

  • リストページフーバー機能の簡単な実装を完了する=>1つのコンポーネント
    • のみを実装する.
    終了
  • バックエンドブログ=>ING
    • を続行
  • 回顧録を書きます=>Complete!
    A.余剰機能の学習と実施、無限スクロール
    B.昨日NOTIONで出てきたキーワードを朝簡単に勉強
    C.フロント完了後、再包装前に同行評議を得る
    D.2つのバックエンドの講義を見て、コードを打って、感じを失わないでください.
    • [スパルタ]みんなの書評!
    Windowformフォーム関連データベース記憶、画像読み出し、参照コード