JavaScript

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 구조이다. 노드HTML 요소와 노드 객체HTML 문서는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.이때 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다.HTML 요소 간에 중첩 관계에 의한 계층적인 부자 관계가 형성되며 모든 노드 객체들을 트리 자료구조로 구성한다. 트리 자료구조트리 자료구조는 노드들의 계층 구조로 이뤄지며 부모 노드와 자식 노드로 구성된 계층..

구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 언어가 되었다. 하지만 JS는 여전히 웹 브라우저 환경에서 많이 동작하는 클라이언트 사이드이다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 JS는 브라우저에서 HTML, CSS와 함께 실행된다. 이번 쳅터에서는 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자.파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 토큰으로 분해해 문법적 의미와 구조를 반영해 트리구조인 파스 트리를 생성하는 과정이다.렌더링: HTML, CSS,..

SetSet객체는 중복되지 않는 유일한 값들의 집합니다. 배열과 유사하지만 동일한 값을 포함할 수 없으며, 요소 순서의 의미가 없고, 인덱스로 요소에 접근할 수 없다. 이런 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set 객체의 생성Set 객체는 Set 생성자 함수를 이용해 생성한다.const set = new Set();console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 받아 Set 객체를 생성하며 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.const set1 = new Set([1, 2, 3, 3]);console.log(set1); // Set(3) {1, 2, 3}const set2 = new Set('hello');cons..

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 디스트럭처링 할당// ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = arr[2];console.log(one, two, three); // 1 2 3 구조 분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.const arr = [1, 2, 3];// ES6 배열 디스트럭처링 할당// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.// 이때 할당 기준은 배열의 인덱스다.const [one, two, three] = arr;cons..

ES6에 도입된 스프레드 문법 ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다. 스프레드 문법은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)console.log(...[1, 2, 3]); // 1 2 3// 문자열은 이터러블이다.console.log(...'Hello'); // H e l l o// Map과 Set은 이터러블이다.console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]consol..

이터레이션 프로토콜ES6에 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬랙션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 순회 가능한 배열, 문자열, 유사 배열 객체, DOM 컬랙션 등은 통일된 규약 없이 나름의 구조를 갖고 for 문, for...in 문, forEach 메서등 등 다양한 방법으로 순회할 수 있었다. 하지만 ES6에서는 순회 가능한 데이터 컬랙션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 배열 디스트럭처링 할당(분해 할당)의 대상으로 사용할 수 있도록 일원화했다. 이터러블이터러블 프로토콜을 준수한 객체를 이터러블이라 하며 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나, 프..