목록개발 도서/자바스크립트 deepdive (48)
진취적 삶
46.1 제너레이터란? 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할수있는 특수한 함수다 . 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할수있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할수없다. 제너레이터 함수는 함수 실행을 함수 호출자가 제어할수 있다. 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게도 양도할수 있다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을수 있다. 일반 함수를 호출하면 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환한다 . 제너레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을수..
47.1 에러 처리의 필요성 에러는 언제나 발생하기 때문에 발생한 에러에 대해 대처하지 않을 경우 프로그램은 강제 종료 try …catch 문을 이용해 발생한 에러에 적절히 대응 47.2 try… catch …finally 문 에러처리 console.log("start"); try { foo(); } catch (err) { console.error(err); //foo is not defined } finally { console.log("finally"); } 47.3 Error 객체 Error 생성자 함수는 에러 객체를 생성한다. const error = new Error ('invaild') 생성자 함수 인스턴스 Error 일반적 에러 객체 SyntaxError js 문법에 맞지 않는 문을 해석할..
48.1 모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈의 기능을 기준으로 파일 단위로 분리한다. 모듈은 자신만의 파일 스코프를 가질수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화 되어 다른 모듈에게 접근할수 없다. 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다 .export 라 한다. 공개된 모듈의 자산은 다른 모듈에서 재사용할수 있다. 공개된 모듈의 자산을 사용하는 모듈을 모듈사용자라고 한다. 모듈 사용자는 모듈이 공개한 자산중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할수 있다. 이를 import 라 한다. 48.2..
디스트럭처링 할당: 구조화된 배열과 같은 이러터블 또는 객체를 destructing 하여 1개 이상의 변수에 개별적으로 할당하는것을 말한다. 36.1 배열 디스트럭처링 할당 배열 디스트럭처링 할당의 대상은 이터러블이어야한다. 할당 기준은 배열의 인덱스다. const arr = [1, 2, 3]; 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 function parseURL(url = "") { // '://" 앞의 문자열과 / 이전의 / 로 시작하지 않는 문자열과 // / 이후의 문..
37.1 set set 객체는 중복되지 않는 유일한 값들의 집합 구분 배열 set 객체 동일한 값을 중복하여 포함할수 있다 o x 요소 순서에 의미가있다 o x 인덱스로 요소에 접근할수 있다 o x ### 37.1.1 set 객체의 생성 set 객체는 생성자 함수로 생성한다. ```javascript const uniq = (array) => [...new Set(array)]; console.log(uniq([2, 1, 3, 4, 5, 6, 2, 3])); //[2,1,3,4,5,6] ``` ### 37.1.2 요소 개수 확인 ```javascript const uniq = new Set([1, 2, 3]); console.log(uniq.size); //3 ``` ### 37.1.3 요소 추가 add..
js엔진으로 빌드된 js 런타임 환경인 node.js 의등장으로 js는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할수 있는 범용 개발 언어가 되었다. js는 브라우저에서 HTML.CSS 와 함께 실행된다. 파싱(parsing) : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 랜더링 : HTML ,CSS 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는것 브라우저의 랜더링 수행 과정 브라우저는 html ,css ,js 이미지 ,폰트 파일등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는..
DOM 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할수있는 API 프로퍼티와 메서드를 제공하는 트리 자료구조이다 . 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. hello 시작 태크 어트리뷰트 이름 어트리뷰트 값 콘텐츠 종료 태크 html 요소는 랜더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소의 어트리뷰트는 어트리뷰트 노드로 HMTL 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소 간에는 중첩 관계에 의해 계층적인 부자관계가 형성된다. 트리 자료구조 최상위 구조는 부모 노드가 없으며 루트 노드라 한다. 자식 노드가 없는 노드를 리프 노드라 한다. 노드 객체들..
40.1 이벤트 드리븐 프로그래밍 이벤트가 발생했을때 호출된 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을때 호출될 함수를 이벤트 핸드러라 하고, 이벤트가 발생했을때 브라우저에게 이벤트 핸들러의 호출을 위임하는것을 이벤트 핸들러 등록이라 한다. 브라우저는 사용자의 버튼 클릭을 감지하여 클릭 이벤트를 발생시킬수 있다. 함수를 언제 호출할지 알수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는것이다. 프로그램 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라한다. 40.2 이벤트 타입 40.2.1 마우스 이벤트 이벤트 타입 이벤트 발생 시점 click 마우스 버튼 클릭 dbclick 마우스 더블클릭 mousedown ..