Bleeding edge

CORS란 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다 window.location.hrefwindow객체의 location의 href를 들어가면, protocol, domain, port를 확인할 수 있다.이 세개가 모두 같을 때, 동일 출처란 이야기를 한다. 브라우저는 이 동일 출처 정책(Same-Origin Policy)라는 규칙을 가지고 있다.이 규칙은 브라우저를 거치지 않고 서버간 통신이아닌, 브라우저를 통해 서버에 요청을 할 때 적용된다. CORS 해결 방법 Access-Control-A..

45장 프로미스 전통적인 콜백은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처치가 곤란하며, 여러개의 비동기 처리를 한번에 처리하는데도 한계가 있다. ⇒ 이를 개선하기위해 비동기 처리를 위한 프로미스를 도입했다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 setTimeout 함수가 비동기함수인 이유는 콜백 함수의 호출이 비동기로 동작하기 때문이다. setTimeout 함수를 호출하면 콜백 함수를 호출 스케줄링 한다음 타이머 id를 반환하고 즉시 종류한다. setTimeout 함수의 콜백 함수에서 상위 스코프의 변수에 값을 할당해보자. setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환하므로 콜백 함수에서 값을 반환하는 것은 무의미하다. [ ] 비동기 함수인 이유..

41장 타이머 41.1 호출 스케줄링 호출 스케줄링은 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것을 말한다. 타이머를 생성할 수 있는 타이머 함수는 setTimeout, setInterval 두개가 있다. 타이머를 제거하는 함수는 clearTimeout과 clearInterval이 있다. 단발성 : setTimeout 다회성 : setInterval 자바스크립트엔진은 하나의 실행 컨텍스트 스택을 가지기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다. 따라서 이러한 이유로 타이머 함수는 비동기 처리 방식으로 동작한다 41.2 타이머 함수 setTimeout((name, ...args )=> console.log(name, args), 1000, name,..

39.4 노드 정보 취득 Node.prototype.nodeType = 노드 객체의 종류 Node.prototype.nodeName = 노드의 이름을 문자열로 반환한다 hello document.nodeType = 9// 문서 노드타입은 9 텍스트 노드는 3 요소 노드는 1이다 document.nodeName = #document//텍스트 노드 #text, 요소노드는 태그이름에 #을붙인다 39.5 요소 노드 텍스트 조작 39.5.1 nodeValue node1.nodeValue = "a"//텍스트 노드에 있는 값을 변경한다 39.5.2 textContent document.getElementbyId('foo')//프로퍼티에 의한 텍스트 취득 null은 생략한다 vs innerText ⇒ innerText..

38장 브라우저의 렌더링 과정 브라우저가 HTML CSS 자바스크립트로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링한다. 파싱 : 프로그램밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. HTML CSS 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력한다. 브라우저 렌더링 수행과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다 렌더링 엔진은 서버로부터 받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더 트리를 생..

34장 이터러블 34.1 이터레이션 프로토콜 34.1.1 이터러블 이터러블 프로토콜을 준수한 객체이다 Symbol.iterator를 프로퍼티 키로 사용한 메서드로 직접 구현하거나 프로토타입으로 상속받은 객체를 말한다 const isIterableList = [[], '', new Map(), new Set(), {}] isIterble(n) //true, true, true, true, false 배열은 Symbol.iterator 메서드를 상속받은 이터러블이다. 이터러블은 for of문으로 순회할 수 있다. console.log(Symbol.iterator in obj) //fakse 일반 객체는 Symbol.iterator 메서드를 구현하거나 상속받지 않는다 for(const item of obj){..

30장 Date 30.1 Date 생성자 함수 new Date() ; //Mon Jul .... typeof new Date() object Date(); //Mon Jul ..... typeof Date() String 30.2 Date 메서드 Date.parse('Jan 2, 1970 00:00:00 UTC') Date.parse('19970/01/02/09:00:00') Date.prase를 이용하여 주어진 인수를 밀리초로 변환한다. 30.3 Date를 활용한 시계 예제 31장 RegExp 31.1~3 정규 표현식 regExp.exec(target) //정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다. /is/ regExp.test(target) //매칭 결과를 불리언으로 반환한다 /is..

26장 ES6 함수의 추가 기능 26.1 함수의 구분 ES6 이전의 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor이다.(내부 메서드 Call Construct를 둘다 가지고 있다) 불필요한 객체를 생성하기 때문에, 성능 문제가 있따. 26.2 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다 ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이기에 생성자 함수로 생성이 불가능하다 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다. ES6 메서드는 자신이 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래..

25장 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 안흔다. 클래스는 생성자 함수 보다 엄격하며, 생성자 함수에서는 제공하지 않는 기능도 제공한다. 클래스는 new 연산자 없이 호출하면 에러가 발생한다 클래스는 extends와 super 키워드를 지원한다 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내의 모든 코드는 strict mode가 지정되어 실행된다. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false이다.(열거가 불가능하다) 클래스는 생성자 함수 기반 객체보다 견고하고 명료하다. 특히 클래스의 ..