Conversation
|
| * 타켓요소가 존재 x, IntersectionObserver 가 지원하지 않는 브라우저일경우 | ||
| * TODO: IntersectionObserver 가 지원하지 않는 브라우저이면 대응 방안 적용 | ||
| * */ | ||
| if (!targetRef.current || typeof IntersectionObserver === 'undefined') { |
There was a problem hiding this comment.
IntersectionObserver polyfill을 추가해서 적용하시면 됩니다. (링크)
| }; | ||
|
|
||
| return ( | ||
| <div className={`w-full h-full ${className}`}> |
There was a problem hiding this comment.
next/image처럼 뷰포트에 표시됐을때 이미지를 로드해오도록 하고싶다면 next/image의 기능을 더 인터페이스를 더 사용해도 괜찮겠죠
예를들면 next/image는 widht, height를 받도록 해서 Layout Shift를 방지하는걸 만드는데 여기도 그렇게 하면 좋겠죠.
preload도 한 번 구현해보면 좋겠죠
There was a problem hiding this comment.
preload를 그냥 사용하면 lazy load가 하는 의미가 없으니까 intersection observer를 이용해서 뷰포트에 표시되기전에 rootMargin 등을 활용해서 스크롤에 따라 미리 불러올 수 있도록 하면 되겠죠
There was a problem hiding this comment.
js로 preload 기능을 만들고 실패했을 때 retry를 하는걸 만들어보면 좋겠죠
retry count는 기본값은 3으로 하되 개발자가 옵션으로 선택할 수 있게 만들어보면 좋을 것 같습니다.
| }; | ||
| const handleImageError = () => { | ||
| setIsError(true); | ||
| }; |
There was a problem hiding this comment.
이 컴포넌트에서도 에러가 발생했을 때 바로 error를 처리하기보다 retry기능을 만들어보면 좋을 것 같아요
| return ( | ||
| <div className={`w-full h-full ${className}`}> | ||
| {!isImageLoad && !isError && <div className="w-full h-full bg-gray-300 animate-pulse" />} | ||
| {isError && <div className="w-full h-full bg-gray-300 flex items-center justify-center text-gray-500">Error</div>} |
There was a problem hiding this comment.
에러가 발생하면 단순하게 error를 보여주기보다 placeholder 이미지를 보여주면 더 좋겠죠?
그리고 reload하는 버튼을 넣어서 재요청을 할 수 있도록 만드는 것도 좋을 것 같아요
🔎 작업 내용
🚨이슈 사항
🍉 작업 영상
2024-12-31.4.36.40-1.mov