📜 서론이번 포스팅에서는 지난번 리스트 가상화 기법에 이어 또 한번의 최적화를 달성한 경험을 다뤄보려 한다. 안 그래도 사이트 접근 시 리뷰들을 보려 할 때 발생하는 약간의 딜레이가 상당히 불편했는데, 이번 사례를 통해 렌더링 시간이 대폭 줄었고, UX적인 측면에서도 상당한 개선이 있었다.🌊 네트워크 폭포수네트워크 폭포수(Network Waterfall) 는 여러 네트워크 요청이 순차적으로 진행되는 현상이다. 각 요청은 이전 요청의 완료를 기다린 후 시작되어, 마치 폭포가 흐르는 것처럼 보인다. 이러한 순차적 요청 방식은 데이터와 자원이 제때 불러와지지 않아 페이지 렌더링 속도를 늦추며, 사용자 경험에 부정적인 영향을 미친다. 특히 CSR 환경에서 컴포넌트 단위의 데이터 페칭이 지연되면, 전체적인 페..
📜 서론솔직히 이번 프로젝트에서 가장 힘들었던 부분을 꼽으라 하면 배포 부분이라 할 수 있을 것 같다. 내 손으로 직접 CI/CD 과정을 구축하는 게 처음이었기 때문에 내가 하고 있는 작업이 제대로 될 지에 대한 확신이 없어서 심적으로 더 힘들었던 것 같다. 하지만 결국 해냈죠? 구글링을 통한 자료 조사에는 장사가 없었다.🍃 MongoDB Atlas 연동새로운 Flex Tier를 소개합니다! 온디맨드 버스트 용량과 예측 가능한 청구(월 $30로 제한)를 갖춘 새로운 비용 효율적인 클러스터 티어입니다. Flex Tier는 M2, M5 및 Serverless 인스턴스를 대체하여 MongoDB Atlas의 기능에 대한 전체 액세스와 가변적인 워크로드에 대한 유연한 용량 및 유연한 가격을 제공합니다.일단 이..
📜 서론저번 포스팅에서 많은 양의 컨텐츠를 로드할 경우 어떤 이슈가 생긴다고 했었다. 해당 페이지에서 데이터를 로드한 뒤, 다른 페이지로 이동했다가 다시 돌아올 때 딜레이가 발생하는 문제다. 이번 포스팅에서는 이 이슈를 어떻게 해결했는지 설명해보고자 한다.💬 이슈 설명무한 스크롤을 통해 리뷰 카드 수십 개를 로드해 렌더링 후, 다른 페이지로 갔다가 다시 해당 페이지로 돌아오면 위와 같이 딜레이가 심하게 걸린다. 해당 현상은 로드 된 리뷰 카드 개수에 비례해 더 심해지는 것을 확인할 수 있었다.🔍 원인 분석 및 해결 과정일단 리뷰 카드 개수에 따라 현상이 심해지는 것으로 보아, 서버에서 데이터를 받아오는 것과 상관 없이 페이지 내 DOM 트리가 무거워져서 생기는 문제인 것으로 보인다. 리스트 가상화 ..
📜 서론내가 만든 서비스인 Re|view(제작 도중 올평에서 이름을 바꿨다)의 피드 페이지를 열면 위와 같은 리뷰카드들이 주루룩 나열된다. 유저들이 증가하면 리뷰도 덩달아 많아질 것이기 때문에 렌더링해야하는 리뷰카드의 개수도 엄청 많아질 것이다. 하지만 당연히 그 많은 컨텐츠를 한번에 서버에서 로드해서 렌더링까지 할 수는 없는 노릇이다. 무한 스크롤이 필요한 때다.🔍 문제 정의Tanstack Query(React Query) 쓰는 김에 같은 곳에서 제작한 Tanstack Virtual이랑 Intersection Observer API 조합하면 구현 끝 아님?단순히 생각하자면 위처럼 생각할 수 있다. 하지만 막상 구현하려다 보니 이것 이외에도 생각해야 할 것이 생겼다.다음과 같은 경우는 어떻게 해야할까..
