비동기 프로그래밍 동기 처리와 비동기 처리 자바스크립트 엔진은 싱글 스레드이기 때문에 처리에 시간이 걸리는 태스크가 있으면 블로킹이 발생함. setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 작동함. 이벤트 루프와 태스크 큐 js의 동시성을 지원하는게 이벤트 루프. 콜스택과 힙으로 구성됨. 콜스택 소스코드(전역 코드나 함수 코드 등) 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다. 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에..

타이머 타이머 함수 setTimeout, clearTimeout setInterval, clearInterval 디바운스와 스로틀 디바운스 const $input = document.querySelector('input'); const $msg = document.querySelector('.msg'); const debounce = (callback, delay) => { let timerId; // debounce 함수는 timerId를 기억하는 클로저를 반환한다. return (...args) => { // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다. // 따라서 delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다. ..

이벤트 이벤트 드리븐 프로그래밍 이벤트 핸들러 : 이벤트가 발생됐을때 호출할 함수 이벤트 핸들러 등록 : 이벤트가 발생했을때 브라우저에게 이벤트 핸들러의 호출을 위임 이벤트 타입 마우스 이벤트 타입 이벤트 발생 시점 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) ..