모던 자바스크립트 Deep Dive

Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있다. Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러개)의 파

모듈(module)이란 애플리케이션을 구성하는 개발적 요소로서 재사용 가능한 코드 조각을 말함. 일반적으로 모듈의 기능을 기준으로 파일 단위로 분리함. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 함.✔️ 모듈은 공개가 피요한 자산에 한정하여

발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 종료됨.Error 생성자 함수에는 에러를 상세히 설명하는 에러 메세지를 인수로 전달할 수 있음. Error 생성자 함수가 생성한 에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다. message 프로

ES6에 도입된 제너레이터(generator)는 코드 불록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 1\. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지 시키거

REST(Representational State Transfer)의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고, REST API는 REST를 기반으

Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 🔖 Ajax 이전의 웹페이지 작동 방식

먼저 서버의 응답 결과를 반환하는 GET 요청을 위한 함수를 작성해보면, ⭐️ 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에

Set 객체는 중복되지 않는 유일한 값들의 집합(set)이다. 배열과 유사하지만, Set 객체는 배열과 다르게 동일한 값을 중복하여 포함할 수 없고, 요소 순서에 의미가 없으며 인덱스로 요소에 접근할 수 없다. Set은 수학적 집합을 구현하기 위한 자료구조로, Set을

디스트럭처링 할당(destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말함. 배열 디스트럭처링 할당의 대상(할당문의

ES6에서 도입된 스프레드 문법(spread syntax) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬.Arraym String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와

이터레이션 프로토콜 이터러블 이터레이터 빌트인 이터러블 for ...of 문 이터러블과 유사 배열 객체 이터레이션 프로토콜의 필요성 사용자 정의 이터러블 사용자 정의 이터러블 구현 이터러블을 생성하는 함수 이터러블이면서 이터레이터인 객체를 생성하는 함수 무한 이터러블

ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 값은 Symbol 함수를 호출하여 생성! 👉 Symbol 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과

4.1 변수란 무엇인가? 왜 필요한가? 🧐 변수란? > 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위한 이름. 👉 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인 이름. 🧐 변수란 왜

자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking, 작업중단)이 발

👉 전역 코드(global code) : 전역에 존재하는 소스코드 (전역 실행 컨택스트)👉 함수 코드(function code) : 함수 내부에 존재하는 소스코드 (함수 실행 컨텍스트)👉 eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되

👉 표준 빌트인객체(standard built-in objects/native objects/global objects) 어플리케이션 전역의 공통 기능 제공, 전역 객체의 프로퍼티로서 사용된다.👉 호스트 객체(host objects) ECMAAscript 사양에 정

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propagation) 이라고 함.생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다. 이벤

attributes 프로퍼티 HTML 문서의 구성 요소인 HTML 요소는 여러 개의 속성을 가질 수 있음. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공. 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트는 모든 HTML에서 공통적으로 사용 가능. type, v

자바스크립트를 구성하는 거의 "모든 것"이 객체. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체. 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 key와 value로 구성된다. 🔖 원시타입의 값은 변경 불가능한 값(immutable va

브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다.

무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 👉 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미.

객체 내에서 메서드가 자신이 속한 객체의 프로퍼티를 팜조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.이를 위해 자바스크립트에서 this라는 특수한 식별자 제공.this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변

25.7 프로퍼티 🧐 인스턴스 프로퍼티 ✔️ 인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다. ✔️ 언제나 public하다. why? ES6클래스는 다른 객체지향 언어처럼 private, public, protected 키워드와 같은 접근 제한자(ac

만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라고 한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아님. 하지만

12장 함수 12.1 함수란? 🧐 프

DOM은 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소

이벤트 핸들러(event handler) ? 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 ? 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것. 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 "함수를 호출"하는 것이 아니라 "브라

✔️ ES6 이전의 모든 함수는 일반 함수로도 호출할 수도 있고, 생성자 함수로서 호출할 수 있다. (callable & constructor)🔖 참고)callable : 호출할 수 있는 함수 객체constructor : 인스턴스를 생성할 수 있는 함수 객체 non-

자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method). ECMAScript 사양에서 등장하는 이중 대괄호(\[...])로 감싼 이름들. 자바스크립트

👉 변수 중복 선언 허용 👉 함수 레벨 스코프 (전역 함수 남발 가능성) 👉 변수 호이스팅 (프로그램 흐름상 맞지 않을 뿐더러 가독성을 떨어뜨리고 오류 발생가능성)👉 변수 중복 선언 금지(const와 동일) 👉 블록 레벨 스코프 (const와 동일) 👉

자바스크립트는 프로토타입 기반 객체지향 언어. 클래스가 필요 없는 객체 지향 프로그래밍 언어이다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있음. ex)👉 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C 👉

선언하지 않은 식별자에 값을 할당하면 전역객체의 '프로퍼티' 가 된다. 이는 변수가 아니다. window.y = 20 처럼 해석되어, 전역객체의 프로퍼티가 되는 것. 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의

자바스크립트는 명령형(imperative), 함수형(functional),프로토타입 기반(prototype-based) 객체지향 프로그래밍(Object Ori-ented Programming)을 지원하는 멀티 패러다임 프로그래밍이다. 프로그램을 명령어 또는 함수의 목록

클로저 mdn에서 정의하고 있는 클로저에 대한 정의 > 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 24.1 렉시컬 스코프 🧐 렉시컬 스코프란? > 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를

전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. (즉 지역 변수의 생명 주기 = 함수의 생명 주기)메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리

스코프는 식별자가 유효한 범위를 말한다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는 것. 식별자를 검색할 때 사용하는 규칙이라고도 함. 자바스크립트 엔진이 어떤

✔️ 원시 타입 : 변경 불가능한 값, 객체 타입 : 변경 가능한 값✔️ 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장 된다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장✔️ 원시 값을 갖는 변수를 다른 변수에 할당하

new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 생성자 함수에 의해 생성된 객체 🔖 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise등의 빌

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능 (1999년 XMLHttpRequest라는 이름으로 등장)구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(runtime environment). 자바스크립트를 브러

식(표현식 expression)이 평가(evaluate)되어 생성된 결과 🔖 참고) 평가? 식을 해석해서 값을 생성하거나 참조하는 것.🔖 값의 특징 : 데이터 값을 가짐.메모리에 2진수 즉 bit의 나열로 저장된다. 사람이 이해할 수 있는 문자 또는 약속된 기호를

원시타입 - 숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, symbol 타입객체 타입 - 객체, 함수, 배열 등 🔖 숫자 타입은 모두 실수로 처리된다. 정수만 표한하기 위한 데이터 타입 별도로 존재하지 않음. Infinity(양의