codestates / codestates/triplus

[Error] 이미지 로딩 지연 에러

オープン
#331 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
0
フォーク
4
PR マージ指標
30日以内にマージされた PR はありません

説明

## 어떤 에러가 발생했나요?
- debounce로 인한 이미지 로딩 지연과 reflow 현상 발생

### 에러가 발생한 폴더
- GuideCard.jsx

### 에러 메시지
- debounce로 인한 이미지 로딩 지연과 reflow 현상 발생

### 에러 원인
- setTimeout으로 scroll 이벤트를 감소시키려고 하였지만, 이는 이미지 지연 딜레이를 발생시킴.
- getBoundingClientRect로 인한 reflow 현상 발생

### 에러 해결 방법
이를 해결하고자 intersectionObserver API로 리팩토링 진행
```
useEffect(() => {
const interObserver = new IntersectionObserver(callback, option);
if (cardRef.current) interObserver.observe(cardRef.current);

return () => interObserver.disconnect();
}, []);
```

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

GuideCard.jsx から始めて、既存の scroll debounce、setTimeout、getBoundingClientRect のロジックを調べます。Issue にある IntersectionObserver の例と比較し、その後、スクロール中の画像読み込みで報告されていた遅延や reflow が発生しなくなっていることを確認します。テストファイルについては言及されていないため、関連するブラウザビューで動作を検証します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
frontend, performance, web-dev
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
58/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。