최적화

📜 서론이번 포스팅에서는 지난번 리스트 가상화 기법에 이어 또 한번의 최적화를 달성한 경험을 다뤄보려 한다. 안 그래도 사이트 접근 시 리뷰들을 보려 할 때 발생하는 약간의 딜레이가 상당히 불편했는데, 이번 사례를 통해 렌더링 시간이 대폭 줄었고, UX적인 측면에서도 상당한 개선이 있었다.🌊 네트워크 폭포수네트워크 폭포수(Network Waterfall) 는 여러 네트워크 요청이 순차적으로 진행되는 현상이다. 각 요청은 이전 요청의 완료를 기다린 후 시작되어, 마치 폭포가 흐르는 것처럼 보인다. 이러한 순차적 요청 방식은 데이터와 자원이 제때 불러와지지 않아 페이지 렌더링 속도를 늦추며, 사용자 경험에 부정적인 영향을 미친다. 특히 CSR 환경에서 컴포넌트 단위의 데이터 페칭이 지연되면, 전체적인 페..

📜 서론저번 포스팅에서 많은 양의 컨텐츠를 로드할 경우 어떤 이슈가 생긴다고 했었다. 해당 페이지에서 데이터를 로드한 뒤, 다른 페이지로 이동했다가 다시 돌아올 때 딜레이가 발생하는 문제다. 이번 포스팅에서는 이 이슈를 어떻게 해결했는지 설명해보고자 한다.💬 이슈 설명무한 스크롤을 통해 리뷰 카드 수십 개를 로드해 렌더링 후, 다른 페이지로 갔다가 다시 해당 페이지로 돌아오면 위와 같이 딜레이가 심하게 걸린다. 해당 현상은 로드 된 리뷰 카드 개수에 비례해 더 심해지는 것을 확인할 수 있었다.🔍 원인 분석 및 해결 과정일단 리뷰 카드 개수에 따라 현상이 심해지는 것으로 보아, 서버에서 데이터를 받아오는 것과 상관 없이 페이지 내 DOM 트리가 무거워져서 생기는 문제인 것으로 보인다. 리스트 가상화 ..