39.1 노드1. HTML 요소와 노드 객체Hello시작 태그, 어트리뷰트 이름, 어트리뷰트 값, 콘텐츠, 종료 태그start tag, attribute name, attribute value, contents, end tag HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨요소 노드, 어트리뷰트 노드, 텍스트 노드 HTML 요소의 중첩 관계 반영하여 트리 자료구조 구성(비선형 자료구조)루트 노드: 부모 노드가 없는 최상위 노드리프 노드: 자식 노드가 없는 노드 노드 객체들로 구성된 트리 자료구조: DOM 2. 노드 객체의 타입총 12개 종류 중 중요한 4가지 문서 노드 document nodedocument 객체브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체..
Node.js: 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 파싱 parsing프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 파스 트리(트리 구조)를 생성하는 과정파싱이 완료된 이후 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행(38.6 자바스크립트 파싱과 실행) 렌더링 renderingHTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저 렌더링 과정1. 브라우저는 HTML, CSS, 자바스크립트, ..
37.1 Set중복되지 않는 유일한 값들의 집합수학적 집합을 구현하기 위한 자료구조(교집합, 합집합, 차집합, 여집합 등) 배열과 달리 동일한 값이 중복될 수 없고, 요소 순서에 의미가 없고, 인덱스로 접근할 수 없음 요소 순서에 의미를 갖지 않지만 요소가 추가된 순서로 Set 객체를 순회함이터러블의 순회와 호환성을 유지하기 위함 1. Set 객체의 생성Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체 생성중복을 허용하지 않기 때문에 배열에서 중복된 요소를 제거할 수 있음const arrSet = new Set([1, 2, 3]);const strSet = new Set('hello'); 2. 요소 개수 확인 Set.prototype.size setter 함수 없이 getter 함수만 존재하는..
36.1 배열 디스트럭처링 할당URL을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 반환하는 예시function parseURL(url = '') { const parsedURL = url.match(/^(\w+):\/\/([^/]\/(.*)$/); if (!parsedURL) return {}; const [, protocol, host, path] = parsedURL; return { protocol, host, path };} 36.2 객체 디스트럭처링 할당const str = 'Hello'; // String 래퍼 객체const { length } = str; // 5
스프레드 문법을 사용할 수 있는 대상: 이터러블 스프레드 문법은 값이 아닌 값들의 목록을 만듦- 함수 호출문의 인수 목록- 배열 리터럴의 요소 목록- 객체 리터럴의 프로퍼티 목록 Rest 파라미터와 반대 개념 35.1 함수 호출문의 인수 목록에서 사용하는 경우const arr = [1, 2, 3];Math.max(...arr);// 스프레드 문법 제공 이전Math.max.apply(null, arr); 35.2 배열 리터럴 내부에서 사용하는 경우기존 방식보도 간결하고 가독성 좋게 표현할 수 있음 1. concat[1, 2].concat([3, 4]);[...[1, 2], ...[3, 4]); 2. spliceconst arr1 = [1, 4];const arr2 = [2, 3];arr1.splice(1..
34.1 이터레이션 프로토콜순회 가능한 자료구조를 만들기 위한 규칙ES6에서 도입. for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 이터러블 프로토콜Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나,프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면이터레이터 프로토콜을 준수한 이터레이터 반환 이터러블 이터러블 프로토콜(규약)을 준수한 객체for...of문 순회, 스프레드 문법, 배열 디스트럭처링 할당 사용 가능const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; 2021.01 TC39 프로세스의 stage 4(Fini..
33.1 심벌이란?다른 값과 중복되지 않는 유일무이한 값(원시 타입)이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입(하위 호환성 보장) 33.2 심벌 값의 생성1. Symbol 함수new 연산자 없이 호출인자로 문자열을 넘겨 설명을 추가할 수 있음. 디버깅 용도로 사용(설명이 같아도 다른 심벌 값을 생성함)const symbol = Symbol();console.log(symbol); // Symbol()const coffee = Symbol('coffee');console.log(coffee.description); // coffeeconsole.log(coffee.toString()); // Symbol(coff..
32.1 String 생성자 함수String 래퍼 객체 생성const strObj = new String();// String {length: 0, [[PrimitiveValue]]: ""}const strObj2 = new String('Lee'); // String {0: "Lee", 1: "e", 2: "e", length: 3, [[PrimitiveValue]]: "Lee"}ES5의 [[PrimitiveValue]]은 [[StringData]]와 동일 유사 배열 객체, 이터러블인덱스로 문자에 접근할 수 있으나 원시값이기 때문에 값을 변경할 수 없음 문자열로 변환하기 위해 new 연산자를 붙이지 않고 호출하기도 함(9.3 명시적 타입 변환) 32.3 String 메서드문자열은 원시값(변경 불가능)..
31.1 정규 표현식이란?일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어패턴 매칭 기능: 특정 패턴과 일치하는 문자열을 검색하거나 추출, 치환할 수 있는 기능 31.2 정규 표현식의 생성정규 표현식 리터럴 /regexp/flagsRegExp 생성자 함수 new RegExp(pattern[, flags]) 31.3 RegExp 메서드1. RegExp.prototype.exec(string)정규 표현식의 패턴을 검색하여 매칭되는 첫 번째 결과를 배열에 담아 반환(g 플래그가 있어도)없으면 null 반환 2. RegExp.prototype.test(string)정규 표현식 패턴을 검색하여 매칭 결과를 불리언으로 반환 3. String.prototype.match(regExp)전달된 정규 ..
Date날짜와 시간(연월일시분초밀리초)을 위한 메서드를 제공하는 빌트인 객체이자 생성자 함수 30.1 Date 생성자 함수new Date()는 현재 날짜와 시간을 갖는 Date 객체 반환Date()는 현재 날짜와 시간을 갖는 문자열 반환 new Date(milliseconds) 1970년 1월 1일 00:00:00(UTC) + 전달된 밀리초를 나타내는 Date 객체 반환new Date(dateString) Date.parse 메서드에 의해 해석된 날짜와 시간을 나타내는 Date 객체 반환 new Date(year, month[, day, hour, minute, second, millisecond])year month0 ~ 11day1 ~ 31 hour0 ~ 23minute0 ~ 59second0 ~ 5..