DOM 명세서
문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, https://dom.spec.whatwg.org에서 볼 수 있습니다.… CSSOM 명세서
스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, https://www.w3… 몇몇 클래스에 대한 설명은 https://spec.whatwg.org/에서 확인할 수 있습니다.… 프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 https://developer.mozilla.org/en-US/search을 찾아보는 것도 좋긴 하지만,… q=whatwg+localstorage, https://google.com?q=mdn+localstorage 처럼 말이죠.
공식 버전이 나오기 이전의 최신 초안은 https://tc39.es/ecma262/에서 확인할 수 있습니다.… 갓 명세서에 등록된 기능이나 '등록되기 바로 직전’에 있는 기능(스테이지(stage)3 상태의 기능), 제안 목록은 https://github.com/tc39/proposals에서… 링크는 다음과 같습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
위 사이트에 들어가서 원하는 내용을 직접… Google 검색 엔진에 접속해 'MDN [원하는 용어]'를 입력해 봅시다. parseInt 함수에 대한 정보를 얻고 싶다면 https://google.com/search?… 관련 기능인 cryptography를 특정 브라우저에서 사용할 수 있는지 아닌지를 보려면 http://caniuse.com/#feat=cryptography를 확인하면 됩니다.
https
문자별 프로퍼티 목록: https://unicode.org/cldr/utility/character.jsp
프로퍼티별 문자 목록: https://unicode.org/cldr/utility… /list-unicodeset.jsp
프로퍼티별 줄임말: https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt… 텍스트 형식으로 정리된 유니코드 문자와 각 문자의 모든 프로퍼티: https://www.unicode.org/Public/UCD/latest/ucd/
예시: 16진수.실제 사례로
Built-in events mostly have composed: true, as described in the relevant specifications:
UI Events https… ://www.w3.org/TR/uievents.… Touch Events https://w3c.github.io/touch-events.… Pointer Events https://www.w3.org/TR/pointerevents.
…And so on.
Request from HTTPS to HTTP (from safe to unsafe protocol).… "strict-origin" – send only origin, don’t send Referer for HTTPS→HTTP requests.… "unsafe-url" – always send full url in Referer, even for HTTPS→HTTP requests.… Here’s a table with all combinations:
Value
To same origin
To another origin
HTTPS→HTTP
"… Referer: https://javascript.info/admin/secret/paths.
CORS와 안전한 요청.크로스 오리진 요청을 보낼 경우 브라우저는 항상 Origin이라는 헤더를 요청에 추가합니다.
https://javascript.info/page에서 https… 이 헤더엔 허가된 오리진(위 예시에선 https://javascript.info)에 대한 정보나 *이 명시됩니다.… Access-Control-Allow-Origin – *이나 요청을 보낸 오리진 이어야 합니다(예: https://javascript.info)
Access-Control-Allow-Methods… Content-Type이 application/x-www-form-urlencoded나 multipart/form-data, text/plain가 아닙니다.… 메서드: GET이나 POST 혹은 HEAD
헤더:
Accept
Accept-Language
Content-Language
값이 application/x-www-form-urlencoded나
예시:
Uint8Array – ArrayBuffer의 각 바이트를 별개의 숫자로 취급합니다. 1바이트는 8비트이므로 0부터 255까지의 값을 가질 수 있으며 이러한 값을 '8비트… 예를 들어 Int8Array, Uint8Array 등이 있으며 전체 목록은 곧 살펴보겠습니다.
new TypedArray와 같은 표현을 본다면 new Int8Array, new Uint8Array와… Int8Array라는 이름과 달리 자바스크립트에는 int나 int8과 같은 단일 값 타입이 없다는 것에 유의하세요.… Uint8Array에 256을 넣는다고 생각해 봅시다. 256의 이진 형태는 100000000 (9비트)이지만 Uint8Array는 값 하나당 8비트만 제공하기 때문에 0부터 255까지의… Uint8ClampedArray – 8비트 정수에 사용하며, 값을 할당할 때 값을 '고정’합니다.
줄 번호 8도 클릭해 중단점을 하나 더 추가해봅시다.
지금까지 잘 따라오셨다면 아래와 같은 화면이 보여야 합니다.… 줄 번호 4와 8이 파란색으로 바뀐 게 보이시죠?… -- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg… -->
– ‘Resume’: 스크립트 실행을 다시 시작함 (단축키 F8)
실행을 재개합니다.… Google에서 제공하는 개발자 도구 공식 매뉴얼은 https://developers.google.com/web/tools/chrome-devtools에서 확인할 수 있습니다.
label – 기본적인 인코딩 방식은 utf-8이지만 big5, windows-1251 및 다른 인코딩 방식도 지원됩니다.
options – 선택 항목입니다.… TextEncoder는 인코딩 시 'utf-8’만 지원합니다.
2가지 메서드가 있습니다.… encode(str) – Uint8Array에 문자열을 반환합니다.
encodeInto(str, destination) – Uint8Array 구조 형태로 문자열 str를 destination에
…”.Let’s say we want to create a url with given search params, for instance, https://google.com/search… are not allowed, must be encoded, for instance non-latin letters and spaces – replaced with their UTF-8… The URL became longer, because each cyrillic letter is represented with two bytes in UTF-8, so there
origin:
http://site.com
http://site.com/
http://site.com/my/page.html
These ones do not:
http://www.site.com… (another domain: www. matters)
http://site.org (another domain: .org matters)
https://site.com (another… protocol: https)
http://site.com:8080 (another port: 8080)
The “Same Origin” policy states that:
if
URLSearchParams – 데이터를 x-www-form-urlencoded 형태로 보내기 위해 쓰이는데, 요즘엔 잘 사용하지 않습니다.… POST 요청을 보낼 때 주의할 점은 요청 본문이 문자열일 때 Content-Type 헤더가 text/plain;charset=UTF-8로 기본 설정된다는 점입니다.
저수준(low-level) 프로그래밍에 익숙하다면, A tour of V8: Garbage Collection을 읽어보세요.… V8 가비지 컬렉터에 대한 자세한 내용을 확인해 볼 수 있습니다.
V8 공식 블로그에도 메모리 관리 방법 변화에 대한 내용이 올라옵니다.… 가비지 컬렉션을 심도 있게 학습하려면 V8 내부구조를 공부하거나 V8 엔지니어로 일했던 Vyacheslav Egorov의 블로그를 읽는 것도 좋습니다.… 여러 엔진 중 ‘V8’ 엔진을 언급하는 이유는 인터넷에서 관련 글을 쉽게 찾을 수 있기 때문입니다.… V8과 타 엔진들은 동작 방법이 비슷한데, 가비지 컬렉션 동작 방식에는 많은 차이가 있습니다.
저수준 최적화가 필요한 상황이라면, 엔진에 대한 조예가 깊어야 합니다.
properties:
done – true when the reading is complete, otherwise false.
value – a typed array of bytes: Uint8Array… At the end, we have chunks – an array of Uint8Array byte chunks.… single method that concatenates those, so there’s some code to do that:
We create chunksAll = new Uint8Array
V8 엔진에선 이를 '마이크로태스크 큐(microtask queue)'라고 부르기 때문에 이 용어가 좀 더 선호됩니다.
명세서의 설명을 살펴봅시다.… 요약.모든 프라미스 동작은 ‘마이크로태스크 큐’(ES8 용어)라 불리는 내부 ‘프라미스 잡(promise job)’ 큐에 들어가서 처리되기 때문에 프라미스 핸들링은 항상 비동기로 처리됩니다
새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 https://tc39.github.io/ecma262/에 추가됩니다.… 엔진별로 어떤 기능을 지원하고 있는지는 https://kangax.github.io/compat-table/es6/에서 확인할 수 있습니다.
For screenshotting a page, we can use a library such as https… FileReader:
Summary.While ArrayBuffer, Uint8Array
secure.
secure
이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송됩니다.
secure 옵션이 없으면 기본 설정이 적용되어 http://site.com에서 설정… (생성)한 쿠키를 https://site.com에서 읽을 수 있고, https://site.com에서 설정(생성)한 쿠키도 http://site.com에서 읽을 수 있습니다.… 하지만 secure 옵션이 설정된 경우, https://site.com에서 설정한 쿠키는 http://site.com에서 접근할 수 없습니다.… 이 사이트엔 해커에게 송금을 요청하는 폼(form) <form action="https://bank.com/pay">이 있고, 이 폼은 자동으로 제출되도록… 배너는 다른 도메인 <img src="https://ads.com/banner.png"> 에서 가져옵니다.
<select> 요소에 대한 명세는 아래 링크에서 볼 수 있습니다 https://html.spec.whatwg.org/multipage/forms.html#the-select-element… 명세서: https://html.spec.whatwg.org/multipage/forms.html.
V8 – Chrome과 Opera에서 쓰입니다.
SpiderMonkey – Firefox에서 쓰입니다.… "X라는 기능은 V8에서만 지원합니다."라는 식으로 말이죠.
window.onerror만으로 스크립트를 복구하는 건 사실상 불가능하죠. window.onerror는 개발자에게 에러 메시지를 보내는 용도로 사용합니다.
window.onerror말고 https… ://errorception.com 나 http://www.muscula.com같은 에러 로깅 관련 상용 서비스가 여러 가지 있습니다.
DOM: https://dom.spec.whatwg.org/#shadow-trees
Compatibility: https://caniuse.com/#feat=shadowdomv1
Shadow
HTML Living Standard: https://html.spec.whatwg.org/#custom-elements.… Compatiblity: https://caniuse.com/#feat=custom-elements.… Edge is a bit behind, but there’s a polyfill https://github.com/webcomponents/polyfills/tree/master/packages
예시에선 pow(2, 3)의 결괏값과 8을 비교하겠죠. 비교나 확인에 쓰이는 다른 함수들은 아래에서 다시 소개해 드리겠습니다.
명세서는 실행 가능합니다.… 지금 상황에선 pow(2,3)가 8이 아닌 undefined를 반환하기 때문에 에러가 발생합니다.… :
두 번째 테스트가 실패했네요. assert에선 함수 리턴값이 81이 될 것이라 기대하고 있었는데, 함수는 항상 8을
현재 날짜가 2020년 9월 12일 오후 12시 17분 8초라면, 숫자 8부터 스르륵 이동합니다.… 초별로 프로세스가 몇 %씩 진행되는지를 정리하면 다음과 같죠.
0s – -10% (애니메이션이 시작하자마자 바로 첫 번째 단계가 수행됨)
1s – -20%
…
8s – -80%
(
So, e.g. a script at https://facebook.com can’t read the user’s mailbox at https://gmail.com.
The native interface to IndexedDB, described in the specification https://www.w3.org/TR/IndexedDB, is… We can also use async/await with the help of a promise-based wrapper, like https://github.com/jakearchibald… Let’s use a thin promise wrapper https://github.com/jakearchibald/idb further in this chapter.… The examples are at the lib page https://github.com/jakearchibald/idb.
거듭제곱한 수로 나누는 것을 의미합니다.
16진수, 2진수, 8진수… 2진수와 8진수는… 자바스크립트는 특별한 변환 없이 16진수(0x), 8진수(0o), 2진수(0b)를 바로 사용할 수 있게 지원합니다.
parseInt(str, base)를 사용하면 str을 base진수로
디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Edge, Opera에서 쓰임)의 주요 부작용입니다.… 이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Edge, Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.… 이 부작용은 버그라기보다는 V8만의 특별한 기능이라고 생각하시면 될 것 같습니다. 미래에 이 기능은 변경될 수 있습니다.
ws말고 wss://라는 프로토콜도 있는데, 두 프로토콜의 관계는 HTTP와 HTTPS의 관계와 유사합니다.… Origin – 클라이언트 오리진(예시에선 https://javascript.info)을 나타냅니다.… Requests to WebSocket use wss://ws.site.com, a subdomain that leads to the WebSocket server, while https
On the other hand, we should keep in mind that the mouse pointer doesn’t “visit” all elements along the
클라이언트는 https://api.github.com/repos/<repo>/commits 형태의 URL로 요청을 보냅니다.… 헤더에서 https://api.github.com/repositories/93253246/commits?page=2형태의 URL만 추출하기 위해 정규표현식을 사용하였습니다.
ArrayBuffer.
readAsText(blob, [encoding]) – read the data as a text string with the given encoding (utf-8
그러면 아마 세밀한 벤치마킹을 할 필요가 없을 겁니다.
http://mrale.ph에서 V8 엔진을 설명한 좋은 글들을 보실 수 있습니다.
Chrome 개발자 도구 문서 사이트 https://developers.google.com/web/tools/chrome-devtools로 가시면 다양한 기능을 살펴볼 수 있습니다.
메서드에 대한 자세한 설명은 https://w3c.github.io/beacon/에서 찾아볼 수 있습니다.
sendBeacon는 데이터를 백그라운드에서 전송합니다.
A polyfill may be required, such as https://github.com/ljharb/String.prototype.matchAll.
이렇게 태스크가 추가되는 큐는 V8 용어로 '매크로태스크 큐(macrotask queue)'라고 부릅니다.
Context: { x: 2, n: 3, 다섯 번째 줄 }
pow(2, 3)
마지막 실행 컨텍스트까지 처리되면 pow (2, 3) = 8이라는 결과가 도출됩니다.
예를 들어 HTMLInputElement에서 지원하는 프로퍼티 목록은 https://html.spec.whatwg.org/#htmlinputelement에서 찾아볼 수 있습니다.