Skip to content
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

Merged
merged 3 commits into from
Jun 20, 2021
Merged

Conversation

seung-00
Copy link

Summary

  • 랜딩 페이지 커튼 컴포넌트 스크롤 이벤트 쓰로틀링 구현
    • 인피니티 스크롤의 경우 Intersection Observer API를 사용했기 때문에 디바운싱이 불필요하다고 판단되었습니다.
  • 스피너가 포함된 컴포넌트가 마운트된 후 로딩이 1초 이상 지연될 경우에만 스피너가 생기도록 수정

OhSeungYoung added 3 commits June 19, 2021 02:03
컴포넌트가 마운트된 후 로딩이 1초 이상 지연될 경우 스피너가 생기도록 수정
@seung-00 seung-00 requested a review from dididy June 19, 2021 08:05
@seung-00 seung-00 self-assigned this Jun 19, 2021
Copy link
Member

@dididy dididy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고 많으셨습니다!

Comment on lines -92 to -99
useIntersectionObserver({
target,
onIntersect: ([{ isIntersecting }]) => {
if (isIntersecting) {
setIsDraw(true);
}
},
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 커스텀 훅은 이제 다른곳에서 사용하지 않는 것일까요?

Copy link
Author

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를 적용하기 쉬워 그대로 유지했습니다.

Comment on lines -127 to -130
<div
ref={setTarget}
className="last-item"
/>
Copy link
Member

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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useRef로 이렇게도 사용할 수 있군요

@seung-00 seung-00 merged commit c5e2296 into main Jun 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants