Frontend/Javascript

[Javascript] Html video currentTime 수정 불가 해결

안녕하세요🫶 개발자 재민콩입니다! 이번엔 동영상 강의 사이트 개발 중 겪었던 오류에 대해 포스팅을 진행하려고 합니다. 해결은 됐지만, 더 나은 방법이 있는지 혹은 잘못된 지식인지 현명한 개발자분 지적 부탁드립니다🙇🏻‍♂️ 발생된 문제는 video 강의를 업로드하고 사용자단에서 video를 불러올 경우 progress로 플레이 타임을 변경할 경우 시작으로(0초)로 돌아가고, Javascript로 currentTime을 수정할 경우에도 같은 결과가 나왔습니다. 다만, Safari에서는 정상적으로 작동하고, firefox는 일부분, 제외 다른 브라우저에선 오류가 났습니다. 생각해 본 오류 이유로는 video를 load 하는 과정에서 문제가 있었던 것 같다고 결론을 내리고, video를 미리 로드하거나, 다른 ..

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