실행 컨텍스트 1. 실행 컨텍스트 개념 ESMAScript에서는 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로 기술. 콜스택(Call Stack)과 연관하여 정의하면 실행 가능한 자바스크립트 코드 블록이 실행되는 환경, 이 컨텍스트 안에 실행에 필요한 여러 가지 정보가 담김. ※ 콜스택(Call Stack) 함수를 호출할 때 해당 함수의 호출 정보(C언어를 예를 들면, 함수의 호출 정보 등으로 함수 내의 지역 변수 혹은 인자값 등)가 차곡차곡 쌓여있는 스택을 의미 실행 컨테스트의 생성의 의미 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련없는 실행 코드가 실행되면, 새로운 컨텍스트가 실행되어 스택에 들어가고 제어권이 그 컨텍스트로 이동. 예제) console.log("This i..

정의 this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성 예제) 설명 메소드를 호출한 객체는 m1, 이때 method()가 실행되면 메서드 내부에서 자바스크립트 엔진에 의해 this 속성이 생성 this는 method를 호출한 m1 객체가 저장, 일반 객체의 메서드에서의 this는 메서드를 호출한 객체 하지만 this 속성은 메서드를 호출할 때뿐만 아니라 다양한 상황에서 만들어 짐. 다양한 상황에서 this가 만들어지는 경우 일반 함수에서의 this - window 객체 중첩 함수에서의 this - window 객체 이벤트에서의 this - 이벤트를 발생시킨 객체 메서드에서의 this - 메서드를 호출한 객체 메서드 내부에의 중첩 함수에서의 this - window 객체 1. 일반 함수에서의..

DOM Document Object Model, 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리. DOM은 정의 부분(명세서) 와 구현부분으로 구성 정의 부분(명세서) : 웹 페이지(또는 XML) 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는 존재하지 않는다. 이는 함수 이름만 있고 구현 코드가 없는 것과 같다. 웹 표준 관련 표준을 정의하는 W3C에서 명세서 제공 구현 부분 : 브라우저 내부에 존재. 브라우저(IE, Chrome, FireFox, Safari) 업체는 저마다의 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현. IDL(Interface Definition Language) D..

콜 스택(Call Stack)과 메모리 힙(Memory Heap) 메모리 힙(Memoery Heap) 정보를 저장하는 공간 Memory Allocation 이 발생하는 공간 객체는 대부분 구조화 되지 않은 메모리 영역인 힙 역역 내부에 할당 콜 스택(Call Stack) 실행 중인 코드를 트래킹하는 공간 자바스크립트 코드 실행을 위해 제공된 싱글 스레드 메모리 힙에서 작업 수행에 필요한 것을 찾아 수행하는 공간 Javascript Engine 내부 구조 콜 스택(Call Stack) 동작 과정 var value = "value1"; function printFunc() { var value = "value2"; function printValue() { return value; } console.log(..

Javascript Runtime 자바스크립트 런타임 구조 싱글 스레드 자사스크립트는 기본적으로 싱글 스레드 지원. 즉 Call Stack에 쌓여 있는 작업을 하나씩 수행. 싱글 스레드에서 동기적으로만 동작한다면 여러 문제가 발생 할 수 있음, 예를 들어 용량이 큰 데이터를 받아서 띄워주는 경우 시간이 오래 걸리거나 최악의 경우에는 웹 페이지를 띄우지 못하는 경우가 생길 수 있음. 이런 문제를 대비해서 자바스크립트는 싱글스레드에서도 비동기적인 프로그래밍이 가능하도록 Event Queue, Event Loop 같은 장치 지원. Web API 브라우저는 자바스크립트 엔진 뿐만 아니라 Web API도 함께 제공되는 자바스크립트 런타임을 내장. Web API를 통해 setTiemout, HTTP 요청 메소드, ..

1. 개요 브라우저에서 렌더링의 성능은 중요한 요소 가운데 하나 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있음 2. 브라우저의 주요 컴포넌트 웹 앱을 구성할 때 자바스크립트의 코드를 작성하는 것과 실행하는 것을 분리하면 안됨 자바스크립트 코드는 환경과 상호작용 1) 사용자 인터페이스 주소 입력 바, 앞/뒤로가기 버튼, 즐겨찾기 메뉴 등. 웹 페이지를 보는 창을 제외한 브라우저 디스플레이의 모든 부분. 2) 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 상호작용을 다름. 3) 렌더링 엔진 웹 페이지의 표시를 책임. 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 내용을 표시. 4) 네트워킹 다양한 플랫폼에서 여러 구현 방식을 사용해 만들어진 XHR 요청과 같은 네트워..