728x90
반응형

Front/JS & jQuery 454

[js][datatables] Scroller 플러그인

DataTables의 Scroller 플러그인은 대량의 데이터를 처리할 때 성능을 향상시키기 위해 사용되는가상 스크롤(Virtual Scrolling) 기능입니다.즉, 수천~수만 건의 데이터가 있어도 브라우저에 실제로 렌더링되는 행의 수를 제한하여 빠르게 스크롤할 수 있게 해줍니다. 🔍 Scroller 플러그인 핵심 특징항목설명목적수천~수만 건의 대용량 데이터를 효율적으로 렌더링렌더링 방식화면에 보이는 영역만 실제 DOM에 표시 (Virtual rendering)스크롤 바 생성scrollY 높이를 기준으로 세로 스크롤 생성성능 향상전체 데이터를 클라이언트에 불러오더라도 실제 렌더링은 필요한 부분만 처리 ✅ 사용 방법1. HTMLhtml복사편집 번호 이름 직책 ..

Front/JS & jQuery 2025.05.31

[js][ECharts] 데이터 명이 같아도 다른 데이터이면 다른색으로 표시 (파이차트)

ECharts 파이 차트에서 이름(label)이 같은 경우 같은 색상으로 표시되는 이유는,ECharts가 내부적으로 name 값을 기준으로 색상을 매핑하기 때문입니다.즉, data: [{name: 'A', value: 100}, {name: 'A', value: 200}] 처럼 name이 동일하면 같은 색상을 자동으로 지정합니다. ✅ 해결 방법: name을 고유하게 바꾸고, label에서는 다시 원래 이름으로 보이게 설정const rawData = [ { name: 'A', value: 100 }, { name: 'A', value: 200 }];// 실제 표시할 이름은 label에서 처리하고,// 내부 name은 유일하게 만들어줍니다.const dataList = rawData.map((item, ..

Front/JS & jQuery 2025.05.28

[js] sessionStorage.setItem("document.referrer", '');

sessionStorage.setItem("document.referrer", ''); sessionStorage에 "document.referrer" 라는 키에 빈 문자열 '' 값을 저장합니다.하지만 document.referrer는 브라우저가 제공하는 읽기 전용 속성이라서 이런 식으로 sessionStorage에 저장한다고 해도 실제 document.referrer 값을 바꾸는 효과는 없습니다.→ 즉, 효과 없는 코드일 가능성이 높습니다. document.referrer 와 sessionStorage.setItem("document.referrer", '') 의 차이와"읽기 전용(read-only)" 속성에 대해 자세히 설명드리겠습니다. ✅ 1. document.referrer란?document.r..

Front/JS & jQuery 2025.05.22

[js] 문자열 추출 split/ slice

slice와 split은 모두 문자열에서 부분 값을 추출할 수 있지만사용 목적과 상황에 따라 선택이 달라짐. ✅ 요약 비교항목slicesplit목적위치 기반으로 부분 문자열 추출구분자 기반으로 문자열 분리반환값문자열 (String)배열 (Array)성능일반적으로 더 빠름구분자가 많으면 느릴 수 있음유용한 경우시작/끝 위치를 알고 있을 때특정 문자/문자열로 나눌 때 (예: CSV 등) 🔍 예제 비교: mrStm = "mrStm"일 때1. split 사용let mrStm = "mrStm"; let mrS = mrStm.split("Tm")[0]; // "mrS"장점: "Tm"이라는 구분자 기준으로 나눌 수 있어서 가변 길이 문자열에도 적합단점: 구분자가 없으면 예외 처리 필요 2. slice 사용let ..

Front/JS & jQuery 2025.05.14

[js] dropzone chunking, forceChunking

✅ chunking: true설명: 업로드할 파일을 **여러 개의 작은 블록(청크)**으로 나누어 서버로 전송하겠다는 설정입니다.용도: 큰 파일을 업로드할 때 전체를 한 번에 보내지 않고 일정 크기(기본 2MB, chunkSize로 조절 가능)로 나눠서 보냅니다.장점:네트워크 오류 발생 시 전체가 아닌 실패한 청크만 재전송 가능.대용량 파일 업로드 안정성 향상.✅ forceChunking: true설명: 파일 크기와 관계없이 무조건 청크 방식으로 업로드하게 강제합니다.기본 동작과 차이: chunking: true만 설정했을 경우, Dropzone은 기본적으로 설정된 chunkSize보다 작은 파일은 한 번에 전송합니다.그러나 forceChunking: true를 사용하면 작은 파일이라도 청크로 쪼개서 전..

Front/JS & jQuery 2025.05.13
728x90
반응형