Front-End

보름이라는데 맛난거 많이드세요 ㅎㅎ ㅎㅇㅌ = 1. 호출 스케줄링 = 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다. 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.❌ 하지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체다. 타이머 함수 setTimeout과 setInt..

= 1. 이벤트 드리븐 프로그래밍 = 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출된 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라❌ 브라우저에게 함수 호출을 위임하는 것이다. Click me! 버튼 요소 sbutton의 onclick 프로퍼티에 함수를 할당했다. 이 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당 한 함수가 브라우저에 의해 호출된다. 이처럼 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수..

브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. = 1. 노드 = - 1) HTML 요소와 노드 객체 - HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML요소들의 집합으로 이뤄지며, HTML 요소는 중첩 관계를 갖는다. 즉, HTML 요소의 콘텐츠 영역(시작 태그와 종료 태그..

구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹페이퍼지/애플리케이션의 클라이언트 사이드다. 대부분의 프로그래밍 언어는 운영체제나, 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에..

= 1. Set = Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. - 1) Set 객체의 생성 - Set 객체는 Set 생성자 함수로 생성한다. 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 ..

디스트럭처링 할당 (구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. = 1. 배열 디스트럭처링 할당 = ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다. // ES5 var arr = [1, 2, 3]; var one = arr[0]: var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의..

ES6에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, string, Map, set, DOM 컬렉션(Nodelist, HTML.collection). arguments와 같이 for ...of 문으로 순회할 수 있는 이터러블에 한정된다. // ... [1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3) corsole.log(... [1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(... 'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log( ... new Map(..

= 1. 이터러블 = ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 ➡ 순회 가능한 데이터 컬렉션 등은 통일된 규약 없이 ❌ 각자 나름의 구조를 가지고 for 문, for ... in 문, fOrEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 ➡ 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다. • 이터러블 프로토콜(iterable prolocol) Well-know..

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. ❌Math는 생성자 함수가 아니다.❌ 따라서 Math는 정적 프로퍼티와 정적 메서드만 제공한다. = 1. Math 프로퍼티 = 원주율 PI값 (π ≈ 3.141592653589793)을 반환한다. Math.PI; // 3.141592653589793 = 2. Math 메서드 = - 1) Math.abs - Math.abs 메서드는 인수로 전달된 숫자의 절대값을 반환한다. 절대값은 반드시 0또는 양수이어야 한다. Math.abs(-1); // -1 Math.abs('-1'); // -1 Math.abs(''); // 0 Math.abs([]); // 0 Math.abs(null); // 0 Math.abs(undefi..

표준 빌트인 객체인 Number는 원시타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 설날에도 화이링 = 1. Number 생성자 함수 = 표준 빌트인 객체인 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. Number 생상자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. const numObj = new Number(); console.log(numObj); // Number { [[PrimitiveValue]] : 0 } 위 예제를 크롬 브라우저 개발자 도구에서 실행해 보면 [[PrimitiveValue라는 접근할수 없..