JS Stack
Babel과 Polyfill
Babel과 Polyfill
2023.04.07What is Babel? Babel is a JavaScript compiler. ES6 문법을 구식 브라우저에서도 돌아가는 하위호환 문법으로 트랜스파일 해주는 트랜스파일러. 또는 컴파일러. https://babeljs.io/docs/ 기타 jsx변환이나 type 변환에 대한 상세한 내용은 공식 docs 참고. What is Polyfill? 문법에 대한 하위호환 지원은 babel이 하고, API에 대한 하위호환 지원은 Polyfill이 담당. 즉 ES5에 존재하지 않는 Promise 같은 객체를 구형 브라우저에서도 사용 할 수 있게, 해당 객체들을 정의해주는 역할. Promise = Promise ?? /* 자체 구현 Promise */; Object.entries = Object.entries ??..
CRA(Create React App) 관련
CRA(Create React App) 관련
2023.04.06디버깅? source map source map이 함께 생성됨. (default) source map은 원본 파일은 아니고 원본 파일과의 mapping 정보를 담고 있는 json 형태의 파일. 개발자 도구에서 원본 소스파일과 자동으로 연결해서 보여준다. 따라서 프로덕션 빌드에서는 제거 옵션 주고 빌드해야 함. browserlistrc? CRA를 쓰더라도 .browserlistrc 적용 된다. 공식 docs에 나와 있지는 않지만.. https://github.com/browserslist/browserslist/issues/391 CRA(Create React App)으로 프로젝트 생성하게 되면 기본적으로 .babelrc 설정이 불가능함. react-script의 webpack.config.json에 ba..
webpack 빌드 - 독립 library로 만들기
webpack 빌드 - 독립 library로 만들기
2023.04.05독립 library로 만들기 https://webpack.kr/guides/author-libraries/ webpack에 대한 기본적인 내용 예제 package.json "scripts": { "build:alpha": "cross-env REACT_APP_PROFILES=alpha npm-run-all webpack-module react-build", "build:real": "cross-env REACT_APP_PROFILES=real GENERATE_SOURCEMAP=false npm-run-all webpack-module react-build" }, npm-run-all로 [react-build와, 별도 library를 만들기 위한 webpack-module] 두 작업 모두 실행 webpac..
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/..
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에 가..