공부하자

브라우저의 동작 원리는 면접에서 많이 나오는 질문이기도 하고 반드시 알아야 할 기본 개념 중 하나이기도 하다. 딥다이브 책에 자세히 서술되어 있어서 공부할 겸 정리해보았는데, 브라우저의 동작 원리를 파악하고 나니 index.html의 코드 로직에 대해서 잘 이해할 수 있었다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다. 이를 위해 브라우저는 서버로부터 HTML, CSS Javascript, 이미지 파일 등을 응답받는다. HTML, CSS HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. [ HTML 파싱과 DOM 생성 ] 브라우저의 요..

25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체 지향 프로그래밍 언어다. 하지만 기존 클래스 기반 언어에 익숙한 프로그래머들에게는 프로토타입 기반 방식에 혼란을 느끼고 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. 그래서 ES6부터 클래스가 도입되었는데, 기존의 프로토타입 기반 객체지향 모델을 없애고 클래스 기반 객체지향을 제공하는게 아니라 클래스 기반 객체 지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수..

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 스칼라 등)에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared. (클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.) 클로저를 자세히 알아보기 전 위 정의에서 가장 먼저 이해해야 할 핵심 키워드인 "함수가 선언된 렉시컬 환경"에 대해서 먼저 알아보자. const x = 1; function outerFunc() { const x = 10; functi..

23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입이 소스코드는 실행 컨텍스트를 생성한다. 전역 코드(global code) : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function code) : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함되지 않는다. eval 코드(eval code) : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드. 모듈 코드(module code) : 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에..

22.1 this 키워드 객체는 상태(statement)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가..

21.1 자바스크립트 객체의 분류 표준 빌트인 객체(Standard built-in objects/ native objects/ global objects) 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있고, 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체(host objects) 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 DOM, BOM, Canvas, ..

19.8 오버라이딩과 프로퍼티 섀도잉 const Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHellow = function () { console.log(`Hi! My name is ${this.name}`); }; // 생성자 함수를 반환 return Person; }()); const me = new Person('Lee'); //인스턴드 메서드 me.sayHello = function () { console.log(`Hey! My name is ${this.name}`); }; // 인스턴드 메서드가 호출된다. 프로토타입 메서드는 인스턴스 메서드..

19.1 객체 지향 프로그래밍 객체 지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임. 객체의 상태(status)를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다. 19.2 상속과 프로토타입 상속은 객체지향 프로그램의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 자바스크립트는 프로토..