codestates / codestates/triplus

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

Offen
#331 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.