JS Stack
SameSite Cookie
SameSite Cookie
2020.06.15쿠키(Cookie)와 저장소(Storage) SameSite cookies explained https://web.dev/samesite-cookies-explained/ first-party cookie와 third-party cookie 브라우저는 도메인 별로 쿠키를 저장하고 있다. 따라서 다른 도메인으로 이동한다고 해서 쿠키가 삭제되지 않는다. 다른 사이트 갔다가 돌아왔을 때, 로그인 상태가 유지되는 것은 브라우저가 해당 도메인의 세션 쿠키를 다시 꺼내기 때문이다. 어떤 도메인에 요청할 때, 브라우저는 해당 도메인의 쿠키를 꺼내 헤더에 포함하여 전송하도록 되어 있다. 내가 현재 도메인 A에 있고, 페이지 내에 삽입된 이미지는 외부 도메인 B의 데이터다. 이미지를 불러오기 위하여 외부 도메인 B로 요..
Same-origin Policy, CORS
Same-origin Policy, CORS
2020.06.14Same-origin Policy와 CORS https://en.wikipedia.org/wiki/Same-origin_policy 영문 위키가 젤잘나와있음. 시나리오까지. W3C spec Same-origin Policy란? 스크립트에 적용되는 정책이며, 스크립트 내에서 다른 리소스를 요청할 때 요청지가 Same-origin이 아니면 막는 정책 현재 리소스(스크립트)를 가져온 출처와 (프로토콜, 호스트, 포트)가 동일한 출처를 Same-origin으로 판단한다. 이는 브라우저가 `` document.domain``을 보고 판단함. 좀 더 정확히는, Cross-origin read를 막는다. https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_..
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)..
Node.js란?
Node.js란?
2019.07.02Node.js는 V8 엔진을 사용해 js -> binary로 바꿔주고, 이를 실행하는 "런타임 플랫폼" 이다. (자바의 JRE 처럼) node는 싱글스레드 기반의 이벤트루프를 사용한다. - O "하지만 libuv에서 worker thread 사용하는데?!" 이는 low-level에서 비동기 처리가 불가능한 것을 thread로 wrapping해서 고수준에서는 비동기처럼 보이게끔 하는 것에 가깝다. 다른 언어나 플랫폼에서도 nio 지원 안되는 blocking 함수들 thread로 wrapping하는 경우가 있는데, 이와 비슷하다. 그림에는 나와있지 않지만 해당 플랫폼에서 비동기 처리가 가능한 작업이라면, (e.g., windows의 IOCP를 쓸 수 있다면) 굳이 worker thread 사용할 필요 없으므..
[jQuery] checkbox의 check all 기능 구현하기
[jQuery] checkbox의 check all 기능 구현하기
2018.11.30```js```페이지에 체크박스 폼이 하나만 있는 경우에는 그냥 모든 체크박스 선택해서 처리해도 되지만form wizard같은거 쓰는 경우나, 체크박스 영역이 여러개 있는 경우 그 영역에 해당하는 체크박스들만 체크처리 해야 하므로 이런 식으로 처리하게 된다.
HTML5 data-* attribute
HTML5 data-* attribute
2018.11.23HTML5 data-* attribute```htmlOwl```Global attribute다.페이지 혹은 앱 내에서만 사용할 데이터에 지정한다. 이렇게 지정한 데이터 ``c "bird"``는 JS에서 불러와 사용할 수 있다. CSS에서도 불러와 사용할 수 있다는게 큰 특징!!```js// getAttribute()를 사용하기var test = document.getElementById('test');console.log(test.getAttribute("data-animal-type")); // .으로 접근하기 (IE 11 이상, 표준)var test = document.getElementById('test');console.log(test.dataset.animalType); // 자동으로 camel..
[HTML] form tag, input 태그 속성
[HTML] form tag, input 태그 속성
2017.06.10input 태그checkbox와 listbox는 ``html ``로 지정하면 서버에서 배열로 받을 수 있다.HTML5에서 input에 type이 많이 추가되었으니 참고할 것.(tel, email, url, date, ...) 이를 사용하면 좀 더 semantic하게 나타낼 수 있다.HTML5에서 input에 placeholder 등의 attribute가 추가되었으니 참고. 아무것도 입력 안하는 상태를 방지하려면 `` required`` 추가. 다른 길이 제한 속성을 쓰더라도, 별개로 써줘야 함.입력되는 문자의 최대 길이를 제한하려면 `` maxlength``입력되는 문자의 최소 길이를 제한하려면 `` maxlength``입력되는 문자의 패턴을 제한하려면 `` pattern``(정규표현식) - 근데 max..
[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`` 변수는..