본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript74

Jquery when 사용(Jquery Promise, 순서있는 ajax) Jquery에서 ajax를 활용하여 데이터를 받아오는 기능은 어렵지 않다. 아래의 ajax구조는 흔히 사용되는 기본구조이다. $.ajax({ url: 'test.json', type: 'get', success: (result) => { console.log(result); }, fail: (error) => { console.log(error); } }); 만약 이러한 ajax를 한번이 아니라 여러번 통해서 서버에서의 정보를 가져오는데, 순서를 보장받게 하려면 콜백 형식으로 코드를 만들던가 아니면 Promise를 사용한다. 콜백형식으로 만들면 코드가 너무 복잡하여...Promise를 사용하는 경우가 대부분이다. 아래의 코드는 프로미스를 활용한 코드이다. new Promise( (succ, fail)=>.. 2020. 4. 1.
파셀(parcel)을 활용하여 함수, 변수를 export 하기 (parcel export function) 파셀을 통해서 빌드된 함수나 변수를 사용하는 방법을 소개합니다! 파셀을 사용하다보면 함수나 변수를 export해서 다른 웹에서 라이브러리처럼 사용해야되는 경우가 종종 존재 합니다. 그럴때는 빌드할 때 옵션과 export를 통해서 쉽게 해결 할 수 있습니다. 백문이 불여일견! 먼저 만들고 있는 js파일에서 필요한 내용을 외부에서 사용한다고 가정하여 보겠습니다. 아래와 같은 js파일을 만들었습니다. module.export를 통해서 해당 Json데이터, 함수를 외부로 export해준다고 해 주어야 합니다. var _innData = 'abcd'; //해당 값은 외부에서 사용 할 수 없다. module.exports.DATA = { //외부에서 사용가능하도록 module.exports를 통해서 외부로 전달한다.. 2020. 2. 28.
Javascript를 활용하여 데이터(배열)를 테이블로, 테이블 태그를 엑셀로(Javascript make excel file) sheetjs를 활용하면 간단하게 배열같은 데이터를 테이블 테그로 만들수 있다. https://sheetjs.com/ 해당 라이브러리를 사용하면 XLSX라는 객체를 통해서 다양한 기능을 사용 할 수 있다. read로 시작하는 함수는 데이터를 읽을 때 사용되며, write로 시작하는 함수는 데이터를 쓸 때 사용된다. 정말 직관적인 sheet_to_html 함수는 HTML에 데이터와 옵션을 함께 추가하여 웹에서 표를 그릴 때 사용된다. 아무튼!! 요 사이트에서 해당 라이브러리를 받은뒤에 배열값을 sheet_to_html 함수 사용을 통해서 멋지게 데이터를 그려준다. 위 소스코드를 실행하여보자. 코드 내용도 별로 어렵지가 않다. 여기에 XLSX 객체가 가지고 있는 writeFile 이라는 함수를 사용하면 데이.. 2020. 2. 27.
Javascript 화면 캡쳐, Javascript screen shot, Javascript screen capture [html2canvas] 브라우저에서 화면의 모습을 캡쳐하려면 html2canvas라는 오픈소스 라이브러리를 사용하면 구현하기 매우 간단합니다. https://html2canvas.hertzen.com/ 먼저 조금 철(?)지난 소스코드 사용방법 입니다. function click(){ html2canvas( document.querySelector('#대상') , { onrendered: function(canvas) { saveAs(canvas.toDataURL(), '이름.png'); } }); } function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = ur.. 2020. 1. 22.
Javascript json array loop, for (자바스크립트 json 배열 반복문) Object for Object loop * 일반 배열에서의 반복문 1. for in var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; for(idx in array){ console.log(array[idx]); }; 2. 단순한 for var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; for(i=0;i < array.length;i++){ console.log(array[i]); }; 3. forEach var array = [ {text:'abcd',number:1234}, {text:'efg',number:5678} ]; array.forEach(function(data, idx){ conso.. 2020. 1. 21.
Javascript 전개 연산자(... 문법, dot dot dot, Spread operator tricks) 자바스크립트에서 간혹 점 3개로 만들어진 문법을 볼 때가 있다 ->... 가령 요런코드가 있다고 하여보자. function printer(...arg){ console.log(arg); } printer(1,2,3,4,5); 해당 코드를 실행하면 아래 사진처럼 배열이 출력이 된다. 그러면 숫자 1을 넣어보고 아무런 값도 넣지않아보자. 마치 자바에서의 가변인자처럼 사용이 가능하다! 또한 불변데이터 패턴(Immutable data pattern)에서도 사용된다. 아래코드를 보면 쉽게 이해할 수 있다. var a = [3,4,5]; var b = a; a.push( 6 ); //a 배열에 6을 넣는다. console.log(a); //3,4,5,6이 출력된다. console.log(b); //3,4,5,6이 .. 2020. 1. 10.