전체 글 (72) 썸네일형 리스트형 [모던 JS] CH 34. 이터러블, CH 35. 스프레드 문법, CH 36. 디스트럭처링 할당 # 20 CH 34. 이터러블 34.1 이터레이션 프로토콜 34.1.1 이터러블 - 이터러블 프로토콜을 준수한 객체 - Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체 - 이터러블은 for ... of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 const arr = [1, 2, 3]; console.log(Symbol.iterator in arr); // true // for ... of 문으로 순회 가능 for (const item of arr) { console.log(item); } // 스프레드 사용 console.log([...arr]); // [1, 2, 3] 34.1.2 이터레이터 - 이터레이터 프.. [모던 JS] CH 39. DOM CH 39. DOM DOM? HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API(프로퍼티와 메서드)를 제공하는 트리 자료구조 39.1 노드 39.1.1 HTML 요소와 노드 객체 - HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미함 - HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 - HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환됨 39.1.2 노트 객체의 타입 문서노드, 요소노드, 어트리뷰트 노드, 텍스트 노드 예시) 다음 HTML 문서를 렌더링 엔진이 파싱 -- DOM 트리 생성 39.1.3 노드 객체의 상속 구조 - DOM은 HTML 문서의 계층적 구조와 정보를 표현 - 노드 타.. [모던 JS] CH 38. 브라우저의 렌더링 과정 CH 38. 브라우저의 렌더링 과정 렌더링? - HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 38.1 요청과 응답 - 브라우저의 핵심 기능 : 필요한 리소스(HTML, CSS 등)를 서버에 요청하고 서버로부터 응답 받아 브라우저에 시각적으로 렌더링하는 것 - 브라우저의 주소창에 URL을 입력하고 엔터를 누르면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환 - 이 IP 주소를 갖는 서버에게 요청을 전송 38.2 HTTP 1.1과 HTTP 2.0 - HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약) HTTP1.1 - 기본적으로 커넥션 당 하나의 요청과 응답만 처리 - 리소스의 동시 전송이 불가능한 구조 - 요청할 리소스의 개수에 비례하여 응답 시.. [모던 JS] CH 32. String, CH33. 7번째 데이터 타입 Symbol CH 32. String 32.1 String 생성자 함수 - 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체이면서 이터러블 - 문자열은 원시 값이므로 변경 불가, 이때 에러는 발생하지 않음 - 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환 후 객체 생성함 const strObj = new String('Lee'); strObj[0] = 'S'; console.log(strObj); // 'Lee' let strObj = new String(123); console.log(strObj); // String {0:"1", 1:"2", 2:"3", length:3, [[PrimitiveValue]]:"123"} strObj = new String(null); console.lo.. [모던 JS] CH 28. Number, CH 29. Math, CH 30. Date, CH 31. RegExp (#16) CH 28. Number 28.1 Number 생성자 함수 - new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성함 const nobj = new Number(); console.log(nobj); // Number {[[PrimitiveValue]]: 0} - new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환함. 이를 이용해 명시적으로 타입 변환 (9장) 28.2 Number 프로퍼티 28.2.1 Number.EPSILON - 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이 - 부동소수점으로 인해 발생하는 오차 해결을 위해 사용 function isEqual(a, b) { retu.. [모던 JS] CH27. 배열 (#15) CH27. 배열 27.1 배열이란? - 배열이 가지고 있는 값: 요소 - 모든 값은 배열의 요소가 될 수 있음 - 인덱스를 가짐 - 대괄호 내에 접근하고 싶은 요소의 인덱스 지정 - 배열의 길이를 나타내는 length 프로퍼티를 가짐 const arr = ['apple', 'banana', 'orange']; - for 문을 통해 순차적으로 요소에 접근할 수 있음 - JS에 배열이라는 타입은 존재하지 않음 (배열은 객체 타입) - 배열의 프로토타입 객체는 Array.prototype for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } typeof arr // object - 일반 객체와 구별되는 배열의 특징 ! 배열의 장점- 처음부터 순차적으로 .. [모던 JS] CH26. ES6 함수의 추가 기능 (#14) CH26. ES6 함수의 추가 기능 26.1 함수의 구분 - ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음 - 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor - 객체에 바인딩된 함수도 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음 var obj = { x:10, f:function() { return this.x; } }; console.log(obj.f()); // 10 var bar = obj.f; console.log(bar()); console.log(new obj.f()); - 일반 함수는 함수 선언문이나 함수 표현식으로 정의한 함수 26.2 메서드 - ES6 사양에서 .. [모던 JS] CH25. 클래스 (#13) CH25. 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? - 자바스크립트는 프로토타입 기반의 객체지향 언어 - 이런 언어는 클래스가 필요없는 객체지향 프로그래밍 언어 - ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토 타입을 통해 객체지향 언어의 상속을 구현할 수 있음 // ES5 생성자 함수 var Person = (function() { function Person(name) { this.name = name; } Person.prototype.sayHi = function(){ console.log('Hi! My name is ' + this.name); }; return Person; }()); var me = new Person('Lee'); me.sayHi(); // Hi.. 이전 1 2 3 4 5 6 7 ··· 9 다음
