javascript3 위젯을 옮겨도 새로고침하면 제자리, GridStack 위젯을 옮겨도 새로고침하면 제자리관리 대시보드에 차트와 KPI를 칸막이로 넣으면, 사용자는 자기 자리에 두고 싶어 합니다. GridStack은 12칸 그리드에서 드래그·리사이즈를 제공합니다. 문제는 라이브러리가 자리를 기억하지 않는다는 점입니다. 저장을 안 하면 다음 진입에 초기 배치로 돌아갑니다.JSP 화면에서도 그대로 붙입니다. React 래퍼가 없어도 됩니다. 다만 차트 라이브러리와 같이 쓰면, 칸 크기가 바뀐 뒤에 차트를 다시 그리지 않으면 깨진 그림이 남습니다.레이아웃만 저장한다save(false)는 위치와 크기만 줍니다. 위젯 안의 HTML까지 직렬화하지 않습니다. 내용은 매번 API로 채우고, 자리만 localStorage에 두면 됩니다. 계정마다 서버에 저장할 수도 있지만, 개인 PC 배치.. 2026. 8. 25. 새로고침 없이 메뉴만 바꾸게, JSP를 SPA처럼 메뉴를 누를 때마다 화면이 깜빡이면관리 화면이 JSP면, 메뉴를 누를 때마다 레이아웃까지 다시 그리는 일이 흔합니다. 사이드바, 헤더, 세션 타이머가 한순간 사라지고 다시 뜹니다. 사용자는 "느리다"고 느끼고, 실제로는 같은 HTML 껍데기를 매번 받고 있는 겁니다.React나 Vue를 새로 깔 수 있으면 라우터에 맡기면 됩니다. 이미 JSP + jQuery로 화면이 돌아가고 있으면, 그 스택을 유지한 채 가운데만 갈아끼우는 쪽이 현실입니다. 가상 스크롤을 붙였던 것과 같은 이유입니다. 라이브러리를 더하기 어려운 화면에, 작은 규칙을 하나 두는 겁니다.껍데기는 두고 가운데만 받는다첫 진입만 전체 레이아웃을 그립니다. 이후 메뉴 클릭은 전체 문서가 아니라, 본문 조각만 요청합니다. 서버는 같은 JSP를 두.. 2026. 8. 25. 10만 행도 버벅이지 않게, Vanilla JS 가상 스크롤 왜 테이블이 멈추나관리 화면에서 목록이 몇만 건만 되어도 브라우저가 버벅입니다. 원인은 거의 같습니다. 안 보이는 행까지 전부 DOM에 그리기 때문입니다.행 5만 개를 innerHTML로 한 번에 붙이면 노드가 수십만 개가 됩니다. 스크롤할 때마다 레이아웃과 페인트가 전체를 다시 계산합니다. AG Grid나 React Virtualized를 쓸 수 있으면 편하지만, JSP + jQuery 화면에서는 그 스택을 새로 깔기 어렵습니다.그래서 라이브러리 없이, 화면에 보이는 구간만 그리는 엔진을 만들었습니다. 아래 화면은 더미 주문 데이터 5만 건입니다. 배지는 전체 건수와 지금 DOM에 실제로 있는 행 수입니다. 핵심은 스페이서 두 개가상 스크롤은 화려한 기법이 아닙니다. 스크롤 높이는 전체 데이터처럼 보이.. 2026. 8. 24. 이전 1 다음
