추월차선

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분 ES6 사양을 지원합니다.하지만 IE 11의 ES6 지원율은 약 11%이고. ES6 이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 다른것을 알 수 있습니다. 따라서 ES6+와 ES.NEXT의 최신 ESCMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요합니다. 또한 대부분의 프로젝트가 모듈을 사용하므로 ES6 모듈(ESM)외의 별도의 모듈 로더도 필요합니다.IE를 포함한 구형 브라우저는 ESM을 지원XESM을 사용하더라..

47.1 에러 처리의 필요성에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.이를 막기 위해 try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.직접적인 에러를 발생하지는 않는 예외적인 상황이 발생할 수도 있다.예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다.작성한 코드에서는 언제나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다.47.2 try...catch...finally 문기본적으로 에러 처리를 구현하는 방법은 크게 두 가지가 있다.반환하는 값을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확..

46장 제너레이터와 async/await46.1 제너레이터란?ES6에서 도입된 제너레이터(generator) 함수는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다.지금부터 제네레이터 함수와 일반 함수의 차이를 알아보도록 하겠습니다.제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있습니다.일반 함수 : 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행합니다. 즉, 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없습니다.제너레이터 : 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있습니다. 이는 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있습니다. 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도(y..

44장. REST APIREST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다.REST API의 구성REST API는 자원(Resource), 행위(Verb), 표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소                                                                          내용                                                                표현  방법자원..

Ajax란?Ajax(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다. 이러한 전..

40.8 DOM 요소의 기본 동작 조작40.8.1 DOM 요소의 기본 동작 중단DOM 요소는 저마다 기본 동작이 있다.ex. a 요소를 클릭하면 href 어트리뷰트에 지정된 링크로 이동이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.40.8.2 이벤트 전파 방지이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다. 즉, 상위 DOM 요소에게 이벤트가 전파되는 것을 막는 다는 것이다.40.9 이벤트 핸들러 내부의 this40.9.1 이벤트 핸들러 어트리뷰트 방식다음 예제의 handleClick 함수 내부의 this는 전역 객체 window를 가리킨다.일반 함수로서 호출되는 함수 내부의 this는 전역 객체를 가리키기 때문단, 이벤트 핸들..

1. DOM 조작새로운 노드를 생성하여 DOM에 추가, 기존 노드를 삭제 or 교체하는 것으로 리플로우와 리페인트가 발생하므로 성능에 조심해야한다.innerHTMLElement.prototype.innerHTMLgetter, setter 모두 있는 접근자 프로퍼티해당 요소의 콘텐츠 영역에 있는 모든 HTML 마크업을 문자열로 반환문자열을 할당 시 요소의 모든 자식 노드가 제거되고 할당한 문자열의 HTML 마크업이 자식 노드가 된다.크로스 사이트 스크립팅(악성 스크립트 주입) 공격에 취약  아래와 같이 에러 이벤트를 발생시켜 자바스크립트 코드가 실행되게 할 수 있음  innerHTML의 문제점들모든 노드의 자식을 제거하고 새롭게 할당하므로 비효율적만약 ..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅합니다. 브라우저..

1. 스프레드 문법을 사용할 수 있는 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정된다.스프레드 문법은 연산자가 아니며 결과 역시 값이 아님 → 결과 변수 할당 불가능. 그냥 뭉쳐 있는 값들을 펼치는 역할만 하는 것이다. 2. 스프레드 문법 사용법함수 호출문의 인수 목록에서 사용하기요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 이를 함수의 인수 목록으로 전달해야 하는 경우const arr = [1, 2, 3];// = Math.max(1, 2, 3)var max = Math.max(...arr); // 3 스프레드 문법은 앞에서 살펴본 Rest 파라미터와 형태가 동일하여 혼동할 수 있으므로 주의할 필요가 있다. Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다..

1. 이터러블 프로토콜이란Well-known Symbol( 자바스크립트 엔진에 상수로 존재하는 심볼 )인 symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속받은 메서드를 호출하면 이터레이터 프로토콜을 준수한다고 약속한다. 2. 이터레이터 프로토콜이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유한다.  3. 이터러블이란이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다.구체적으로 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. const isIterable = v => v !== null && typeof..