Javascript (47) 썸네일형 리스트형 [모던 자바스크립트 Deep Dive] 37. 이벤트 이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 이벤트 핸들러를 언제 호출할지 알 수 없으므로 브라우저에게 함수 호출을 위임 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 타입 이벤트 타입 : 이벤트 종류를 나타내는 문자열 1. 마우스 이벤트 이벤트 타입 이벤트 발생 시점 click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓았을 때 mousemove.. [모던 자바스크립트 Deep Dive] 36-3. DOM 어트리뷰트 1. 어트리뷰트 노드와 attributes 프로퍼티 HTML 문서 구성 요소인 HTML 요소는 여러 개의 어트리뷰트(속성)를 가질 수 있음 HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공 HTML 요소의 시작 태그에 어트리뷰트 이름='어트리뷰트 값' 형식으로 정의 HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결 (HTML 어트리뷰트 당 하나의 어트리뷰트 노드 생성) 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장됨 → Element.prototype.attributes 프로퍼티로 취득 가능 attributes 프로퍼티는 getter 만 존재.. [모던 자바스크립트 Deep Dive] 36-2. DOM 노드 탐색 그림 DOM 트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티 제공 노드 탐색 프로퍼티는 모두 접근자 프로퍼티로 getter 만 존재하여 참조만 가능한 읽기 전용 접근자 프로퍼티 1. 공백 텍스트 노드 HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자의 텍스트 노드 노드를 탐색할 때 공백 문자가 생성한 공백 텍스트 노드에 주의 해야함 2. 자식 노드 탐색 프로퍼티 설명 Node.prototype.childNodes - 자식 노드를 모두 탐색하여 DOM 컬렉션 객체인 NodeList 에 담아 반환 - 텍스트 노드 또는 요소 노드 반환 Element.prototype.children - 자식 노드 중에서 요소 노드만 모두 탐색하여 DOM 컬렉션.. [모던 자바스크립트 Deep Dive] 36-1. DOM DOM 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 노드 1. HTML 요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환 HTML 요소의 콘텐츠 영역 (시작 태그와 종료 태그 사이)에는 텍스트 뿐만 아니라 다른 HTML 요소 포함 가능 이때 HTML 요소 간에는 중첩 관계에 의해 계층적 부자관계 형성 → HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성 트리 자료 구조 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간에 계층적 구조를 표현.. [모던 자바스크립트 Deep Dive] 35. 브라우저의 렌더링 과정 파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 인련의 과정을 말함 렌더링 : HTML, CSS, 자바 스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저의 렌더링 과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML 과 CSS 를 파싱하여 DOM 과 CSSOM 을 생성하고 이를 결합하여 렌더 트리를 생성한다 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 A.. [모던 자바스크립트 Deep Dive] 34. Set 과 Map Set Set 객체는 중복되지 않는 유일한 값들의 집합 Set 객체는 배열과 유사하지만 다음과 같은 차이가 있음 Set 객체는 수학적 집합을 구현하기 위한 자료구조 구분 배열 Set 객체 동일한 값 중복 포함 O X 요소 순서에 의미 O X 인덱스로 요소 접근 O X 1. Set 객체의 생성 생성자 함수로 생성하며 인수를 전달하지 않으면 빈 Set 객체 생성 이터러블을 인수로 전달받아 Set 객체를 생성하는데 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않음 (중복 제거 가능) const set = new Set(); console.log(set); // Set(0){} const uniq = array => [...new Set(array)]; console.log(uniq([2, 1, 2, .. [모던 자바스크립트 Deep Dive] 33. 디스트럭처링 할당 디스트럭처링 할당 (구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용 배열 디스트럭처링 할당 배열 디스트럭처링 할당의 대상 (할당문의 우변)은 이터러블이어야 함 const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 할당 기준은 배열의 인덱스로 순서대로 할당 됨 (변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요 X) const [c , d] = [1]; console.log(c, d);// 1 undefined 할당 연산자 왼쪽에 값.. [모던 자바스크립트 Deep Dive] 32. 스프레드 문법 ES6 에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 생성 for ... of 문으로 순회할 수 있는 이터러블에 한정 스프레드 문법은 연산자가 아니며 결과 역시 값이 아님 → 결과 변수 할당 불가능 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 이를 함수의 인수 목록으로 전달해야 하는 경우 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ... 을 붙이는 것) 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것 const arr = [1, 2, 3]; // = Math.. 이전 1 2 3 4 5 6 다음
