분류 전체보기

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

📜 서론솔직히 이번 프로젝트에서 가장 힘들었던 부분을 꼽으라 하면 배포 부분이라 할 수 있을 것 같다. 내 손으로 직접 CI/CD 과정을 구축하는 게 처음이었기 때문에 내가 하고 있는 작업이 제대로 될 지에 대한 확신이 없어서 심적으로 더 힘들었던 것 같다. 하지만 결국 해냈죠? 구글링을 통한 자료 조사에는 장사가 없었다.🍃 MongoDB Atlas 연동새로운 Flex Tier를 소개합니다! 온디맨드 버스트 용량과 예측 가능한 청구(월 $30로 제한)를 갖춘 새로운 비용 효율적인 클러스터 티어입니다. Flex Tier는 M2, M5 및 Serverless 인스턴스를 대체하여 MongoDB Atlas의 기능에 대한 전체 액세스와 가변적인 워크로드에 대한 유연한 용량 및 유연한 가격을 제공합니다.일단 이..

자바스크립트 표준(ECMAScript)에는 함수 호출 시 인자의 개수에 대해 명시적인 제한이 없지만, 일부 엔진(예: V8)에서는 내부 구현상 함수 호출 시 인자의 개수를 저장하거나 처리하는 방식에 제한이 있을 수 있다.보통 16비트 정수를 인자 개수로 사용하기 때문에 65536(= 2¹⁶)개 이상의 인자를 처리하려 할 경우 런타임 에러가 발생할 수 있다.아래 문제를 풀다가 의도치 않게 알게 되었다.https://school.programmers.co.kr/learn/courses/30/lessons/340212 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.krfunction getMaxDiff(diffs..

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