본문 바로가기

전체 글112

모던 자바스크립트 Deep Dive - 브라우저의 렌더링 과정 38장 브라우저의 렌더링 과정 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링 하는지 살펴보자. 파싱(parsing) : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행함. 렌더링(rendering) : HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것. 브라우저의 렌더링 과정 1 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등.. 2024. 2. 7.
모던 자바스크립트 Deep Dive - Set과 Map 37장 Set과 Map Set Set 객체 : 중복되지 않는 유일한 값들의 집합 배열과 유사하지만 차이가 있음 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다 O X 인덱스로 요소에 접근할 수 있다. O X Set 객체의 특성은 수학적 집합의 특성과 일치. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현 가능. 1) Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨. 37-01 const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함. 이때 이터러블의 .. 2024. 2. 5.
모던 자바스크립트 Deep Dive - 디스트럭처링 할당 36장 디스트럭처링 할당 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법 36-01 // 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의 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며 할당 기준은 배열의 인덱스다. 즉 순서대로 할당된다. 36-02 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. con.. 2024. 2. 3.
모던 자바스크립트 Deep Dive - 스프레드 문법 35장 스프레드 문법 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for .. of 문으로 순회할 수 있는 이터러블에 한정. 35-01 // ...[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.log(...new Set([1, 2, 3])); // 1 2 3 // 이터러블이 아닌 .. 2024. 2. 3.
모던 자바스크립트 Deep Dive - 이터러블 34장 이터러블 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 만들기 위해 약속한 규칙. ES6 이전의 순회 가능한 자료구조, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for문, for … in 문, forEach 메서드 등 다양한 방법으로 순회 가능했음. ES6에서는 순회 가능한 자료구조를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화함. 이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이터 프로토콜이 있음. 1) 이터러블 프로토콜 Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 .. 2024. 2. 2.
모던 자바스크립트 Deep Dive - 7번째 데이터 타입 Symbol 33장. 7번째 데이터 타입 Symbol 심벌이란? 6개의 타입: 문자열, 숫자, 불리언, undefined, null, 객체 +심벌 심벌 변경 불가능한 원시 타입의 값, 다른 값과 중복되지 않는 유일무이한 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함. 심벌 값의 생성 1) Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성해야 함. 이렇게 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없음 다른 값과 절대 중복되지 않는 유일무이한 값이다. 33-01 // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노.. 2024. 2. 2.

티스토리툴바