본문 바로가기

분류 전체보기339

39장 DOM (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ★DOM 조작에 의해 리플로우, 리페인트 발생 (성능 최적화 고려)★ innerHTML (setter/getter) (1) 모든 자식노드를 삭제한 후 (2) 새롭게 노드를 생성하여 (3) 자식 요소로 추가 삽입 위치 지정 불가 insertAdjacentHTML(위치,HTML문자열) 기존 요소 유지 위치 지정해서 요소 삽입 => 둘다, XSS(크로스 사이트 스크립팅 공격)에 취약 =>마크업 파싱하기 때문 doxument.getElementById() document.createElement('li') document.createTextNode() $li.appendChild() 노드를 생성하면,.. 2023. 5. 25.
39장 DOM(~39.5.2) (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 DOM(Document Object Model): 노드 객체로 구성된 트리 자료구조 - 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 - DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근, HTML의 구조와 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이 중요 Element: Tag? 요소 노드 == 태그 중첩 관계 비선형 자료구조: 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조 DOM API를 통해 (1) 자신의 부모, 형제, 자식 탐색 가능 (2) 자신의 어트리뷰트와 텍스트를 조작 가능 live DOM 컬렉션 객체 : 실시간.. 2023. 5. 22.
38장 브라우저 렌더링 과정/33장 Symbol/48장 모듈 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 브라우저의 렌더링 과정 ● HTML 파싱한 결과, CSS 파싱한 직접적인 결과물이 렌더 트리는 아님. 각각 DOM과 CSSOM을 생성. 그리고 DOM과 CSSOM의 결합이 렌더 트리! ● HTML 파싱 과정과 CSS 파싱 과정: 병렬적 X( == 동기적) ● 리플로우(reflow: layout 다시 계산) 노드 추가/삭제, 요소 크기/위치 변경, 윈도우 리사이징 등 ● 리플로우 없이 리페인트만 실행되기도 한다. ● script 태그 위치에 따라 HTML 파싱이 블로킹 되어 DOM 생성이 지연가능하기 때문에, script 태그 위치가 중요하다.(렌더링 시간 단축 및 에러 발생 줄이기) async.. 2023. 5. 18.
37장 Set과 Map (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 Set: 중복 요소가 없음 Map: 중복 키를 갖는 요소가 없음 Set과 Map의 size는 접근자 프로퍼티. (그렇기에 숫자를 할당해서 값을 바꿀 수 없다) set.size = 10 // 불가능. '접근자' 프로퍼티 forEach 요소가 두개인 이유? Array의 forEach와 인터페이스를 맞췄는데, set은 인덱스가 없음 set 객체는 인덱스가 없지만, 순회하는 순서는 요소가 추가된 순서를 따름 Map과 객체의 결정적인 차이 ! 이터러블! Map과 Set 모두 for ... of 로 순회가 가능 Map.prototype.keys Map.prototype.values Map.prototyp.. 2023. 5. 15.
25장 클래스 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 call, apply getPrototypeof // 프로토타입 체인상에 있는 바로 처음 만나는 프로토타입 this instanceof 클래스 // 체인 new 클래스() 이지만, 클래스는 생성자 함수와 같다 '클래스'를 작성하긴 하지만, 모든것은 prototype체인상에 존재한다. (정적 프로퍼티 ?) this를 고려할 때, 클래스이지만 클래스.prototype를 동시에 생각해야 한다. (또, 클래스.prototype.메서드) 기본적으로 클래스의 프로토타입이 동시에 생성된다. Base와 Base.prototype Derived와 Derived.prototype 어떤 메서드가 어떤 객체(클래스.. 2023. 5. 10.
25장 클래스(~25.7) (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 일급 객체: 다른 변수에 할당 가능, 매개변수와 반환값으로 사용 가능 클래스와 생성자 함수 차이점 프로토타입 메서드, 프로토타입 기반의 객체 생성 메커니즘(클래스, 생성자 함수 둘 다!) 클래스는 클래스 정의가 평가되는 시점에 함수 객체가 생성(생성 과정 필요X) ↔ 인스턴스(생성 과정 필요) 정적 메서드란? 정적 메서드 호출 방법? 정적 메서드는 상속받을 수 없다 정적 메서드와 프로토타입 메서드의 차이 인스턴스 프로퍼티 참조가 가능한 것은 프로토타입 메서드(정적 메서드는 불가) 프로토타입 메서드는 클래스와 생성자 함수 둘 다에 존재 this를 사용하지 않는 메서드: static 클래스의 인스.. 2023. 5. 6.
26장 ES6 함수 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 일반함수: 생성자 함수(즉 prototype 존재) ● 메서드: 축약 표현으로 정의된 함수=> non-constructor, function 키워드 생략하여 정의, super키워드 사용 가능. 일반 함수와 다르게 구분한 이유 : 생성자 기능까지 더해지는 경우 prototype까지 생성되기 때문. 따라서 ES6에서는 메서드를 non-constructor로 지정함. ● 화살표 함수: non-constructor이며, this, super, arguments도 바인딩되지 않아서 상위 스코프를 참조 객체에서, 메서드 메서드: ES6에서는 축약 표현으로 정의된 함수만을 의미함 const obj = .. 2023. 5. 4.
17장 생성자 함수에 의한 객체 생성 20장 strict mode 22장 this (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 생성자 함수에 의한 객체 생성 방식 function Circle(radius){ this.radius = radius; this.getDiameter = function(){ return 2*this.radius; } } new Circle(5) Circle(5) 인스턴스 생성 반지름이 5인 Circle 객체 생성 함수 호출 return이 없다면 undefined 반환 this: 생성자 함수가 생성할 인스턴스 this: 전역 객체 함수는 객체이지만, 호출 가능 ● [[Call]] : 호출할 수 있는 객체 == 함수 ● [[Construct]] : 생성자 함수로서 호출할 수 있는 함수 this .. 2023. 4. 28.
27장 배열(~ flatMap) (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 Array.prototype.메서드 정의 예시 특이점 join - 배열의 모든 요소를 문자열로 변환 - 요소를 '구분자'로 연결 const arr = ['hello','kk','!'] arr.join('-') //'hello-kk-!' 파이썬은 구분자가 먼저 나옴 reverse 배열 순서를 반대로 변경 const arr = ['hello','kk','!'] arr.reverse() //['!','kk',hello'] fill 1. 인수 1개 => 첫번째 인수로 배열의 모든 요소 채움 2. 인수 2개 => 첫번째 인수의 값을, 두번째 인수부터 채움 3. 인수 3개 => 세번째 인수 직전에서 채우.. 2023. 4. 26.

티스토리툴바