자바스크립트 개념정리

이벤트 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 이벤트의 종류 1) 마우스 이벤트 이벤트 설명 click 요소에 마우스를 클릭했을 때 이벤트가 발생 dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생 mouseover 요소에 마우스를 오버했을 때 이벤트가 발생 mouseout 요소에 마우스를 아웃했을 때 이벤트가 발생 mousedown 요소에 마우스를 눌렀을 때 이벤트가 발생 mouseup 요소에 마우스를 떼었을 때 이벤트가 발생 mousemove 요소에 마우스를 움직였을 때 이벤트가 발생 contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 2) 키 이벤트..

웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다. Critical Rendering Path 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path, CPR이라고 한다. CRP의 6단계 과정 DOM 트리 구축 CSSSOM 트리 구축 JavaScript 실행 렌더 트리 구축 레이아웃 생성 페인팅 위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있다. 첫번째 단계 : 브라우저는 읽어들인 문서를 파..

Symbol Symbol 심벌

Set Set 객체는 중복되지 않는 유일한 값들의 집합set이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 배열과 달리 동일한 값을 중복하여 포함할 수 없다. 요소 순서에 의미가 없다. 인덱스로 요소에 접근할 수 없다. 이러한 Set 객체의 특성은 수학적 집합 1의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. // Set 객체는 Set 생성자 함수로 생성한다 const set = new Set([1, 2, 3]); console.log(set); // set의 사이즈 확인 console.log(set.size); // set의 요소가 존재하는지 확인 console.log(set.has(..

Iterable의 정의 이터레이션(Iteration): 반복, 순회 프로토콜(Protocol): 규격, 약속, 인터페이스 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of, spread, 배열디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜을 따르는 자바스크립트 기본자료구조에는 Array, String, Map, Set등이 있다. iteration protocol에는 iterable protocol과 iterator protocol이 있다. iterable protocol: Symbo..

다양한 객체를 특별한 구조에 담아둘 수 있다. 즉, 객체의 집합체를 나타내는 것이 자료구조이다. 자료구조종류로는 Array, Queue, Stack, Hash Table, Linked List, Tree, Graph등이 있다. 배열(Array) 배열array은 여러 개의 값(요소)을 순차적으로 나열한 자료구조다. 배열이 가지고 있는 값을 요소element라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스index를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 자바스크립트에 배열이라는 타입은 존재하..

자바스크립트만으로는 브라우저화면을 보여주거나, 네트워크를 전송하거나 컴퓨터에 있는 파일을 읽을 수 없다. 이러한 일을 하기위해서는 자바스크립트 밖에있는(런타임환경에서 제공해주는) 호스트객체가 필요하다. 호스트객체는 브라우저환경에서 브라우저가 제공해주는 API, 노드환경에서 노드가 제공해주는 API가 있다. 래퍼 객체(Wrapper Object) 객체가 아님에도 불구하고 객체에서 함수를 호출하는것처럼, 원시값에서 메서드를 호출할 수 있게 해주는것이 래퍼객체이다. 래퍼 객체(Wrapper Object)는 필요에 따라서 원시값을 사용할때만 한시적으로 관련된 빌트인 객체로 변환한다. Wrapper객체가 유용하니까 그냥 원시타입을 그때그때마다 Wrapper객체로 변환해주지말고, Wrapper객체를 항시적으로 사용..

클래스(Class) 클래스란 생성자함수와 마찬가지로 동일한 부류의 속성과 행동을 가지고있는 객체를 생성할 수 있는 템플릿(청사진, 틀)이다. 클래스를 통해 객체지향 프로그래밍(Object-Oriented Programming)이 가능하다. 자바스크립트는 프로토타입(prototype)을 베이스로한 객체지향언어이다. 따라서 이미 생성자함수를 통해 객체를 찍어내는 행위가 가능했다. 자바스크립트에서 class는 ES6이전 존재하지않았지만, class를 사용하는 여타 객체지향 언어(JAVA, Python, C++…) 에 익숙한 사람들의 수요에 의해 ES6부터 새롭게 적용 되었다. class가 도입되었음에도 자바스크립트가 프로토타입 중심 임에는 변함 없고, class 역시도 프로토타입을 기반으로 만들어진 것이다. ..