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 매칭결과를 불리언으로 반환

Date Date 생성자 함수 new Date(밀리초) //서버의 시간 기준이 UTC인지 KST에 따라 사용에 주의할 것 new Date(86400000); new Date(24 * 60 * 60 * 1000); //시간, 분, 초, ms로 나눠서 기록 new Date(문자열) new Date('2020/03/26/10:00:00'); //KST (node에서는 설정따라) new Date(년월일…) new Date(2020, 2, 26, 10, 00, 00, 0); //KST (node에서는 설정따라) Date 메서드 Date.now UTC 기준(1970년 1월 1일 00:00:00)부터 현재시간까지의 밀리초 Data.parse UTC 기준(1970년 1월 1일 00:00:00)부터 전달된 지정시간(문자..

Math Math.PI 원주율 반환 Math 메서드 Math.abs 절대값 반환(0 또는 양수) Math.round 반올림 Math.ceil 올림 Math.floor 내림 Math.sqrt 제곱근 Math.random 0~1 미만의 실수 const random = Math.floor((Math.random() * 10) + 1); console.log(random); // 1에서 10 범위의 정수 Math.pow 두번째 인수를 지수로 거듭제곱한 결과 반환 //ES7 지수 연산자가 보기 더 좋음 2 ** 2 ** 2; //16 Math.max 최대값 Math.min 최소값