INFINITEスクロール

2週間から3週間行われた個人種目はほぼ終わりました.
ポートフォリオサイトを作る過程だけが残っている.そして.
面接に必要な技術面接も勉強しなければなりません.
その前に、ある項目に書かれているコードを整理したいと思います.記憶より記録がいい.

INFINITEスクロール

ネットワーク、モバイルに不可欠なテクノロジー.その名の通り無限スクロールです
1回のロードではロード時間が長くなり、ユーザーに不便をもたらします.これは、計画に合致するいくつかのデータをロードしてスクロールし、新しいデータをロードできる方法です.

Front

INFINITEスクロールの作成には、スクロールイベントが使用されます.ニットに初めて触れて転がるときに最も一般的な方法かもしれません.白黒を問わず、すぐにコードを記録します.

// pages/index.tsx
import React, { useEffect } from 'react';
import { postsLoad } from '../actions/post';

const Home = () => {
  const { loadPostsMore, loadPostsLoading } = useSelect((state) => state.post)

  useEffect(() => {
    const infiniteScroll = throttle(() => {
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        // loadPostMore true / loadPostsLoading false면 dispatch
        if (loadPostsMore && !loadPostsLoading) {
          dispatch(
            postsLoad({
              lastId,
            }),
          );
        }
      }
    }, 200);
    // 스크롤 이벤트 발생
    window.addEventListener('scroll', infiniteScroll);
    return () => {
      // 메모리 누수로 인한 스크롤 이벤트 지우기
      window.removeEventListener('scroll', infiniteScroll);
    };
  }, [loadPostsMore, loadPostsLoading, lastId, dispatch]);
}

(a)window.scrollY-スクロール回数の値
(b)document.documentElement.clientHeight-現在の画面表示の高さ値
(c)document.documentElement.scrollHeight-ページの合計高さ値
これら3つを用いてINFINITEスクロールを実現した.
簡単に言えば、(a)+(b)>(c)−300の式である.
(c)の全長は1000であり、ここでは−300である.では(c)700です.
では、(a)+(b)が700であればスケジューリングします.
この方法で必要な位置でスケジューリングすることができる.そうすれば、そのスクロール位置で大量のdispatchが実行されます.もちろんパフォーマンスに悪影響を及ぼします.
したがってlodashライブラリのthrottleを使用した.
lodash
最新のJavaScriptユーティリティライブラリは、モジュール化、パフォーマンス、その他の機能を提供します.パパパで
lodashによってJavaScriptとして使用する方法を容易に使用して翻訳することができる.
詳細については、「文書」を参照してください。
ここで使用されるthrottleは、1000(1秒)の時間でコールバック関数および時間を決定することができる.
スクロールする場合は、1秒以内にコールバック関数を実行する必要があります.この機能を使用して、dispatch
不要な部分を防いだ.

最後は2回連続で歌ったようですが、歌は間違いありません.
これは、スクロールによる不要な派遣を防止するという意味ではありません.
動作を実行するには、条件に従って派遣しなければならない.

if (loadPostsMore && !loadPostsLoading) {
  dispatch(
    postsLoad({
      lastId,
    }),
  );
}

loadPostsMore-記事を読み込める状態loadPostsLoading-記事を読み込み中
上記の条件に従って、loadPostsMoreに記載可能な文章があれば、trueの状態を維持し続ける.loadPostsLoadingは、文書をサーバに要求したときにpendingの状態にあることを意味する.デフォルトのステータスはtrueですが、記事を読み込んでfulfilledになると、ステータスをfalseに変更するので、2つの条件を満たすので、記事を読み込みます.
Lastidはどのように使用しますか?
LasIdには、現在読み込まれている記事の最後に読み込まれた記事のid値があります.
backサーバにこの値を要求すると、クエリーとして送信されます.backサーバでどのように行われているかを理解しましょう.

Back

次のルータを最初にロードして実行すると、クエリー・リストに0が送信されます.デフォルト値にスクロールすると、lastIdの値がクエリー・リストに渡されます.では、クエリリストが0より大きい場合、ルータはそれをスクロールと見なしてlastIdより小さいIDの文章をロードします.

// back/routes/posts
router.get('/', async (req, res, next) => {
  try {
    // 초기 조건은 없는 상태
    const where = {};
    
    // req.query가 0보다 클 경우 (즉, 스크롤링 시)에 where에 조건 추가
    if (parseInt(req.query.last, 10) > 0) {
      // 마지막 포스트의 id값 보다 작은 포스트를 불러오기
      where.id = { [Op.lt]: parseInt(req.query.last, 10) };
    }

    // 최초 로드일 때는 order 순으로 9개를 불러온다.
    // 추후 스크롤링 시에는 마지막 id보다 작은 포스트를 order순으로 9개를 불러온다.
    const post = await Post.findAll({
      where,
      order: [
        ['createdAt', 'DESC'],
      ],
      limit: 9,
      
      // ...
      
    });
    res.status(200).json(post);
  } catch(error) {
    console.error(error);
    next(error);
  }
});

これにより、スクロールイベントを用いてINFINITEスクロールが実現される.
スクロールアクティビティは良い方法ではありません...時間が多ければもっと良い方法で実現したい.