머리가 나뻐서 삽질 SAP(Study And Programming)

Syntax 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. Internet Explorer 를 제외한 현재의 브라우저, 단말기에서 모두다 지원한다고 보면된다. 더보기 백틱(` `) Grave accent 로 사용하고, ${expression} 으로 표현식을 사용한다. 아래와 같이 여기까지는 보편적인 사용의 예이다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` Expression interpolation 표현식 삽입법 템플릿 리터럴안에 간단한 수식을 표현하려면 아래와 같다. var a = 5;..

실무에서 작업 중, 반복된 패턴을 순회하며 [ 기존값에 현재값을 적재(acuumlator)] 하는 상황에서 reduce함수가 생각나서 사용해보았다. reduce reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 리듀서 함수는 네 개의 인자를 가집니다. 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기(어큐멀레이터)에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다. 객체를 합칠때는 ... 연산자를 이용해서 합칠수도 있지만 아래와 같이 FIXED_DATA라는 상수의 값(혹은 옵션)이 연속해서 추가되는 상황이라면 함수로 빼..

HTML5 + sheet.js 를 이용한 클라이언트 Excel parse 바야흐로 2017.05.31 기준. 혹시나 싶어서 검색한 결과 진작에 클라이언트에서도 엑셀 파싱처리가 가능해졌다. 일전에 썼던글인 "HTML Table을 엑셀로 내보내기 : Export to excel sheet on client side" 에서는 엑셀 저장하기를 다루었는데 a 태그의 HTML5 속성인 datatype과 download를 이용하면 형식과 파일명을 직접 만들고 저장하기가 가능해져서 약간의 규칙만 지킨다면 라이브러리 따위없어도 엑셀형식을 갖춘 파일을 만들 수 있었고 테이블 셀의 속성을 전부 재현해 내고 싶은 경우 라이브러리를 사용하면 (아마) 엑셀을 출력키위한 정확한 헤더파일을 지칭하고 그 스타일(혹은 태그)을 온건히 ..

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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 12..

ES6 Immediately-invoked function expression IIFE was one of the most used patterns in the ES5 standard, as functions were the only way to declare a scoped block of code. So the following code will result with a ReferenceError:(function() { var scoped = 42; }()); console.log(scoped); // ReferenceError ECMAScript introduced the block scoped let and const, so instead of using an IIFE, we can have t..

currying, partial application 자바스크립트를 최대한 짧고 적은 줄에서 반복적인 함수를 호출하기위한 방법 currying의 장점 - 함수의 인수(파라메터)를 부분적으로 적용할 수 있는 함수를 생성할 수 있다 - 함수안에 기능적으로 분리된 인수를 전달하게 되므로써 기능을 분리하여 그 결과를 얻을 수 있다 ( 좀더 자세히 : 기능별로 나누어서, 쪼개서 호출할 수 있다 ) - 임수의 부분(혹은 집합)을 전달하고 나머지 인수가 실행되는 함수를 리턴받을수 있다 - (개인적으로) 객체지향 언어에서 의례적으로 .(dot)을 참조하였던 방식대신 연속적인 함수호출을 통하여 chaining 패턴같이 이어나갈수 있는 방식으로 느껴진다 자바스크립트에서의 currying Haskell 및 Scala와 같은..

new 연산자를 피하라 Use {} instead of new Object()Use "" instead of new String()Use 0 instead of new Number()Use false instead of new Boolean()Use [] instead of new Array()Use /()/ instead of new RegExp()Use function (){} instead of new Function() var x1 = {}; // new objectvar x2 = ""; // new primitive stringvar x3 = 0; // new primitive numbervar x4 = false; // new primitive booleanvar x5 = []; // new ..

2017.07 자바스크립트 프레임워크 트렌드차트 1. Reactjs가 확실히 Hot하긴 한가보다. 엄밀히 말하면 프레임워크가 아니라 Library라고 소개하고 있기는 하다. 2015년 1월부터 AngularJS가 폭락하고 ReactJS가 폭등 했음을 알 수 있다. 2. 하지만 역시 jquery 와 비교하면 이건뭐....넘사벽인 백분율을 자랑한다. 그러나 제이쿼리역시 계속해서 하향곡선을 그리고는 있는데 개인적으로 아래와 같이 분석하고있다. jquery의 경우 지속적인 학습을 통해 그동한 상당한 양의 지식이 축적되었고 특히 반복적인 사용패턴이 정해져 있어서 관심이 떨어질 뿐 제이쿼리의 셀렉터-는 생산성 측면에서 매우 압도적이므로 트렌드관점에서 퇴보된다기보다 기존학습했던 시간비용이 점점 줄어들고 있어서 검색률..

rgb를 16진수로 12345678910111213141516171819202122232425(by Matt) function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);} * 일부 브라우저에서는 이미 16 진수 색상이 반환된다. (예를들어 Internet Explorer 8 이상). 그런 경우에 대처할 필요가있는 경우 함수에 조건을 추가하면된다 (by gfrobenius) function rgb2hex(rg..

javascript로 만든 원의 자취 함수 원을 이용하여 애니메이션과 렌더링 작업에 사용했던 함수. Result를 클릭하면 결과를 볼 수 있다. script source) 아래 함수는 원안에 10개의 아이콘을 라디안으로 그리며 배치할때 사용하였다 script source) /* -------------------------------------------------------- * circle, display -----------------------------------------------------------*/ function circle($w_rad, $h_rad, $radian) { var temp_x = $w_rad * Math.cos($radian); var temp_y = $h_rad *..