본문 바로가기

스터디/[모던 자바스크립트 deep dive] JS

 (29)
#39. DOM(Document Object Model) 1. 노드HTML 요소와 노드 객체HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 -> HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환HTML 요소 간에는 중첩 관계 (콘텐츠 영역에 다른 HTML 요소도 포함되는 것) 에 의해 계층적인 부자 관계가 형성됨 -> 이를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성한다.트리 자료 구조 : 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조DOM : 노드 객체들로 구성된 트리 자료구조 (DOM 트리라고 부르기도 함)노드 객체의 타입노드 객체는 총 12개의 종류가 있..
#38. 브라우저의 렌더링 과정 1. 요청과 응답브라우저의 핵심 기능 : 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시각적으로 렌더링 하는 것서버에 요청을 전송하기 위해 브라우저는 주소창 제공브라우저의 주소창에 URL을 입력하고 엔터 키를 누르면 URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고 이 IP 주소를 갖는 서버에게 요청을 전송한다.브라우저의 주소창에 https://poiemaweb.com을 입력하고 엔터 키를 누르면 루트 요청(/ , 스킴 scheme과 호스트만으로 구성된 URI에 의한 요청)이 poiernaweb.com 서버로 전송된다일반적으로 서버는 루트 요청에 대해 암묵적으로 루트 폴더에 있는 index.html을 응답하도록 기본 설정되어있으며,다른 정적 파일을 서버에 요청하려면 브라우저의 ..
#37. Set과 Map 1. Set Set 객체 : 중복되지 않는 유일한 값들의 집합 ( 수학적 집합을 구현하기 위한 자료구조 )1. Set 객체의 생성Set 생성자 함수로 생성이터러블을 인수로 전달받아 Set 객체 생성이터러블의 중복된 값은 Set 객체에 요소로 저장 Xconst set1 = new Set([1,2,3,3]); // Set(3){1,2,3}2. 요소 개수 확인Set.prototype.size 프로퍼티를 사용한다.const {size} = new Set([1,2,3,3]) // 33. 요소 추가Set.prototype.add 메서드를 사용한다.const set = new Set(); // Set(O) {}set.add(1); // Set(1) {1}const set = new Set(); set.add(1).a..
#36. 디스트럭처링 할당 (구조 분해 할당) 디스트럭처링 할당 (구조 분해 할당) : 구조화된 배열과 같은 이터러블 또는 객쳬를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것 1. 배열 디스트럭처링 할당const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.// 이때 할당 기준은 배열의 인덱스다. const [one, two, three] = arr; console.log(one, two, three); // 1 2 3배열 디스트럭처링 할당의 기준은 배열의 인덱스이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다．const [a, b] = [1, 2]; console.log..
#35. 스프레드 문법 스프레드 문법 : 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.- 사용할 수 있는 대상 : Array, String, Map, Set, DOM 컬렉션, arguments처럼 for ... of 문으로 순회할 수 있는 이터러블에 한정- 스프레드 문법의 결과물은 값으로 사용 X, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능 (함수 호출문의 인수 목록, 배열 리터럴의 요소 목록, 객체 리터럴의 프로퍼티 목록)console.log(... 'Hello' ) ; // H e 1 1 o1. 함수 호출문의 인수 목록에서 사용하는 경우스프레드 문법은 Rest 파라미터와 형태가 동일하지만 서로 반대의 개념이므로 주의하기!Rest 파라미터 : 함수에 전달된 인수들의 목록을 배열로..
#27. 배열 1. 배열이란?여러 개의 값을 순차적으로 나열한 자료구조const arr = ['apple', 'banana', 'orange']배열이 가지고 있는 값을 요소라고 하는데, 자바스크립트의 모든 값은 배열의 요소가 될 수 있음 (ex. 객체, 함수,배열 등)배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖고, 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작함arr[0] -> apple배열은 요소의 개수를 나타내는 length 프로퍼티를 갖는다.arr.length -> 3배열은 객체 타입. 자바스크립트에 배열이라는 타입은 존재 X배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성 가능배열의 프로토타입 객체는 Array.prototype이며 배열..
#26. ES6 함수의 추가 기능 1. 함수의 구분ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다.(일반적인 함수 호출 / 생성자 함수로서 호출 / 객체에 바인딩되어 메서드로서 호출)  => ES6 이전의 모든 함수는 callable이면서 constructor이다.객체에 바인딩 된 함수도 callable이며 constructor이다. 즉, 객체에 바인딩된 함수도 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있는 것!객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 것을 의미한다.=> 사용 목적에 따라 명확한 구분이 없으므로 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성하기 때문에 실수 유발 가능성..
#25. 클래스 1. 클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어이다.ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객쳬지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다.클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설팅이라고 볼 수 있다.2. 클래스 정의class 키워드를 사용하여 클래스를 정의한다.//클래스 선언문class Person {}클래스를 표현식으로 정의할 수 있다  ==  클래스가 값으로 사용할 수 있는 일급 객체이다클래스 몸체에는 0개 이상의 메서드만 정..

티스토리툴바