일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 모던 자바스크립트 Deep Dive
- 이미지 갤러리 최적화
- 프론트엔드 성능 최적화 가이드
- 학습내용정리
- package management
- const
- 진행기록
- version management
- 프로그래머스
- 자바스크립트 패턴
- 스코프
- peerdependencies
- Babel과 Webpack
- js pattern
- 자바스크립트
- js pattern
- 자바스크립트 딥다이브
- DOM
- unique identifiers
- 새 코드 받아오기
- 블로그 서비스 최적화
- 딥다이브
- 제너레이터와 async/await
- 브라우저의 렌더링 과정
- 이벤트
- 올림픽 통계 서비스 최적화
- middleware pattern
- mixin pattern
- pr review
- 커리어
- Today
- Total
목록Tech Books & Lectures/Javascript_Modern JS Deep dive (46)
Dev Blog

25.1 클래스는 프로토타입의 문법적 설탕인가? 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕_syntactic sugar 이라고 볼 수도 있다. 클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다. 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다(그렇다고 클래스가 자바스크립트의 다른 객체 생성 방식보다 우월하다고 생각하지는 않는다). 특히 클래스의 extends와 super 키워드는 상속 관계 구현을 더욱 간결하고 명료하게 한다. 새로운 객체 생성 메커니즘으로 보는 것이 좀 더 합당하다. 25.2 클래스 정의 클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체..

A closure is the combination of a function and the lexical environment within which that function was declared 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 24.1 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조_Outer Lexical Environment Reference 를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조..

실행 컨텍스트_execution context 는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러 비동기 처리의 동작 방식 을 이해할 수 있다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 이다. 23.1 소스코드의 타입 이 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드(실행 가능한 코드executable code)를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. 1. 전역 코드 전역..

22.1 this 키워드 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 getDiameter 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 circle 식별자에 생성된 객체가 할당된 이후다. 따라서 메서드 내부에서 circle 식별자를 참조할 수 있다. 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않으며 바람직하지도 않다. 생성자 함수 방식으로 인스턴스를 생성하는 경우를 생각해보자. 생성자 함수에 의한 객체 생성..

21.1 자바스크립트 객체의 분류 표준 빌트인 객체_standard built-in objects/global objects : 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체_host objects : 자바스크립트 실행 환경(브라우저 환경 또는 Node.js 환경)에서 추가로 제공하는 객체를 말한다. 브라우저 환경에는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와..

20.1 strict mode 란? 위 함수가 작동하면, 1. 자바스크립트 엔진은 먼저 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 2. foo 함수의 스코프에는 x 변수의 선언이 없으므로 검색은 실패하고, x 변수를 검색하기 위해 foo 함수 컨텍스트의 상위 스코프(여기선 전역)에서 x 변수의 선언을 검색한다. 3. 전역 스코프에도 x 변수의 선언이 존재하지 않기 때문에 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 이러한 현상을 암묵적 전역이라 한다. 이러한 경우, 의도치 않은 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들고, 그 환경에서 개발..

19.1 객체지향 프로그래밍 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍_Imperative programming 의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체_object 의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성_attribute/property 을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다. 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 ..