본문 바로가기
반응형

모던자바스크립트Deepdive25

브라우저의 렌더링 과정 (모던 자바스크립트 Deep Dive) 파싱(parsing) 다음과 같은 일련의 과정을 일컫는다. 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽는다. 프로그램을 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해한다. 토큰에 문법적 의미와 구조를 반영한다. 트리 구조의 자료구조인 파스 트리를 생성한다. 파싱이 완료되면 파스 트리를 기반으로 중간 언어인 byte code를 생성하고 실행한다. 렌더링(rendering) HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 렌더링 과정 브라우저는 렌더링에 필요한 리소스를 서버에게 요청하고 응답받는다. 응답 온 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답 온 자바스크립트를 파싱하.. 2024. 4. 17.
배열 (모던 자바스크립트 Deep Dive) 27.1 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 const array = ['apple', 'banana', 'orange']; 배열이 가지는 값을 요소 라고 한다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 원시값, 객체, 함수, 배열 등 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스 를 가진다. 요소에 접근할 때 사용된다. 요소 접근은 대괄호 표기법을 사용한다. array[0] → ‘apple’ 배열은 자신의 길이를 나타내는 length 프로퍼티를 가지고 있다. 순회가 가능하다. 배열은 객체 타입이다. 배열과 객체의 차이는 값의 순서와 length 프로퍼티이다. 27.2 자바스크립트의 배열은 배열이 아니다. 자료구조에서 말하는 배열은 메모리 공간이 빈틈없이 연속적으로.. 2024. 4. 17.
클래스 (모던 자바스크립트 Deep Dive) 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트에서 클래스는 함수이다. 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록하는 새로운 객체 생성 메커니즘이다. 생성자 함수와 유사하나 차이는 있다. 꼭 new 연산자가 필요하다. 상속을 지원하는 extends와 super 키워드를 제공한다. 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내부 코드는 무조건 strict mode가 지정된다. 열거되지 않는다. 25.2 클래스 정의 class 키워드를 사용하며 일반적으로 파스칼 케이스를 사용한다. 클래스는 함수이기 때문에 일급 객체이다. 그러므로 일급 객체의 특징을 가진다. 무명의 리터럴로 생성할 수 있고, 런타임에 생성이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 매.. 2024. 4. 17.
클로저 (모던 자바스크립트 Deep Dive) 함수형 프로그래밍 언어에서 사용되는 중요한 특성이며 자바스크립트 고유의 개념은 아니다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. From. MDN 24.1 렉시컬 스코프 함수가 어디서 호출되었는지가 중요하지 않고, 함수가 어디에서 정의되었는지에 따라 상위 스코프를 결정한다. 이것이 렉시컬 스코프이다. 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이고, 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결되고, 이것은 스코프 체인이며 외부 렉시컬 환경에 대한 참조는 함수가 정의된 위치에 의해 결정된다. 24.2 함수 객체의 내부 슬롯 [[Environment]] 함수가 정의되어 평가되는 시점에서 상위 스코프를 기억해야한다. 이것이 내부 슬롯 [[Environ.. 2024. 4. 16.
728x90
반응형

티스토리툴바