Virtualized List 에 관한 질문이 있습니다.
Virtualized List 강의를 보고 궁금증이 생겼습니다.
이 최적화 방식이 레이지 로드 라고 불리는 웹 최적화 기술인 것 같은데, 인터섹션 옵저버를 바닐라 코드로 구현한 방식이라고 이해하면 될까요? 만일 같은 방식이라면 인터섹션 옵저버를 사용하지 않은 이유가 있나요? 제가 깊이가 부족해서 도움을 얻고자 질문 남겨봐요!!
(이게 들었던 해당 강의로 질문이 가는건지 모르겠네요 뭐가 뭔지..)
답변 1
1
좋은 질문이네요
제가 react-window 코드를 보고 그 아이디어로 구현을 해본 것인데요. 올려주신 질문을 보니까 IntersectionObserver API로 구현이 가능할 것 같네요. react-window를 구현한 개발자가 IntersectionObserver를 모르진 않았을 것 같은데...
제가 한번 구현해보고 장단점을 답글로 남기겠습니다
(해당 강의로 질문이 잘 도착했습니다 😀)
1
IntersectionObserver 로 구현을 해봤습니다. (리포지토리 intersection-observer 에서 확인 가능합니다)
https://github.com/things-not-learn-from-bootcamp/virtualized-list/tree/intersection-observer
우선 최초에 렌더링 할 때 일부만 렌더링 되도록 구현했고 보이지 않을 때 DOM에서 해제하는 것은 구현하지 못했습니다.
말씀하신대로 IntersectionObserver 로도 구현이 가능해보이고 제가 강의에서 구현한 내용은 항상 itemSize를 넘겨줘야 해서 고정된 높이의 아이템들만 렌더링이 가능했는데 IntersectionObserver을 잘 활용하면 유동적인 높이의 아이템도 구현이 가능하겠군요!
경력 어필에 관하여
0
2
1
슬라이드 오타
0
7
0
전체적인 개발에 대해 문의드립니다.
1
26
1
챌린지 시작일 문의
0
23
0
줄바꿈 시 \ 필수인가요?
0
30
2
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
26
2
이력서의 자기 소개를 그대로 자기소개 할때 핵심 매력으로 소개하면 마이너스 일까요?
1
10
2
커리큘럼 문서 제공받을 수 있을까요?
0
24
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
15
1
mission 09-01 을 수행할 수 없어요
0
25
1
outputStyle 설정하는데 어디서 문제일까요?
0
28
3
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
22
2
검은화면
0
31
3
강의교환링크안열려요.....
0
30
2
영상재생에러 [확인부탁드려요!!!]
0
26
2
클로드 채팅에서 코드로 넘어가기
0
41
2
Context API vs Zustand 그리고 Auth
0
38
2
110강부터 따라가기가 힘듭니다...
0
60
2
커서에서 붙여넣기
0
41
2
깃허브 사용시 폴더경로 관련질문
0
29
2
[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축
0
26
2
Automatic batching에 관해 궁금한 점이 있습니다.
0
129
1
쓰레드 관련
1
446
1
useTransition 질문입니다!
1
426
2