Frontend

[Javascript] Daterangepicker Custom

안녕하세요🙏 개발자 재민콩입니다. 오늘은 daterangepicker 자주사용하는 옵션과, 사용법에 대해 알아보겠습니다. 1. daterangepicker 설치 npm i daterangepicker 2. JQuery를 사용한 daterangepicker 사용법 // 오늘 날짜 데이터 const d = new Date(); const day = d.getDate(); const month = d.getMonth(); $('.custom-daterangepicker').daterangepicker({ // datarangepicker은 기본값으로 자동으로 오늘 날짜를 삽입한다. // 값을 비우고 focus가 없어져도 데이터가 오늘 날짜로 입력되면 해제하기 위해 autoUpdateInput: false 사용..

[Javascript] file drag&drop 제어(dragenter, dragleave, dragover, drop)

안녕하세요🙏 개발자 재민콩입니다. 오늘은 drag&drop을 이용하여 파일을 제어하는 것에 대해 배워보겠습니다. 1. 영역 만들기 먼저 간단하게 HTML과 CSS를 사용하여 file drag&drop 영역을 만듭니다. 2. dragenter, dragleave, dragover, drop event 추가 // jQuery 사용 $(document).on('dragenter', '.upload-box', function() { $(this).addClass('active'); }); $(document).on('dragleave', '.upload-box', function() { $(this).removeClass('active'); }); // dragover 이벤트가 추가돼야 drop 이벤트가 작동합..

[Javascript] 배열(Array) 관련 함수 사용법(push, pop, shift, unshift, splice)

안녕하세요🙏 개발자 재민콩입니다. 이번에는 배열을 사용할 때 자주 사용하는 관련 함수에 대해 알아보겠습니다. 1. Array.push(); // 배열의 마지막에 아이템 추가 var fruits = ['apple', 'banana', 'grape']; var push = fruits.push('cherry'); console.log(push); console.log(fruits); // 출력 결과 4 ['apple', 'banana', 'grape', 'cherry'] 2. Array.pop(); // 배열의 마지막 아이템 삭제 var fruits = ['apple', 'banana', 'grape']; var pop = fruits.pop(); console.log(pop); console.log(fru..