윤민상 블로그

비동기 프로그래밍 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 실행된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는 싱글 스레드 방식으로 동작하기 때문에 처리에 시간이 걸리는 테스크를 실행하는 경우 블로킹이 발생한다. 그런데 setTimeout은 블로킹이 발생하지 않는다. 이렇게 다음 태스크를 바로 실행하는 방식을 비동기 처리라고 한다. setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 콜 스택 : 소스코드 평가 과정에서 생성된 실..

이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 마우스 이벤트 click, dbclick, mousedown(눌렀을때), mouseup(땟을때), mousemove, mouseenter(마우스 커서를 HTML 요소 안으로 이동했을때(버블링 x)) mouseover(마우스 커서를 HTML 요소 안으로 이동했을때(버블링 o) mouseleave(마우스 커서를 HTML 요소 밖으로 이동했을 때(..

브라우저의 렌더링 과정 파싱 : 파싱(구문 분석(syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링 : 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 H..

이터러블 이터레이션 프로토콜 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜 : Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. for...of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. 이터레이터 프로토콜 : 이터러블의 Symbol.iterator 메서드를 호출하면 이터레..

Number isFinite : Infinity 또는 -Infinity이면 false, 숫자면 true (형변환x) isInteger : 정수인지 검사. boolean return (형변환 x) isNaN : nan이면 true. (형변환x) toFixed : 숫자를 반올림하여 문자열로 반환. 인수는 소수점 이하 자릿수.(디폴트 0) toPrecision : 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수 반올림(디폴트 0) toString : 숫자를 문자열로 반환. 진법을 인수로 넣을 수 있다.(디폴트 10) Math abs 절대값 round 소수점 이하 반올림 ceil 올림 floor 내림 sqrt 루트 random : 0이상 1미만. pow : (밑, 지수) 거듭제곱 => 지수 연산자 **..

배열 배열과 객체를 구분하는 가장 명확한 차이는 값의 순서와 length 프로퍼티다. 자바스크립트 배열은 배열이 아니다. 보통 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열이라 한다. but 자바스크립트에서는 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라 한다. 자바스크립트 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다. 예제를 보면 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로..

클래스 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다. 아니 새로운 객체 생성 메커니즘이다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇가지 차이가 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이 함수 표현식으로 정의한 생성..

실행 컨텍스트 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드, 함수 코드, eval 코드, 모듈 코드 모든 소스코드는 소스코드의 평가와 소스코드의 실행으로 나누어 처리한다. var x=1 => 평가 : x : undefined, 실행 : x : 1 전역 코드 평가 => 전역 코드 실행 => 함수 코드 평가 => 함수 코드 실행 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역 즉, 실행 컨텍스트는 식별자(변수, 함수, 클래스)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 식별자와 스코프..