분류 전체보기(67)
-
스코프 체인
스코프 체인의 의미 자바스크립트에서는 함수 내의 블록(for, if)와 같은 구문은 유효 범위가 없으며, 오직 함수만이 유효 범위의 한 단위가 됨. 이 유효 범위를 나타내는 스코프 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데 이를 스코프 체인이라고 함. 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 형성. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); console.log(var2); 설명 코드가 실행되면, 전역..
2020.03.05 -
실행 컨텍스트
실행 컨텍스트 1. 실행 컨텍스트 개념 ESMAScript에서는 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로 기술. 콜스택(Call Stack)과 연관하여 정의하면 실행 가능한 자바스크립트 코드 블록이 실행되는 환경, 이 컨텍스트 안에 실행에 필요한 여러 가지 정보가 담김. ※ 콜스택(Call Stack) 함수를 호출할 때 해당 함수의 호출 정보(C언어를 예를 들면, 함수의 호출 정보 등으로 함수 내의 지역 변수 혹은 인자값 등)가 차곡차곡 쌓여있는 스택을 의미 실행 컨테스트의 생성의 의미 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련없는 실행 코드가 실행되면, 새로운 컨텍스트가 실행되어 스택에 들어가고 제어권이 그 컨텍스트로 이동. 예제) console.log("This i..
2020.03.05 -
this 정체
정의 this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성 예제) 설명 메소드를 호출한 객체는 m1, 이때 method()가 실행되면 메서드 내부에서 자바스크립트 엔진에 의해 this 속성이 생성 this는 method를 호출한 m1 객체가 저장, 일반 객체의 메서드에서의 this는 메서드를 호출한 객체 하지만 this 속성은 메서드를 호출할 때뿐만 아니라 다양한 상황에서 만들어 짐. 다양한 상황에서 this가 만들어지는 경우 일반 함수에서의 this - window 객체 중첩 함수에서의 this - window 객체 이벤트에서의 this - 이벤트를 발생시킨 객체 메서드에서의 this - 메서드를 호출한 객체 메서드 내부에의 중첩 함수에서의 this - window 객체 1. 일반 함수에서의..
2020.03.05 -
DOM(Document Object Model)
DOM Document Object Model, 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리. DOM은 정의 부분(명세서) 와 구현부분으로 구성 정의 부분(명세서) : 웹 페이지(또는 XML) 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는 존재하지 않는다. 이는 함수 이름만 있고 구현 코드가 없는 것과 같다. 웹 표준 관련 표준을 정의하는 W3C에서 명세서 제공 구현 부분 : 브라우저 내부에 존재. 브라우저(IE, Chrome, FireFox, Safari) 업체는 저마다의 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현. IDL(Interface Definition Language) D..
2020.03.05 -
콜스택과 메모리 힙
콜 스택(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(..
2020.03.05 -
Javascript Runtime
Javascript Runtime 자바스크립트 런타임 구조 싱글 스레드 자사스크립트는 기본적으로 싱글 스레드 지원. 즉 Call Stack에 쌓여 있는 작업을 하나씩 수행. 싱글 스레드에서 동기적으로만 동작한다면 여러 문제가 발생 할 수 있음, 예를 들어 용량이 큰 데이터를 받아서 띄워주는 경우 시간이 오래 걸리거나 최악의 경우에는 웹 페이지를 띄우지 못하는 경우가 생길 수 있음. 이런 문제를 대비해서 자바스크립트는 싱글스레드에서도 비동기적인 프로그래밍이 가능하도록 Event Queue, Event Loop 같은 장치 지원. Web API 브라우저는 자바스크립트 엔진 뿐만 아니라 Web API도 함께 제공되는 자바스크립트 런타임을 내장. Web API를 통해 setTiemout, HTTP 요청 메소드, ..
2020.03.05