JS Stack/JS
MobX
MobX
2020.04.13MobX MobX와 React Context를 모두 사용하여 [store -> context(provider), useHoC -> container] 구조로 사용 중 :: HoC? High-order Component 벨로퍼트 - 리액트 Context API 파헤치기 예제에서는 context, useHoc -> container 만 사용 https://mobx.js.org/getting-started 기본 개념. 상태 변화 감지. Store, Observer 개념 예제에서는 Store, Container(View) 만 사용 https://ko.mobx.js.org/react-integration.html 더 상세한 설명. code snippet 등등... 대체로 여기서(좌측 메뉴들) 찾아보면 됨. Rea..
[JS] ArrayBuffer와 DataView : TypedArray
[JS] ArrayBuffer와 DataView : TypedArray
2019.10.31ArrayBuffer는 다음과 같은 상황에서 유용하다. 어떤 API가 커다란 사이즈의 Buffer를 통째로 받아야 해서, Buffer에 여러가지 정보를 담아서 넘겨야 한다. (예를 들어 WebGL. 여러가지 Instance의 정보를 한꺼번에 Buffer에 담아서 넘겨야 한 번에 Buffer를 보고 쭉 그릴 수 있다.) C/C++라면 memcpy를 사용해도 되고 포인터를 이용해서 직접 써도 되지만, JS는 그렇지 않다. 그래서 ArrayBuffer를 이용해서 커다란 Buffer를 할당한 다음, (malloc) Type, byteOffset, length를 지정해서 Buffer의 일부 영역을 Chunk로 반환 받을 수 있다. (포인터로 연결하는 것 같은 느낌) Buffer Chunk1 (Int32Array)..
[jQuery] checkbox의 check all 기능 구현하기
[jQuery] checkbox의 check all 기능 구현하기
2018.11.30```js```페이지에 체크박스 폼이 하나만 있는 경우에는 그냥 모든 체크박스 선택해서 처리해도 되지만form wizard같은거 쓰는 경우나, 체크박스 영역이 여러개 있는 경우 그 영역에 해당하는 체크박스들만 체크처리 해야 하므로 이런 식으로 처리하게 된다.
[JS] char <> code <> hex / unicode 공백 / Unpack
[JS] char <> code <> hex / unicode 공백 / Unpack
2017.06.04hex(65).toString(16) // 41 "A".charCodeAt().toString(16) // 41code to charString.fromCharCode(0x41) // "A" JS는 유니코드가 16bit charset이었을 때 개발되었기 때문에 JS에서 한 문자는 기본적으로 2 bytes 유니코드다.그러나 `` \x??``로 직접 입력하는 경우 1 byte 씩 문자로 인식한다. 2 bytes 유니코드 문자를 사용하려면 `` \u``를 사용해야 한다.```js"\uc548""안""\xc5\x48""ÅH"``` BMP를 넘어가는 경우(U+10000 이상) surrogate halves가 총 4 bytes이므로 ``length``를 2로 인식한다.그래서 UTF-16이라기 보다는 UCS-2에 가..
[JS] memoization, currying
[JS] memoization, currying
2017.06.02memoization동일한 계산을 반복해야 할 때 이전 계산 결과를 저장해놓음으로써 효율을 높이는 것. 관례상 변수는 ``js memo[]`````jsvar fibonacci = function ( ) {var memo = [0, 1];var fib = function (n) {var result = memo[n];if (typeof result !== 'number') {result = fib(n - 1) + fib(n - 2);memo[n] = result;}return result;};return fib;}( );```* 클로저를 이용해 ``js memo[]``를 감췄다. recursive를 사용하지 않고 iteration으로 짜면서 memo하려면 별도의 ``stack`` 변수를 하나 선언하고 거기..
[JS] 함수 #2. Call pattern, 생성자 대안(함수형 패턴), 상속
[JS] 함수 #2. Call pattern, 생성자 대안(함수형 패턴), 상속
2017.05.31함수 객체 함수도 객체이기 때문에 다른 값들처럼 배열에 저장하거나 인수, 반환값으로 사용할 수 있다. 함수 객체는 ``js Function.prototype``에 연결된다. ( ``js Function``이 ``js Object.prototype``에 연결되어 있다. ) 모든 함수는 두 개의 숨겨진 속성 ``context``과 ``code``를 가지고 있다. 또한, 모든 함수 객체는 ``prototype`` 객체를 속성으로 가지고 있다. 이 객체는 다시 함수 자기 자신(``this``) 자체를 값으로 갖는 ``constructor``라는 속성을 가지고 있다. * 함수 객체가 만들어질 때, 함수를 생성하는 Function 생성자는 다음과 같은 코드를 실행한다. ```js this.prototype = {c..
[JS] 함수 #1. 유효범위(scope), callback, 클로저(closure), 접근 제어
[JS] 함수 #1. 유효범위(scope), callback, 클로저(closure), 접근 제어
2017.05.31함수선언식 vs 함수표현식 함수선언식 ```js functino foo( ) {} ``` 함수표현식 ( 함수리터럴 ) ```js var foo = function ( ) {}; ``` 일반적으로 함수 표현식을 사용하는 것이 좋다. JS를 잘 사용하기 위해서는 함수도 값이라는 것을 이해하는 것이 중요하기 때문. 이라고 "자바스크립트 핵심 가이드"에서 얘기하고 있음 일반적으로 함수를 선언 할 때, 선언식으로 하냐 표현식으로 하냐 관점에서는 hoisting 정도가 차이점이고, JS가 함수표현식을 지원하기 때문에 = 함수는 값 = [클로저, 일회용 함수(즉시eval), 함수를 인자로 전달]이 가능 hoisting 규칙 ``js let/const`` 변수는 hoisting 되지 않는다. ``js var`` 변수는..
[JS] 객체, 프로토타입, 기본 타입에 기능 추가
[JS] 객체, 프로토타입, 기본 타입에 기능 추가
2017.05.29JS에서 단순 데이터 타입인 숫자, 문자열 등을 제외하면 배열, 함수, 정규표현식 등이 모두 객체로 이루어져 있다. 숫자, 문자열 등은 메소드가 있기 때문에 유사 객체라고 할 수 있지만 이들은 immutable이다. JS에서 객체는 변형 가능한 속성들의 집합이라고 할 수 있으며 이름과 값이 있는 속성들을 포함하는 컨테이너다. JS에는 객체 하나에 있는 속성들을 다른 객체에 상속하게 해주는 프로토타입(prototype) 연결 특성이 있다. 프로토타입을 잘 활용하면, 객체를 초기화 하는 시간과 메모리 사용을 줄일 수 있다. JS에서는 클래스가 따로 없고, ``js new``와 ``Constructor``를 사용할 수는 있지만, 프로토타입과 클로저를 활용한 함수형 패턴으로 객체를 정의한다. 2017/05/31..
[Regex] JS
[Regex] JS
2017.05.28JS Regexregex에서 "또는 or"을 표현하기 위해 ``js [(bar)(foo)]`` 처럼 사용하면 ``()``로 묶어도 한 char 씩 잘라서 인식하기 때문에 ``js ((bar)|(foo))``를 사용해야 한다.()가 추가되기 때문에 캡쳐링 그룹 인덱스가 틀려질 수 있다는 점에 주의한다. JS에서 정규 표현식은 보통 같은 문자열에 대해 반복해서 연산을 수행할 때 주목할 만한 성능상의 이점이 있다. 그래서 ``indexOf``를 쓰는 것 보다는 정규 표현식을 쓰는 것이 좋다. 정규식은 inline 보다는 변수에 저장해서(stored) 사용하는 것이 좋고,RegExp 객체를 사용하는 것 보다 literal을 사용하는 것이 좋다.또한, 반복문 안에 넣으면 계속 컴파일 되는 경우가 있으므로 반복문 ..
[JS] TIP
[JS] TIP
2017.05.25JS에서 ||는 boolean이 아닐 수 있다. ```js let a = {} a.none || "abc" // "abc"가 출력된다. let b = a.none || "abc" // b에 "abc"가 할당된다. a.none === undefined || "abc" // true가 출력된다 ``` 이렇게 할당에 사용할 수 있음 Object 유틸 관련 IE에서 지원 안되므로 babel polyfill (preset-env) 필요함. /* Object.assign 객체 병합 */ const a = {a: 1, b:3} a >>> {a: 1, b: 3} Object.assign(a, {c:4}) >>> {a: 1, b: 3, c: 4} Object.assign(a, {b:5}) >>> {a: 1, b: 5, ..
[JS] 리터럴, 자료형, 반복문
[JS] 리터럴, 자료형, 반복문
2017.03.01JS에서 숫자 타입은 Number인데, 이건 소수점 타입이다. https://developer.mozilla.org/en-US/docs/Glossary/Number Int 같은 정수형 타입은 따로 없고... 그래서 정확한 수를 받아올 때는 String으로 해야함. axios 등으로 받아올 때, 자동으로 Number로 타입추론 들어가면서 숫자가 변경되는 경우 있을 수 있음. 이런 문제는 서버 사이드에서 JSON encode 해서 내려주는게 맞음. https://stackoverflow.com/questions/44317740/there-is-a-clean-way-to-return-string-as-json-in-a-spring-web-api ``js parseInt()``를 사용할 때는 항상 기수를 지정해..