이벤트 이벤트 드리븐 프로그래밍 이벤트 핸들러 : 이벤트가 발생됐을때 호출할 함수 이벤트 핸들러 등록 : 이벤트가 발생했을때 브라우저에게 이벤트 핸들러의 호출을 위임 이벤트 타입 마우스 이벤트 타입 이벤트 발생 시점 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓았을 때 mousemove 마우스 커서를 움직였을 때 mouseenter 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링 2되지 않는다) mouseover 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링된다) mouseleave 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링되지 않는다) mouseou..

DOM 노드 HTML요소 html문서를 구성하는 개별적인 요소. html 문서는 요소의 집합이며, 중첩 관계를 갖는다. 트리 자료 구조 부모와 자식으로 구성되며 최상위 노드는 root 노드라 함. 루트는 0개이상의 자식을 갖는다. 자식이 없는 노드는 리프 노드라 함. 노드 객체들로 구성된 트리 자료구조를 DOM 혹은 DOM 트리라고 함. 노드 객체의 타입 문서노드 - 최상위 객체로 document 객체를 가르킴. 요소노드 - html 요소를 가르킴. 어트리뷰트 노드 - html요소의 어트리뷰트를 가르킴. 부모와 상관없이 요소노드에만 연결되어 있음. 텍스트 노드 - html요소의 text를 가르킴. 자식 노드를 가질 수 없음. 노드 객체의 상속 구조 Object └── EventTarget └── Node..

9주차 브라우저의 렌더링 과정 HTML 프로토콜 1.0 1.1 2.0 3.0 통신방식 TCP TCP TCP UDP method Get, Post, Head Get, Post, Head, Put, Delete, Trace, Options 연결 응답직후 종료 long-lived Stream, Message, Frame 특징 Websocket 전환가능 1.1을 계승하면서 성능향상에 초점 TCP Hand shake에 최적화, 아직 지원 지흡 script 태그의 async/defer 어트리뷰트 자바스크립트 파싱에 의해 DOM생성이 중단되는 문제를 막기 위해 추가됨. async 순서가 보장되지 않음. defer DOM 생성이 완료된 이후 동작.

Set과 Map Set 중복되지 않는 유일한 값들의 집합 구분 배열 Set 중복가능 O X 순서에 의미 O X 인덱스로 접근 O X 생성(중복무시) const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} 배열 중복제거 // Set을 사용한 배열의 중복 요소 제거 const uniq = array => [...new Set(array)]; console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4] 요소 개수 확인 const set = new Set([1, 2, 3]); console.log(Object.getOwnPropertyDescriptor(Set.prototype, 'size'..

디스트럭처링 할당 배열 디스트럭처링 할당 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 // 기본값 const [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1 2 3 // 기본값보다 할당된 값이 우선한다. const [e, f = 10, g = 3] = [1, 2]; console.log(e, f, g); // 1 2 3 // Rest 요소 const [x, ...y] = [1,..

스프레드 문법 뭉쳐있는 여러값들의 집합을 펼쳐서 개별적인 값의 목록으로 만듬 이터러블에만 쓸 수 있음. // 스프레드 문법의 결과는 값이 아니다. const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ... 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. ■ 함수 호출문의 인수 목록 ■ 배열 리터럴의 요소 목록 ■ 객체 리터럴의 프로퍼티 목록 함수 호출문의 인수 목록 const arr = [1, 2, 3]; // 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달한다. // Math.max(...[1, 2, 3])은 Math.max..

이터러블 순회 가능한 자료구조를 만들기 위해 미리 약속한 규칙 이터러블로 통일하여 for of, 스프레드, 배열 디스트럭처링 할당의 대상으로 쓸 수 있도록 일원화. 이터러블 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); //  true isIterable(''); //  true isIterable(new Map()); //  true isIterable(new Set()); //  true isIterable({}); //  false 일반 객체도 이터러블 프로토콜을 준수하도록 구현하면 이터러블이 됨. 이터레이터 ..

8주차 symbol 유일한 프로퍼티 키를 만들기 위해 사용 const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol('mySymbol'); console.log(mySymbol1 === mySymbol2); 심벌과 상수 // 위, 아래, 왼쪽, 오른쪽을 나타내는 상수를 정의한다. // 중복될 가능성이 없는 심벌 값으로 상수 값을 생성한다. const Direction = { UP: Symbol('up'), DOWN: Symbol('down'), LEFT: Symbol('left'), RIGHT: Symbol('right') }; const myDirection = Direction.UP; if (myDirection === Direction.UP) ..

String // 문자열은 원시 값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다. strObj[0] = 'S'; //변경은 안됨 length 유사배열 메서드 String 객체의 메서드는 언제나 새로운 문자열을 반환. 자열은 변경 불가능한 원시 값이기 때문에 String 래퍼 객체도 읽기 전용 객체로 제공 indexof 전달받은 문자열의 첫번째 인덱스 반환. 실패시 -1 includes가 가독성이 더 좋음 search 정규표현식의 첫번째 인덱스 반환. 실패시 -1 includes 전달받은 문자열의 포함여부 Boolean startWith, endWith 전달받은 문자열이 시작이나 끝 문자열인지 여부 Boolean chatAt 전달받은 인덱스의 문자를 반환 substring 문자열 자르기 slice ..

정규식 정규 표현식의 생성 const regexp = /is/i; const regexp = new RegExp(/is/i); 메서드 exec 매칭결과를 배열로 반환 test 매칭결과를 불리언으로 반환