-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
쓰로틀링 추가, 스피너 초기 지연 설정 #63
Conversation
컴포넌트가 마운트된 후 로딩이 1초 이상 지연될 경우 스피너가 생기도록 수정
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고 많으셨습니다!
useIntersectionObserver({ | ||
target, | ||
onIntersect: ([{ isIntersecting }]) => { | ||
if (isIntersecting) { | ||
setIsDraw(true); | ||
} | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 커스텀 훅은 이제 다른곳에서 사용하지 않는 것일까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
인피니티 스크롤은 여전히 Intersection Observer API 을 사용하기 때문에 커스텀 훅이 사용됩니다!
Intersection Observer API는 특정 요소가 뷰포트에 보이는지 여부에 따라 함수를 실행할 수 있는데, 랜딩 페이지 표지는 디바이스마다 길이가 달라서 이 부분을 일관적으로 처리하기가 어려웠습니다. 따라서 스크롤 이벤트리스너 방식을 사용하되 쓰로틀링으로 성능을 개선했습니다.
반대로 인피니티 스크롤 같은 경우 카드 뷰가 어떤 디바이스든 맞춰서 보이기 때문에 Intersection Observer API를 적용하기 쉬워 그대로 유지했습니다.
<div | ||
ref={setTarget} | ||
className="last-item" | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저번에 봤던 이부분이 지워지는군요
useEffect(() => { | ||
setTimeout(() => { | ||
if (spinnerRef.current) { | ||
spinnerRef.current.style.display = 'flex'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useRef로 이렇게도 사용할 수 있군요
Summary