개발 스터디

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 40.1 이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다. 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. Click me! 40.2 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내느 문자열이다. 이벤트 타입은 약 200여 가지가 있다. 40.2.1 마우스 이벤트 이벤트 타입 이벤트 발생 시점 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 ..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 브라우저가 HTML, CSS, 파싱 파싱은 프로그래밍 언어 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실해기 위해 택스트 문서의 문자열을 토큰으로 분해하고, 토큰의 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 브라우저의 랜더링 과정 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 렌더링 엔진은 서버로부터 응답된..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 37.1 Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 다음과 같은 차이가 있다.구분 배열 Set 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set객체는 수학적 집합을 구현하기 위한 자료구조이다. 교집합, 합집합, 차집합, 여집합 등 37.1.1 Set 객체의 생성 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 중복된 값은 Set 객체에 요소로 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]) console.log(set1) //..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 36.1 배열 디스트럭처링 할당 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다 const arr = [1, 2, 3] const one = arr[0] const two = arr[1] const three = arr[2] console.log(one, two, three) // 1 2 3 배열 디스트럭처링 할당의 대상은 이터러블이여야 하며, 할당 기준은 배열의 인덱스다. const arr = [1, 2, 3] const [one, two, three] = ar..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. ES6에서 도입된 스프레드 문법 …은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정된다. console.log(...[1, 2, 3]) // 1 2 3 console.log(...'Hello') // H e l l o console.log(...new Map([['a', '1'], ['b', '2']])) // ['a', '1'] ['b', '2'] console.log(...new Set([1, 2, 3])) // 1 2 3 consol..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 34.1 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위하 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜이러한 규약을 이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for…of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어이다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var Person = (function() { function Person(name) { this.name = name } Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name) } return Person }) var me = new Person('Lee'..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하려면 자바스립트가 스코프를 기반으로 식별자에 바인딩된 값을 관리하는 방식과 오이스팅이 발생하는 클로저의 동작방식 그리고 태크스 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작방식을 이해할 수 있다. 23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 전역코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 함수 코드 함수 내부..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 22.1 this 키워드 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 22-01 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조변수다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수있다. this 는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 할 수 있다. this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 객체 리털럴과 생성자 함수의 예제를 this를 사용해 수정해보자. 22-03 객체 리터럴의 메서드 내부에서의 this는 ..

모던 자바스크립트 Deep Dive을 요약한 내용입니다. 21.1 자바스크립트 객체의 분류 자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공 자바스크립트 실행 환경과 관계없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web..