JavaScript

노드 탐색요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색 해야 할 때가 있다. Apple Banana Orange ul#fruits 요소는 3개의 자식 요소를 갖기에 ul#fruits 요소 노드를 취득하고 자식 노드를 모두 탐색하거나 자식 노드 중 하나만 탐색할 수 있다. 이처럼 DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.parentNode, PreviousSibiling, firstChild, childNodes 프로퍼티는 Node.protoype이 제공하고, 프로퍼티키에 Element가 포함된 previousElementSibling, nextEleme..

브라우저의 렌더링 엔진은 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..