hooney.log

전 포스팅에서 Chart.js 사용기를 적었는데, 작업하다가 서버에서 Map형태로 보내준 데이터(Javascript에서는 Object로)를 배열로 변환해서 차트의 라벨과 데이터로 사용했다. 단순히 for문을 돌려서 배열로 만들었었는데, 훨씬 효율적인 방법이 있었다. let obj = { A : 'Apple', B : 'Banana', C : 'Coconut' }; let arr = []; let vArr = []; for (let k in obj) { arr.push(k); vArr.push(obj[k]); } console.log(arr); // ['A', 'B', 'C'] console.log(vArr); // ['Apple', 'Banana', 'Coconut'] for ... in 으로 key에 ..

C#코드를 Java로 Converting 작업 중 차트가 있는데, radarChart.aspx로 만들어져 있었다. 나는 화면 쪽은 Javascript로 작업을 하고 있었기 때문에, 저 라이브러리를 사용할 수 없었다. 예전 회사에서 D3.js를 해봤지만, 복잡했던 기억이 있다.(공부를 제대로 안했다..) 그래서 간단하고 사용하기 편한 Chart.js를 사용했다. 일단 공홈에서 라이브러리를 다운받았다. https://www.chartjs.org/docs/latest/ Chart.js | Chart.js Chart.js (opens new window) Installation You can get the latest version of Chart.js from npm (opens new window), the..

모던 자바스크립트 Deep Dive 정리 1. 배열의 생성 1.1 배열 리터럴 // 배열 선언1 const emptyArr = []; console.log(emptyArr[1]); // undefined console.log(emptyArr.length); // 0 // 배열 선언2 const arr = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; - 자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함 가능함. const arr = [ 'string', 10, true, null, undefined, NaN, Infinity, ['nested array'], { object: true }, fun..

모던 자바스크립트 Deep Dive 정리 - 자바스크립트의 함수는 호출될 때, 매개변수로 인수, arguments 객체, this를 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); - 자바스크립트는 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식과 this 바인딩 - 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. - 함수의 호출 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bin..

모던 자바스크립트 Deep Dive 정리 1. 매개변수 기본값 - 함수 호출 시 매개변수 갯수 만큼 인수를 전달하는 것이 일반적 - 매개변수보다 인수의 갯수가 적어도 에러는 발생하지 않고, 그 매개변수는 undefined의 값을 가짐 - 매개변수를 확인할 필요가 있음 // 일반적인 표현 function sum(x, y) { // 매개변수의 값이 falsy value인 경우, 기본값을 할당한다. x = x || 0; y = y || 0; return x + y; } console.log(sum(1)); // 1 console.log(sum(1, 2)); // 3 // 간단한 표현 function sum2(x = 0, y = 0) { return x + y; } console.log(sum2(1)); // ..

모던 자바스크립트 Deep Dive 정리 1. 함수 레벨 스코프(Function-level scope) - 함수의 코드 블록만을 스코프로 인정 - for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조 가능 2. var 키워드 생략 허용 - 암묵적 전역 변수를 남발할 가능성 3. 변수 중복 선언 허용 - 의도하지 않은 변수값의 변경이 일어날 가능성 4. 변수 호이스팅 - 변수를 선언하기 이전에 참조 가능 이러한 단점을 보완하기 위해 var 대신 let, const 사용 1. let 1.1 블록 레벨 스코프 - 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수..

iOS, PC에서는 바로 열리는 PDF. 안드로이드에서는 자동 다운로드가 되는 현상 - 지난번 포스팅에서 PDF를 잘 띄웠는데, 안드로이드 모바일 브라우저에서만 자동 다운로드되어 문제가 발생했다. 해결방법 - 구글링 결과 Google Docs를 이용한 방법이 있었다. - 하지만 댓글에 2017 년 4 월 6 일부터이 형식을 사용할 수 없다고 나와있어서 pdf.js, pdfObject.js를 이용해서 구현해봤지만, 안드로이드에서만 자동 다운로드 되는 문제가 계속해서 발생했다. - 다시 구글링 했는데, 같은 글을 다시 보는데 2017 년 4 월 6 일부터이 형식을 사용할 수 있다라고 나와있었다;;;(난독증인가, 자동번역의 오류인가) - 아무튼 무사히 해결했다. // Open PDF function openP..

회사 요구사항으로 PDF를 뛰워야했다. - 이전에 Java로 띄웠었는데, 간편하게 Javascript로 가능하다. window.open('서버파일경로+파일명.확장자'); - Java로 하면 FileInputStream fis = null; BufferedOutputStream bos = null; try { String pdfFileName = "경로+파일명.확장자"; File pdfFile = new File(pdfFileName); // 클라이언트 브라우져에서 바로 보는 방법(헤더 변경) response.setContentType("application/pdf"); // 이 구문이 있으면 [다운로드], 이 구문이 없다면 바로 target 지정된 곳에서 띄울 수 있다. //response.addHead..