DOMHTML 문서의 계층적 구조와 정보를 표현하며이를 제어할 수 있는 API인 프로퍼티와 메서드를 제공하는 트리 자료구조노드Helloclass : 어트리뷰트 이름cat : 어트리뷰트 값Hello : 콘텐츠 : 종료 태그 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨HTML 요소의 어트리뷰트 => 어트리뷰트 노드HTML 요소의 텍스트 콘텐츠 => 텍스트 노드 트리 자료구조부모 노드와 자식 노드로 구성되어노드 간의 계층적 구조를 표현하는 비선형 자료구조 하나의 최상위 노드에서 시작함최상위 노드는 부모 노드가 없고 루트 노드라고 함루트 노드: 0개 이상의 자식 노트를 가짐리프 노드: 자식 노드가 없는 노드 DOM (Document Object Model) : 노드 객..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 생성함이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고브라우저 화면에 HTML 요소를 페인팅함요청과 응답브라우저의 핵심 기능필요한 ..

Set 중복되지 않는 유일한 값들의 집함 수학적 집합을 구현하기 위한 자료구조 교집합, 합집합, 차집합, 여집합 등 구현 가능 배열과 유사하지만 차이가 있음 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있음 O X 요소 순서에 의미가 있음 O X 인덱스로 요소에 접근 가능 O X 1. Set 객체의 생성 Set 생성자 함수로 생성함 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않음 const set = new Set(); console.log(set); // Set(0) {} const set1 = new Set([1, 2, 3, 4]); conso..

디스트럭처링 할당 (구조 분해 할당) 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용함 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당함 이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며 할당 기준은..

스프레드 문법(전개 문법) ... 하나로 뭉쳐 있는 여러 값들의 집합을 전개하여 개별적인 값들의 목록으로 만듦 스프레드 문법 사용 가능 대상은 for ... of 문으로 순회 가능한 이터러블에 한정됨 (Array, String, Map, Set, DOM 컬렉션, arguments ...) 스프레드 문법의 결과물은 값이 아니라 값들의 목록이기 때문에 변수에 할당 불가능 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 이를 함수의 인수 목록으로 전달해야 하는 경우 const arr = [1, 2, 3];..

이터레이션 프로토콜 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 1. 이터러블 이터러블 프로토콜을 준수한 객체 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블임 isIterable([]); // true isIterable(''); // true isIterable(new Map()); // true isIterable(new Set()); // true isIterable({}); // true ..