angular (2) 썸네일형 리스트형 100만 행 데이터 그리드가 버티는 법, 양축 가상화부터 DOM 풀링까지 100만 행 데이터 그리드가 버티는 법, 양축 가상화부터 DOM 풀링까지IT & AI 뉴스 썸네일대용량 데이터 그리드는 행 몇 개를 덜 그리는 것만으로 빨라지지 않아요. 열 너비 계산, 검색 상태, 편집기, 아이콘, 스크롤 이벤트가 한 프레임 안에서 함께 움직여야 해요. VisuaLeaf 개발자가 MongoDB와 PostgreSQL용 그리드를 약 1년 동안 다듬으며 적용한 최적화 과정을 공개했어요. 1핵심 요약구분핵심왜 볼 만한가요렌더링 범위화면에 보이는 행과 열만 그리는 양축 가상화데이터가 늘어도 DOM 크기를 일정하게 유지할 수 있어요상태 구조원본 데이터와 별도로 표시용 섀도 테이블 구성스크롤 중 타입 판별과 중첩 경로 탐색을 반복하지 않아요스크롤 처리수동적 리스너, 프레임 병합, 버퍼와 히스테리시스.. 버튼 하나로 돌아본 프론트엔드 20년 버튼 하나로 돌아본 프론트엔드 20년AI 뉴스 썸네일2008년 무렵 웹 개발을 떠났다가 지금 돌아오면 `` 하나를 만드는 과정부터 낯설 수 있어요. jQuery, React, TypeScript, Vite, 서버 렌더링, 코딩 에이전트까지 여러 층이 더해졌기 때문이에요. David Poblador의 글은 각 도구가 어떤 불편을 해결하려고 등장했고, 그 해결책이 어떤 새 비용을 만들었는지 한 개의 버튼을 따라가며 보여줘요. 1핵심 요약시기해결하려던 문제뒤따른 비용jQuery와 AJAX브라우저 차이를 줄이고 페이지 일부만 바꿨어요데이터와 DOM 상태를 개발자가 직접 맞춰야 했어요컴포넌트 프레임워크상태에 따라 화면을 선언적으로 그렸어요런타임과 프레임워크 학습 비용이 커졌어요번들러와 고속 툴링모듈, 구형 브라우.. 이전 1 다음
