세줄코딩

Blob로 파일 다운로드 실행시 type 지정 .rar - application/x-rar-compressed, application/octet-stream .zip - application/zip, application/octet-stream, application/x-zip-compressed, multipart/x-zip //res.data 는 통신 성공 후 response에 지정된 data 이다. let blob = new Blob([res.data], { type: 'application/zip' })// zip 형태로 파일을 다운로드 받게 된다. let url = window.URL.createObjectURL(blob) window.open(url);

단순히 1차원 배열 상태의 데이터를 받는다고 치자. 그런데 이 데이터를 이용해 한 화면에 8개 리스트를 만들어 보여주고 나머지들은 페이지처리한다고 할때 데이터가 담긴 배열을 조금 손볼 필요가 있다. JS /** * [ [...], [...] ] --> 다중배열 형식으로 데이터 만들어줌 * @param targetData * @param rowNm * @param colNm * @returns {Array} */ function multipleArrays( targetData, rowNm, colNm ) { var sort = []; for (var i = 0; i < rowNm; i++) { sort[i] = []; for (var j = 0; j < colNm; j++) { var ln = (i * c..

숫자가 단계적으로 카운트 되는 것을 간만해 작업해 보았다. 핵심은 배열의 Array.prototype.unshift(), Array.prototype.shift() 그리고 setTimeout() 이다. HTML - 테스트 할 숫자 두개정도 준비한다. 0 0 CSS - 폰트사이즈 및 스타일링은 대충 알아서 적절히 한다. .min, .max{line-height:1.4;font-size:30px;font-weight:bold;color:#333;} JS - 카운트 모션 함수와 그 모션이 여러개 일 경우를 감안한 함수를 작성한다. function counterUp( settings ){ var $settings = settings; var $target =$settings.ele; var countUpData..

디바이스 정보 알아내기. 정리가 필요할 듯 ~ //사용법 getDeviceInfo( userAgentCheck() ); function userAgentCheck() { var isIE, isIEver, ieFlag, isEDGE, isChrome, chromeVer, isFireFox, fireFoxVer, isSafari, safariVer, isOpera, operaVer, isMac, isIPhone, isIPad, isIOSver, isAndroid, androidVer, androidMobile, androidTablet, browserInfo, userAgent = window.navigator.userAgent.toLowerCase(); //console.log( userAgent ) //..

html2canvas.js - https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 예전에 저 html2canvas를 이용해 width 값을 입력하면 입력된 값에 맞게 화면 컨텐츠를 캡쳐하는 작업을 한적이 있다. 그에 해당하는 소스이다. 라이브러리를 이용한 거지만 꽤 어렵게 구현했다. 다시 사용될 일이 있을까 하고 생각하니까 급 슬퍼진다. ㅠㅠ ImageCapture.js var ImageCapture=( fu..

디스트럭처링이란 - 객체 구조( structure )를 제거( de ) 한다는 의미가 있다. - 디스트럭처링은 객체의 구조를 분해 후 할당이나 확장과 같은 연산을 수행한다. 자료형에 따라 다음과 같은 방식으로 나뉜다. 1. 객체 디스트럭처링 2. 배열 디스트럭처링 1. 객체 디스트럭처링 - 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용하다. 이렇게 객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당이라고 한다. let { id, name } = { id: 123, name:"gogo" }; console.log(id) // 123 console.log(name) // gogo 디스트럭처링 할당 표현식은 { id, name }과 같다. 디스트럭처링 할당 시 표현식 내부와 id..

1. RxJs 데이터스트림 "데이터 스트림이란 대체적으로 시퀀스 값( 1, 2, 3, 4.....)과 같이 연속된 데이터" 데이터 스트림의 형태는 규칙과 범위의 혼합. 1. 규칙이 있고 제한 범위가 있는 스트림 - 1, 2, 3, 4, 5 2. 규칙이 있고 제한 범위가 없 스트림 - 1, 2, 3, 4, 5...... 3. 규칙이 없고 제한 범위가 있는 스트림 - 1, 12, 55, 102, 201 4. 규칙이 없고 제한 범위가 없는 스트림 - 1, 12, 55, 102, 201...... 형태는 다르지만 연속된 값이라는 공통점이 있다. RxJs에서 데이터 스트림 처리 - 사용자가 키를 입력할 때마다 결과값 처리의 경우. 데이터가 생성되고 생성된 데이터는 연산자에 의해 데이터가 처리되고 나서 구독될지 말..

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷하다. - AsyncFunction : AsyncFunction 생성자는 새로운 async function 객체를 만든다. 자바스크립트에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다. - Promise : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. function resolveAfter2Seconds() { return new Promise(re..