NAN-NOO

🔰이벤트 이벤트 드리븐 프로그래밍 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 사용자가 언제 함수를 호출할지 알 수 없으므로 개발자가 호출하지 않고 브라우저에게 함수 호출을 위임한다. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 약 200여 가지가 있다. focusin, focusout 이벤트 핸들러를 이벤트 핸들러 프로퍼티 방식으로 등록하면 크롬, 사파리에서 정상 동작하지 않는다. addEventListener 메서드 방..

🔰브라우저의 렌더링 과정 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려해야 더 효율적인 프로그래밍이 가능하다. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저 렌더링 엔진은 서버로부터 응답받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저 자바스크립트 엔진은 서버로부터 응답받은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 ..

🔰이터러블 이터레이션 프로토콜 ES6에 도입된 순회 가능한(iterable) 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약 없이 각자 구조를 가지고 다양한 방법으로 순회할 수 있었다. ES6부터 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. 이터러블 프로토콜(iterable protocol) 이터레이터 프로토콜(iterator protoco..

🔰Date 표준 빌트인 객체 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다. 🍎 UTC(Coordinated Uiversal Time; 협정 세계시) UTC는 국제 표준시를 말한다. GMT(Greenwich Mean Time)이라 불리기도 한다. UTC와 GMT는 초의 소수점 단위에서만 차이가 나기때문에 일상에서는 혼용되어 사용된다. 기술적인 표기에서는 UTC가 사용된다. KST(Korea Standard Time; 한국 표준시)는 UTC에 9시간을 더한 시간이다. 즉, UTC 00:00 AM은 KST 09:00 AM이다. Date 생성자 함수 new 연산자 없이 호출하면 날짜와 시간 정보를 나타내..

🔰배열 배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열이 가지고 있는 값을 요소(element)라 부르고 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다. 요소에 접근할 때는 대괄호 표기법을 사용한다. 자바스크립트에는 배열이라는 타입은 존재하지 않는다. 자바스크립트의 배열은 객체 타입이다. 다만 일반 객체와는 달리 값의 순서가 있고 length 프로퍼티를 가진다는 특징이 있다. 배열은 이 특징으로 인해 순차적으로 값에 접근하기 적합하다. 자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있다. 자바스크립트 배열은 배열..

🔰클래스 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요 없지만, 클래스 기반 언어에 익숙한 프로그래머들을 위해 ES6에 클래스가 도입되었다. 자바스크립트의 클래스는 사실 함수이며, 프로토타입 기반이다. 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 클래스는 더 엄격하고 새로운 기능을 제공한다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 강제된다. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 ..

🔰this this 키워드 객체의 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 메서드 자신이 속한 객체를 재귀적으로 참조할 수 있으나 일반적이지 않고 바람직하지 않다. 생성자 함수 내부에서도 생성할 인스턴스에 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. this는 자바스크립트가 제공하는 특별한 식별자로, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 ..

🔰프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 객체지향 프로그래밍 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍(imperative programming)의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시..

🔰프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 자바스크립트 엔진 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 pseudo property와 pseudo method다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 개발자가 직접 접근할 수 있는 공개된 객체의 프로퍼티가 아니다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접 접근 수단을 제공하기도 한다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태란 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(e..

🔰스코프 스코프란? 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 이를 식별자 결정(identifier resolution)이라 한다. 따라서 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 한다. 스코프가 없다면 같은 이름을 갖는 식별자는 충돌을 일으킨다. 식별자는 유일해야 한다. 프로그래밍 언어에서는 스코프를 통해 식별자의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스코프 내에서 식별자는 유..