CS/모던 자바스크립트 Deep Dive (41) 썸네일형 리스트형 38장 브라우저의 렌더링 과정 2023년 4월 29일 660p~676p 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자. 파싱(구문 분석) : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 렌더링 : html, css, js로 작성된 문서를 파싱하여 브라우저에 시각.. 34장 이터러블 2023년 4월 28일 614p~626p 34.1 이터레이션 프로토콜 iteration protocol은 순회 가능한(itrable)한 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6에서는 순회 가능한 자료구조를 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이있다. - 이터러블 프로토콜(iterable protocol) well-known Symbol인 Symbol.iterator를 프로퍼키 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호.. 26장 ES6 함수의 추가 기능 2023년 4월 26일 469p~491p 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분없이 다양한 목적으로 사용되었다. 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. 즉, ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다. 이러한 문제를 해결하기 위해 es6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분하였다. ES6 함수의 구분 constructor prototype super arguments 일반 함.. 25장 클래스(3) 2023년 4월 26일 448p~468p 25.8 상속에 의한 클래스 확장 상속에 의한 클래스 확장은 프로토타입 기반 상속과는 다른 개념이다. 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만, 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 기본적으로 제공되지만 생성자 함수는 그렇지 않다. 상속에 의해 확장된 클래스 Bird를 통해 생성된 인스턴스의 프로토타입 체인은 아래와 같다. 상속에 의한 클래스 확장은 코드 재사용 관점에서 매우 유용하다. class Animal { constructor(age, weight) { this.age = age; this.weigh.. 25장 클래스(2) 2023년 4월 25일 435p~448p 25.6 클래스의 인스턴스 생성 과정 1.인스턴스 생성과 this바인딩 new 연산자와 함께 클래스를 호출하면 암묵적으로 빈 객체(인스턴스)가 생성된다. 빈 객체는 this에 바인딩된다. 2.인스턴스 초기화 constructor 내부의 코드가 실행되며 this에 인스턴스 프로퍼티를 추가한다. 이로써 빈 객체 즉, 인스턴스에 프로퍼티가 추가되어 인스턴스를 초기화된다. 3.인스턴스 반환 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. 인스턴스 프로퍼티는 언제나 public하다. class Person { // 생성자 constructor(name) { // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다. consol.. 25장 클래스(1) 2023년 4월 24일 417p~434p 25장 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는(class free)객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 아래와 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); };.. 24장 클로저(2) 2023년 4월 21일 401p~416p 24.4 클로저의 활용 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용된다. 상태를 안전하게 은닉(information hiding)하고 특정 함수에게만 상태 변경을 허용하기 위해 사용된다. 1.전역 변수로 관리 // 카운트 상태 변수 let num = 0; // 카운트 상태 변경 함수 const increase = function () { // 카운트 상태를 1만큼 증가 시킨다. return ++num; }; console.log(increase()); // 1 console.log(increase()); // 2 console.log(increase()); // 3 위 코드는 오류의 가능성이 있어 좋지 않은 코드다. num 전역 변수에 언제든지 누구나 접.. 24장 클로저(1) 2023년 4월 20일 388p~400p 24장 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정되고, 이것이 렉시컬 스코프다. 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과 상관없이 자신이 정의된 환경, 즉 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 이때 [[Environment]]에 저장된 상위 스코프의 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킨다. const x = 1; function.. 이전 1 2 3 4 5 6 다음