Way in Wayne

전체 글

• [Javascript]DOM (3) Attribute

  사부작사부작/Javascript 2022. 5. 2. 00:31

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 어트리뷰트(Attribute) 1. 어트리뷰트 노드와 attributes 프로퍼티 HTML 요소를 제어하기 위한 추가적인 정보를 제공하는 어트리뷰트는 한개의 HTML 요소가 여러 개의 어트리뷰트를 가질 수 있다. 어트리뷰트는 시작 태그에 아래와 같이 정의한다. 모든 HTML 요소에 공통적으로 적용할 수 있는 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트가 있으며, 특정 HTML 요소에서만 사용할 수 있는 어트리뷰트도 있다. 글로벌 어트리뷰트 : id, class, style, title, lang, tabindec,draggable, hidden 등 이벤트 핸들러: onclick, onchange,onfocus, onblur, onmouse..

  Read More
• [Javascript]DOM(2) node 탐색과 조작

  사부작사부작/Javascript 2022. 5. 1. 22:47

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 노드 탐색 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있다. parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype 메서드가 제공하고, 프로퍼티 키에 Element가 포함된 previosElementSibling과 nextElementSibling, children 프로퍼티는 Element.protoype이 제공한다. 노트 탐색 프로퍼티는 setter 없이 getter만 존재하는 참조만 가능한 읽기 전용 접근자 프로퍼티다. 1. 공백 텍스트 노드 HTML 요소 사이의 스페이스,..

  Read More
• [Javascript]DOM(1) node와 node 취득

  사부작사부작/Javascript 2022. 5. 1. 20:06

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 노드 1. HTML 요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소의 콘텐츠 영역에는 텍스뿐만 아니라 다른 HTML 요소가 포함될 수 있다. 이때 이러한 중첩 관계에 의해 계층적 부자관계가 형성된다. HTML 요소 간의 부자 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리자료구조로 구성하고, 이것은 DOM 또는 DOM 트리라고 한다. (1)트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이뤄진다. 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의..

  Read More
• [Javascript]브라우저 렌더링

  사부작사부작/Javascript 2022. 4. 29. 00:33

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 브라우저 렌더링 과정 브라우저에서 웹페이지 로드하는 과정을 자세히 살펴보자. 1. 요청과 응답 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 응답받아 브라우저에 시각적으로 렌더링 하는 것이다. 브라우저 주소창에 URL을 입력하면 URL 호스트 이름이 DNS를 통해 IP주소로 변환되어 해당 IP주소를 갖는 서버에세 요청을 전송한다. 주소창에 호스트까지만 입력하는 것을 루트 요청이라고 하고, 루트 요청에 대해서는 암묵적으로 index.html을 응답하도록 되어있다. 즉, "https://google.com"은 "https://google.com/index.html" 과 같은 요청이다. 다른 정적 파일을 서버에 요청하려면 주소창에 "h..

  Read More
• [Javascript]Set과 Map

  사부작사부작/Javascript 2022. 4. 28. 00:03

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. Set Set 객체는 중복되지 않는 유일한 값들이 집합이다. Set 객체는 배열과 유사하지만 다음과 같이 배열과 다른 특성을 가진다. 동일한 값을 중복하여 포함할수 없다. 요소 순서에 의미가 있다 인덱스로 요소에 접근할 수 없다 Set 객체의 특성은 수학적 집합의 특성과 일치하며, 수학적 집합을 구현하기 위한 자료구조다. 1. Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다. 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수를 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 ..

  Read More
• [Javascript]구조 분해 할당(디스트럭처링 할당)

  사부작사부작/Javascript 2022. 4. 26. 00:39

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 구조 분해 할당 구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 구조 분해 할당 ES5까지는 구조화된 배열을 1개 이상의 변수에 할당할 때는 아래와 같은 방법을 사용했다. // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이여야 하며, 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다. const arr ..

  Read More
• [Javascript]스프레드 문법

  사부작사부작/Javascript 2022. 4. 26. 00:12

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 스프레드 문법 ES6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ] console.log(....

  Read More
• [Javascript]이터러블

  사부작사부작/Javascript 2022. 4. 25. 23:46

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 이터레이션 프로토콜 ES6에 도입된 이터레이션 프로토콜은 순회 가능한 데이터 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이전에는 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자의 구조를 가지고 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션(자료구조)를 잍터레이션 프로토콜을 준수하는 이터러블로 통일했다. 1. 이터러블 이터러블 프로포콜을 준수한 객체를 이터러블이라고 한다. 즉, 이터러블은 Symbo.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 상속받은 객체를 말한다. 이터러블인지 확인은 아래와 같은 방법으로 ..

  Read More