분류 전체보기
![[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsGu5b%2FbtsuCGyxT8a%2FK6dnvD7iDmMrCKP2EV8tk1%2Fimg.png)
[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입
브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 구조인 DOM을 생성한다. HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM 을 구성하는 요소 노드 객체로 변환된다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이루어지며 부모 노드와 자식 노드로 구성된다. 노드 객체의 타입 아래 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자. Apple Banana Orange 렌더링 엔진은 위 HTML 문서를 파싱하여 아래와 같이 DOM을 생성한다. 위 예제에서 볼 수 있듯이 DOM은 노드 객체의 계층적이 ㄴ구조로 구성된다. 문서 노드(document node) DOM 트리의 최상위에 존재하는 노드로 document 객체를 가리키며 전역객체 windo..
![[JS] DeepDive(38) 브라우저의 렌더링 과정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7dfSh%2FbtsudSfLEzv%2FdYWNnv33ZUDMdKMbV4Ki91%2Fimg.png)
[JS] DeepDive(38) 브라우저의 렌더링 과정
구글의 V8 자바스크립트 엔진으로 빌드된 JS 러낱임 환경인 node.js 가 등장하면서 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션으로도 사용할 수 있는 언어가 되었다. 하지만 여전히 자바스크립트가 사용되는 분야는 웹 브라우저에서 동자갛는 클라이언트 사이드다. 대부분 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML,CSS와 함께 실행된다. 이번에는 브라우저가 HTML,CSS JS로 작성된 텍스트 문서를 어떻게 해석하여 렌더링하는지 서술해보겠다. 브라우저는 아래와 같은 과정을 거쳐 렌더링을 수행한다. 1. 브라우저는 HTML,CSS,JS,image,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응..
[JS] DeepDive(37) Set과 Map
Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set객체는 배열과 유사하지만 약간의 차이가 있다. 1. Set객체는 동일한 값을 중복하여 갖지 않는다. 2. 요소에 순서가 없다. 3. 인덱스로 요소에 접근할 수 없다. 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 se..
[JS] DeepDive(36) 디스트럭처링 할당
디스트럭처링할당 (구조 분해 할당) 은 구조화된 배열과 같은 이터러블 또는 객체를 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 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 이 때 우변에 이터러블..
[JS] DeepDive(35) 스프레드 문법
ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어준다. 스프레드 문법은 Array,String,Map,Set,DOM 컬렉션과 같이 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' ] console.l..
[JS] DeepDive(34) 이터레이션 프로토콜
ES6에서 도입된 이터레이션 프로토콜은 순회가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6이전의 배열,문자열 등등은 통일된 규약 없이 나름의 구조를 가지로 for, for ...in forEach 등 순회할 수 있었다. ES6에서는 이를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. ..