본문 바로가기

분류 전체보기

(894)
[Deep dive] 39장 DOM (3) 39.7 어트리뷰트 39.7.1 어트리뷰트 노드와 attributes 프로퍼티 - HTML 요소는 여러 개의 어트리뷰트(attribute)를 가질 수 있음 - HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름 = "어트리뷰트 값" 형식으로 정의 - HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결 - HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성 - 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NameNodeMap 객체에 담겨서 요소 노드의 atrributes 프로퍼티에 저장 - 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득 가능 - attributes 프로퍼티는 getter..
[Deep dive] 39장 DOM (2) 39.4 노드 정보 취득 - 노드 정보 프로퍼티 프로퍼티 설명 Node.prototype.nodeType 노드 타입을 나타내는 상수를 반환 - Node.ELEMENT_NODE : 요소 노드 타입을 나타내는 상수 1 - Node.TEXT_NODE : 텍스트 노드 타입을 나타내는 상수 3 - Node.DOCUMENT_NODE : 문서 노드 타입을 나타내는 상수 9 Node.prototytpe.nodeName 노드 이름을 문자열로 반환 - 요소 노드 : 대문자 문자열로 태그이름을 반환 - 텍스트 노드 : 문자열 #text 반환 - 문서 노드 : 문자열 #document 반환 Hello 39.5 요소 노드의 텍스트 조작 39.5.1 nodeValue - Node.prototype.nodeValue 프로퍼티는 s..
[Deep dive] 39장 DOM (1) DOM - Document Object Mode - HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API , 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소 - HTML 문서를 구성하는 개별적인 요소 - HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 - HTML 문서는 HTML 요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 가짐 - HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성 트리 자료구조 - 부모 노드(parent node)와 자식 노드 (child node)로 구성되어 노드 ..
[Deep dive] 38장 브라우저의 렌더링 과정 파싱(parshing) - 구문 분석(syntax analysis) - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스트리(parse tree)를 생성하는 일련의 과정 렌더링(rendering) - HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력 38.1 요청과 응답 - 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청(request)하고 서버로부터 응답(response)받아 브라우저에 시각적으로 렌더링하는 것 - 서버에 요청을 전송하기 위해 브라우저는 주소창을 제공 - 브라우저의 주소창에 URL을 입력하고 엔터키를 누르..
[Deep dive] 37장 Set과 Map 37.1 Set - Set 객체는 중복되지 않는 유일한 값들의 집합 - 배열과의 차이점 구분 배열 set 객체 동일한 값을 중복하여 포함할 수 있다 O X 요소 순서에 의미가 있다 O X 인덱스로 요소에 접근할 수 있다. O X - 수학적 집합을 구현하기 위한 자료구조 - Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장 가능 37.1.1 Set 객체의 생성 - Set 객체는 Set 생성자 함수로 생성 - Set 생성자 함수에 인수를 전달하지 않으면 빈 객체 생성 const set = new Set(); console.log(set); //Set(0) {} - Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성 - 중복된 값은 Set 객체에 요소로 저장되지 않음 co..
[Deep dive] 36장 디스트럭처링 할당 디스트럭처링 할당(destructuring assignment) - 구조화된 배열과 같은 이터러블 또는 객체를 destrucuturing(비구조화)하여 1개 이상의 변수에 개별적으로 할당 - 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 떄 유용 36.1 배열 디스트럭처링 할당 - 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당 - 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스 - 할당 연산자 왼쪽에 할당받을 변수를 선언해야함, 이때 변수는 배열 리터럴 형태로 선언 const arr = [1,2,3]; //변수 one,two,three를 선언하고 배열 arr을 디스트럭처링하여 할당 c..
[Deep dive] 35장 스프레드 문법 스프레드 문법(spread syntax) - ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬 - 스프레드 문법을 사용할 수 있는 대상은 for ... of문으로 순회할 수 있는 이터러블에 한정 - 스프레드 문법의 결과는 값들의 목록이므로 변수에 할당 불가 // ...[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.log(...new Set([1,..
[Deep dive] 34장 이터러블 34.1 이터레이션 프로토콜 - 순회 가능한(iterable) 데이터 컬렉션을 만들기 위해 ESMAScript 사양에서 정의하여 미리 약속한 규칙 - 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 34.1.1 이터러블 - 이터러블 프로토콜을 준수한 객체 - Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현 or 프로토타입 체인을 통해 상속받은 객체 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; //배열,문자열,Map,Set 등은 이터러블 isIterable([])..