[js] 객체의 구조 분해 할당 const user = { name: "Alice", age: 25 };const { name, age } = user;console.log(name); // "Alice"console.log(age); // 25객체는 키 이름 기준으로 할당됩니다.변수 이름을 바꾸고 싶을 땐 이렇게 씁니다:const { name: userName } = user;console.log(userName); // "Alice" Front/JS & jQuery 2025.06.13
[js] 배열의 구조 분해 할당 const arr = [10, 20, 30];const [a, b, c] = arr;console.log(a); // 10console.log(b); // 20console.log(c); // 30 배열의 순서에 따라 변수에 값이 할당됩니다.필요 없는 값은 생략할 수도 있어요:const [x, , z] = [1, 2, 3];console.log(x, z); // 1 3 Front/JS & jQuery 2025.06.12
[jQuery][multiselect] 기존 멀티셀렉트 완전 초기화 $('#yourSelectId').multiselect('destroy');🎯 정리멀티셀렉트 "다시 적용" 핵심은:destroy() 또는 초기화옵션 재설정다시 .multiselect() 적용 Front/JS & jQuery 2025.06.01
[js][datatables] Scroller 플러그인 DataTables의 Scroller 플러그인은 대량의 데이터를 처리할 때 성능을 향상시키기 위해 사용되는가상 스크롤(Virtual Scrolling) 기능입니다.즉, 수천~수만 건의 데이터가 있어도 브라우저에 실제로 렌더링되는 행의 수를 제한하여 빠르게 스크롤할 수 있게 해줍니다. 🔍 Scroller 플러그인 핵심 특징항목설명목적수천~수만 건의 대용량 데이터를 효율적으로 렌더링렌더링 방식화면에 보이는 영역만 실제 DOM에 표시 (Virtual rendering)스크롤 바 생성scrollY 높이를 기준으로 세로 스크롤 생성성능 향상전체 데이터를 클라이언트에 불러오더라도 실제 렌더링은 필요한 부분만 처리 ✅ 사용 방법1. HTMLhtml복사편집 번호 이름 직책 .. Front/JS & jQuery 2025.05.31
[js][datatables] datatables 높이 조절 CSS로 테이블 높이 조절하기가장 간단한 방법은 DataTable을 감싸고 있는 container에 height를 지정하고, scrollY 옵션을 설정하는 것입니다. $('#example').DataTable({ scrollY: '500px', // 또는 '60vh'처럼 viewport 기준도 가능 scrollCollapse: true, paging: false // 필요시}); Front/JS & jQuery 2025.05.30
[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
[jQuery] 모달 중복 열림 방지 ✅ 방법 1: 플래그 변수 사용let isModalOpen = false;$("#createReport").on('click', () => { if (isModalOpen) return; isModalOpen = true; const modal = new TaskReportCreateModal(); modal.popup(); $(modal).one('save-complete', () => { isModalOpen = false; location.reload(); }); // 모달이 닫힐 때 플래그 초기화 (필요한 경우) $(modal).one('hidden', () => { isModalOpen = false; });}.. Front/JS & jQuery 2025.05.12