꾸준한 개발자

계속적인 성장을 추구하는 개발자입니다. 꾸준함을 추구합니다.

계속 쓰는 개발 노트

JAVASCRIPT 73

브라우저 렌더링 과정

대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클리언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됩니다. 따라서 브라우저 환경을 고려할 떄 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능합니다. 브라우저 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지 폰트 파일 등 렝더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를..

클로저란

MDN에서는 클로저를 다음과 같이 정의합니다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). (번역) 클로저는 주변 상태 (렉시컬 환경)에 대한 참조와 함께 번들로 묶인 (포함된) 함수의 조합입니다. 위 정의만으로는 이해가 쉽게 되지 않습니다. 다음 예제를 보겠습니다. const a = 1; function outerFunc() { const a = 2; function innerFunc() { console.log(a); // 2 } innerFunc(); } outerFunc(); outerFunc 함..

실행 컨텍스트란

ECMAScript 사양은 소스코드를 4가지 타입으로 구분합니다. 전역 코드 : 전역에 존재하는 소스코드 함수 코드 : 함수 내부에 존재하는 소스코드 eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 : 모듈 내부에 존재하는 소스코드 소스코드를 4가지 타입으로 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문입니다. 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역입니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스..

자바스크립트에서 this는 어떻게 바인딩될까

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. const person = { name: 'geumyong', sayHi() { console.log(`Hi! ${this.name}`); } }; person.sayHi(); 위 예제에서 this는 person을 가리킵니다. function Person(name) { this.name = name; } person.prototype.sayHi = function () { console.log(`Hi! ${this.name}`); }; const p..

프로토타입이란

객체지향 프로그래밍 객체지향 프로그래밍이란 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임입니다. 철학적 사고를 프로그래밍에 접목하려는 시도들이 있었고, 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있습니다. 예를 들어서 사람은 이름, 성별, 나이, 주소 등 다양한 속성을 갖습니다. "이름이 석금용이고 성별은 남자이며 나이는 29살인 사람"으로 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구별하여 인식할 수 있습니다. 프로그램에 대입해보면, "이름"과 "성별"에만 관심있다고 할 때, 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 표현하는 것을 추상화라 합니다. 아래 예시는"이름"과 "성별"이라는 속성을 갖..