Frontend

[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..