CHAPTER 10 객체 리터럴의 업그레이드 10.1 변수를 키와 값으로 하는 객체 만들기 const name = 'yerin'; const surname = 'kim'; const age = 21; const nationality = 'Korean'; //일반적인 방식 const person ={ name: name, surname: surname, age: age, nationality: nationality, }; console.log(person); //ES6을 이용해서 단순화하기 const person = { name, surname, age, nationality, }; console.log(person); 변수들의 이름이 코드 내의 속성과 동일하기 때문에, 코드 내에서 굳이 두 번씩 표기하지..

CHAPTER 11 심벌 11.1 심벌의 고유성 심벌은 항상 고유하며 객체속성의 식별자로 사용할 수 있다. 다음과 같은 코드를 통해 심벌을 생성할 수 있다. const me = Symbol ("yerin"); console.log(me); const clone = Symbol("yerin"); console.log(clone); console.log(me == clone); console.log(me === clone); 두 심벌의 값은 동일하지만, 각 심벌은 항상 고유하므로 다른 심벌과 겹치지 않는다. 11.2 객체 속성에 대한 식별자 const office = { "TOM": "CEO", "Mark": "CTO", "Mark": "CIO", }; for (person in office){ consol..

CHAPTER 12 클래스 클래스: 클래스는 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다. 12.1 클래스 생성 클래스를 만드는 방법 두가지 : 1) 클래스 선언 2) 클래스 표현식 //클래스 선언 class Person { } //클래스 표현식 const person = class Person { }; class Person { constructor(name, age){ this.name = name; this.age = age; } greet(){ console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old`); } // 메..

Template Literals Template literals이란? 내장된 표현식을 허용하는 문자열 리터럴 이전버전에서는 template strings라고 불려짐 백틱(``)이용 var a = 5; var b = 10; console.log(`Fitrtenn is ${a+b} and not ${2*a+b}.`); Tagged templates template literals의 더욱 발전된 한 형태는 tagged templates 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있다. var person = 'Mike'; var age = 27; function myTag(strings, personExp, ageExp){ var str0 = strings[0]; var str1 = strings[1..

성능 보장 렌더링 순서 requests/resopnse → loading → scripting → rendering → layout → painting Critical Rendering Path Construction DOM CSSOM RenderTree Operation layout : 우리가 만든 RenderTree를 기반으로 해서 레이아웃 구상, 무엇을 어디에 구성할지 paint : 각각 부분을 조금씩 나누어 이미지(비트맵) 준비, 레이어 별로 paint를 준비, 중요하지만 너무 많이 남용해서 사용금지 compositon:레이어 순서대로 차곡차곡 표기

DOM & CSSOM 모든Node는 eventtarget이다, Node - Web API | MDN EventTarget - Web API | MDN CSSOM: CSS Object Model →compute styles based on CSS cascading rules, 모든 것들이 계산된 스타일 →제일부모에게 font size 지정하면 아래 모든 요소들도 font size 지정됨 DOM + CSS = CSSOM DOM + CSSOM = Render Tree Render Tree : 사용자에게 궁극적으로 보여지는 아이들만 선별이 되어서 이렇게 DOM과 CSS의 스타일이 합해져서 최종적으로 트리가 만들어짐