ES6에서 비동기 처리를 위한 패턴으로 프로미스를 도입한다.이는 전통적 콜백 패턴이 가진 단점을 보완, 비동기 처리 시점을 명확히 표현할 수 있다는 장점을 가진다.1. 비동기 처리를 위한 콜백 패턴의 단점전통적인 비동기 처리의 예시를 보자.const get = (url, successCallback, failureCallback) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // todos = JSON.parse(xhr.response); successCallback(JSON.parse(xhr.response)); } els..
모던자바스크립트-DeepDive
JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.또한 싱글 스레드 방식으로 동작하기에, 처리에 시간이 걸리는 작업을 수행하는 경우 블로킹 현상이 발생한다.비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용한다.비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 저하시키고, 비동기 처리 중 발생한 예외가 곤란하며,여러 비동기를 한 번에 처리하는 데 한계가 있다. 이런 것들에 대해선 프로미스에서 살펴보자.1. 이벤트 루프와 태스크 큐JS의 동시성을 지원하는 것이 이벤트 루프이다. 브라우저 내장 기능 중 하나이다.구글 V8 엔진을 비롯한 대부분의 JS 엔진은 2개의 영역으로 구분 가능하다.콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행..
타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아니지만, 브라우저 환경과 Node.js 환경 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다.JS 엔진은 단 하나의 실행 컨텍스트를 가지며, JS 엔진은 싱글 스레드로 동작한다.이런 이유로 타이머 setTimeout과 setInterval은 비동기 방식으로 동작한다.const timerId = setTimeout(() => console.log('Hey'), 1000);clearTimeout(timerId);const timeoutId = setInterval(() => { console.log(count); if (count++ === 5) clearInterval(timeoutId);}, 1000);s..
1. 이벤트 객체이벤트 발생 시 이벤트 객체가 생성된다.생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문에, 전달받을 매개변수를 명시적으로 선언해야 하기 때문이다.이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체 또한 생성자 함수에 의해 생성된다.이는 프로토타입 체인의 일원이 된다.Event.prototype에 정의된 이벤트 프로퍼티는 모든 파생 객체에 상속된다.더보기공통 프로퍼티설명타입type이벤트 타입stringtarget이벤트를 발생시킨 DOM 요소DOM 요소 노드currentTarget이벤트 핸들러가 바인딩된 DOM 요소DOM 요소 노드eventPhase이벤트 전파 단계0: 이벤트 없음, 1: 캡처링, 2:..
간단하게 보아서, 브라우저는 다음과 같은 과정으로 렌더링을 수행한다.브라우저가 렌더링에 필요한 리소스를 서버로 요청, 응답을 받는다.브라우저 렌더링 엔진이 응답받은 HTML과 CSS를 파싱해 DOM, CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저 JS 엔진은 응답된 JS를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때 JS는 DOM API로 DOM, CSSOM을 변경할 수 있다. 변경된 이들은 다시 렌더 트리로 결합된다.최종 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산해 브라우저 화면에 HTML 요소를 페인팅한다.1. 요청과 응답브라우저는 서버에 렌더링에 필요한 요소들을 요청하고 응답받는다.브라우저의 렌더링 엔진은 HTML..
배열이란 여러 개의 값을 순차적으로 나열한 자료구조다. JS에는 배열 타입이 없으며, 배열은 객체 타입이다.1. JS 배열은 배열이 아니다.일반적인 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이다.하나의 데이터 타입으로 통일되어 있으며, 이런 배열을 밀집(dense) 배열이라 한다.JS의 배열은 각각 동일한 메모리 공간을 가지지 않아도 되며, 연속적으로 이어져 있지 않을 수 있다.이러한 배열 요소가 연속적으로 이어져 있지 않은 배열을 희소(sparse) 배열이라 한다. (기본적으로 해시테이블이다.)밀집 배열은 인덱스로 요소에 O(1)로 접근이 가능하나, 삽입 삭제가 효율적이지 않다.대부분 모던 JS 엔진은 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 배열..
함수를 일급 객체로 취급하는 함수형 언어에서 공통적으로 사용되는 중요한 특성이다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.함수가 선언된 렉시컬 환경은 뭘까. 이것부터 살펴보자.1. 렉시컬 스코프JS 엔진은 함수를 어디서 호출했는지가 아니라 어디서 정의했는지에 따라 상위 스코프를 결정한다.이를 렉시컬 스코프, 정적 스코프라 한다.실행 컨텍스트에서 살펴봤듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경으로, 이는 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프 체인이다.따라서 “함수의 상위 스코프를 결정”한다는 것은 “렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정"한다는 것과 동치된다. 결국 위 정의는,렉시컬 환경의 “외부 렉시..
실행 컨텍스트, execution context는 JS 동작 원리를 담고 있는 핵심 개념이다. 이를 바르게 이해해야 스코프를 기반으로 식별자와 바인딩된 값을 관리하는 방식, 호이스팅의 발생 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.1. 소스코드 타입4가지 타입의 소스코드가 존재하며, 각각의 실행 컨텍스트를 생성한다.2. 소스코드의 평가와 실행모든 소스코드는 실행에 앞서 평가를 거친다.평가 과정에서는 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다. 즉, 런..
