DEEPDIVE
![[JS] DeepDive(40) 이벤트 (1) - event객체](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnkGEx%2FbtsuCHx557k%2FnK16gbBJIQasDJ18TPf1Kk%2Fimg.png)
[JS] DeepDive(40) 이벤트 (1) - event객체
이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.예를들어 클릭 , 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생 했을 때 호출될 함수를 이벤트 핸들러라고 하고 이벤트가 발생 했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 브라우저는 사용자의 버튼 클릭을 감지해 클릭 이벤트를 발생시킬 수 있다. Click me! 위와 같이 이벤트와 그에 대응하는 함수를 통해 사용자와 애플리케이션이 상호작용하며 이런 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라고 한다. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. https://devel..
[JS] DeepDive(39) DOM (3) - 어트리뷰트
어트리뷰트 노드와 attributes 프로퍼티 HTML 문서의 구성 요소인 HTML 요소는 여러개의 어트리뷰트를 가질 수 있다. 어트리뷰트 역시 모든 HTML요소에서 공통적으로 사용할 수 있는 어트리뷰트와 특정 HTML요소에서만 한정적으로 사용할 수 있는 어트리뷰트로 나누어져 있다. attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티이며 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다. HTML 어트리뷰트 조작 attributes 프로퍼티는 읽기 전용 접근자 프로퍼티이므로 HTML 어트리뷰트 값을 취득할 수 있지만 변경할 수는 없다. Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attr..
![[JS] DeepDive(39) DOM(2) - DOM 조작](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkpxOW%2FbtsuIzrVdJK%2FnksZsahbOetpwhps0XRGs0%2Fimg.png)
[JS] DeepDive(39) DOM(2) - DOM 조작
노드 탐색 요소 노드를 취득한 다음, 취득한 요소를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제 , 자식 노드등을 탐색해야할때가 있다. Apple Banana Orange ul#fruits 요소는 3개의 자식 요소를 가진다 따라서 ul#fruits 요소 노드를 취득한 다음 자식노드를 탐색하거나 자식중 하나를 탐색할 수 있다 이와같이 DOM 트리상 노드를 탐색할 수 있도록 Node,Element 인터페이스는 트리 탐색 프로퍼티를 제공해준다. parentNode,previousSibling,firstChild,childNodes 프로퍼티는 Node.prototype이 제공하고 프로퍼티 키에 Element가 포함된 previousElementSibling,nextElementSibling 과 chi..
![[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsGu5b%2FbtsuCGyxT8a%2FK6dnvD7iDmMrCKP2EV8tk1%2Fimg.png)
[JS] DeepDive(39) DOM(1) - DOM,요소취득,요소타입
브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 구조인 DOM을 생성한다. HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM 을 구성하는 요소 노드 객체로 변환된다. 트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이루어지며 부모 노드와 자식 노드로 구성된다. 노드 객체의 타입 아래 HTML 문서를 렌더링 엔진이 파싱한다고 생각해보자. Apple Banana Orange 렌더링 엔진은 위 HTML 문서를 파싱하여 아래와 같이 DOM을 생성한다. 위 예제에서 볼 수 있듯이 DOM은 노드 객체의 계층적이 ㄴ구조로 구성된다. 문서 노드(document node) DOM 트리의 최상위에 존재하는 노드로 document 객체를 가리키며 전역객체 windo..
![[JS] DeepDive(38) 브라우저의 렌더링 과정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7dfSh%2FbtsudSfLEzv%2FdYWNnv33ZUDMdKMbV4Ki91%2Fimg.png)
[JS] DeepDive(38) 브라우저의 렌더링 과정
구글의 V8 자바스크립트 엔진으로 빌드된 JS 러낱임 환경인 node.js 가 등장하면서 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션으로도 사용할 수 있는 언어가 되었다. 하지만 여전히 자바스크립트가 사용되는 분야는 웹 브라우저에서 동자갛는 클라이언트 사이드다. 대부분 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML,CSS와 함께 실행된다. 이번에는 브라우저가 HTML,CSS JS로 작성된 텍스트 문서를 어떻게 해석하여 렌더링하는지 서술해보겠다. 브라우저는 아래와 같은 과정을 거쳐 렌더링을 수행한다. 1. 브라우저는 HTML,CSS,JS,image,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응..
[JS] DeepDive(37) Set과 Map
Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set객체는 배열과 유사하지만 약간의 차이가 있다. 1. Set객체는 동일한 값을 중복하여 갖지 않는다. 2. 요소에 순서가 없다. 3. 인덱스로 요소에 접근할 수 없다. Set 객체는 수학에서의 집합과 일치한다!! Set 객체의 생성 Set객체는 Set 생성자 함수로 생성한다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성하며 이터러블의 중복된 값은 Set객체에 저장되지 않는다. const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const se..