codestates / codestates/triplus
[Error] 이미지 로딩 지연 에러
- Vorherrschende Sprache
- JavaScript
- Sterne
- 0
- Forks
- 4
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
## 어떤 에러가 발생했나요?
- 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();
}, []);
```
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
Start in GuideCard.jsx and inspect the existing scroll debounce, setTimeout, and getBoundingClientRect logic. Compare it with the IntersectionObserver example in the issue, then verify image loading no longer incurs the reported delay or reflow during scrolling. No test file is mentioned, so validate the behavior in the relevant browser view.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript
- Bereich
- frontend, performance, web-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 58/100