본문 바로가기

잡단한것들/코딩연습장

(23)
배열 원하는 형태로 재조립하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 let arr = [ '1.txt', '1.json', '1.wav', '2.txt', '2.json', '2.wav', '3.txt', '3.wav', '4.txt', '4.json', '4.wav', '5.txt', '5.json', '5.wav', '6.txt', '6.json', '6.wav', '7.txt', '7.json', '7.wav', '8.txt', '8.json', '8.wav', '9.txt', '9.json', '10.txt', '10.json', '10.wa..
Tus프로토콜을 사용한 업로드 const input = document.getElementById('input'); ​ input.addEventListener("change", function (e) { const files = e.target.files; ​ function tusUpload(files) { [].map.call(files, (file, index) => { var upload = new tus.Upload(file, { endpoint: 'http://localhost:5000/uploads', retryDelays: [0, 3000, 5000, 10000, 20000], metadata: { filename: file.name, filetype: file.type }, chunkSize: 8 * 1024 * 1..
file.slice is not a function, 비배열 객체, 유사배열 File 객체를 콘솔로 찍어보면 배열로 표시된다. 하지만 리얼 배열은 아니므로 배열 메서드를 사용할 수 없다. const blob = new Blob([].slice.call(file, from, to)); 위와 같이 []배열에 담아준뒤 slice메서드를 실행 한 후 blob으로 전송하기 위해 다시 blob객체에 담아줬다. 하지만 서버단에 보낸 param정보들을 split하려니깐 또 에러가 나는데 (name || '').split('.').pop(); 다음과 같이 name값이 없으면 빈문자열을 넣어주니 잘 된다. splice는 잘라내기 slice는 부분복사(원본 배열 손상x) * 더 쉬운 방법 Array.from(유사배열객체); Array.from() 메서드는 유사 배열 객체(array-like obje..
Node.js, FormData => multer모듈로 업로드 하기 client document.getElementById("filepicker").addEventListener("change", e => { menuVal.checked = false; let output = document.getElementById("listing"); let files = e.target.files; for (let i = 0; i { let percentage = (e.loaded * 100) / e.total; let currentPercentage = Math.round(percentage); console.log(currentPercentage + "%"); setProgress(currentPercentage ); }, headers: { 'Content-Type': 'mu..
웹브라우저에서 녹음을 해보자 MediaDevices.getUserMedia() Int16Array blob int16Array blob객체 활용하기 Document record stop const record = document.querySelector(".record"); const stop = document.querySelector(".stop"); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { console.log("getUserMedia supported."); navigator.mediaDevices.getUserMedia( // constraints - only audio needed for this app { audio: true, } ).then(function (stream) { //Success CallBack c..
Dummy JSON Data https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of Dec 2020, serving ~1.8 billion requests each month. jsonplaceholder.typicode.com http://teamaqua.github.io/JSONTest/ JSON Test by teamaqua JSON Test.com JSON Test.com is a testing platform for programs utilizing JavaScript O..
Color 모듈 만들기 색상 출처: http://yeun.github.io/open-color Open Color Color scheme for UI design yeun.github.io const palette = { gray: [ '#f8f9fa', '#f1f3f5', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#868e96', '#495057', '#343a40', '#212529', ], red: [ '#fff5f5', '#ffe3e3', '#ffc9c9', '#ffa8a8', '#ff8787', '#ff6b6b', '#fa5252', '#f03e3e', '#e03131', '#c92a2a', ], pink: [ '#fff0f6', '#ffdeeb', '#fcc2d7', '#faa..
lodash를 이용한 scroll 이벤트 https://cdnjs.com/libraries/lodash.js lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A utility library delivering consistency, customization, performance, & extras. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it fa..