JS/JS 핵심 개념14 JS DocumentFragment documentFragment DocumentFragment 메모리상에만 존재하는 경량화된 DOM 이다 1. DocumentFragment 를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가됩니다. 2. DocumentFragment 를 DOM 에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리상에 존재하지 않습니다. 주의사항 DocumentFragment 를 appendChild 와 같은 함수로 DOM 에 추가하고 난 후 DocumentFragment 의 자식노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않습니다. 만약 이를 유지 시키고 싶다면 cloneNode 를 통해 복제하는 방법이 있습니다. 참고 https.. 2023. 3. 14. JS 이벤트 위임 이벤트 위임 (delegate) 이벤트 흐름을 활용하여 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치하여 단일 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 하는 프로그래밍을 이벤트 위임이라 한다. 이벤트 리스너의 event 객체에는 돔에서 일어나는 이벤트의 정보가 들어있다 event.currentTarget : 이벤트가 등록된 요소를 의미 this : 이벤트 리스너안의 this 는 event.currentTarget 가 참조하는 대상과 같다 event.target : 이벤트가 최초에 발생한 요소를 의미 generate item initial item 참고 https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B.. 2023. 3. 14. JS 이벤트 흐름 이벤트 흐름 예시 1. 브라우저 화면에서 이벤트가 발생 2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾아냄 이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아봅니다. 3. 캡처링 단계 최상위 window 객체부터 타겟요소까지 캡처링 단계 의 이벤트 리스너가 등록이 되어 있는지 확인하고 있다면 이벤트를 실행 후 자식요소로 이동 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치 한 요소의 이벤트 리스너를 실행 4. 버블링 단계 캡처링이 끝나고, 최초에 이벤트가 발생했던 타겟요소부터 window 객체까지 버블링 이벤트 리스너가 있다면 실행 후 다음 직계 부모 요소로 이동 참고 https://www.inflearn.com/cou.. 2023. 3. 14. JS reflow & repaint reflow & repaint Reflow ( 레이아웃 다시 구성 ) 생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 말합니다 Reflow 를 발생하게 하는 속성 width, height, padding, margin, float, position 등등 … 레이아웃에 영향을 주는 모든 속성 Repaint ( 화면 다시 그리기 ) Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리) 를 다시 레이어에 그리는 작업 Repaint 를 발생하게 하는 속성 color, border-radius, background, box-shadow 등등 … 시각적으로 보여지는 모든 속성 reflow & repaint 와.. 2023. 3. 14. JS 웹 페이지 렌더링 과정 웹 페이지 렌더링 웹 브라우저의 기본적인 구조 랜더링 단계 1. 파싱 ( 철근 세우기 단계 ) HTML 을 파싱하여 DOM 으로 변환합니다. 오타 혹은 잘못된 문법을 사용했을 경우 예외처리를 합니다. 와 같은 태그를 만나면 리소스를 다운로드 합니다. 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석합니다. 2. 스타일 계산 ( 시멘트 채우기 단계 ) CSS 을 파싱하여 CSSOM 으로 변환합니다. CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정합니다. 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능합니다 3.레이아웃 ( 내부 설비 단계 ) 레이아웃 트리(렌더 트리) 를 생성합니다. 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생.. 2023. 3. 14. JS BOM (Browser Object Model) BOM (Browser Object Model) 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델 대표적인 객체 종류 1. window 객체 Global Context (전역 공간)이자 브라우저 창을 나타내는 객체 입니다. 전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동하 게 됩니다. 중요 프로퍼티 - innerWidth, innerHeight, screenX, screenY, scrollBy( ), scrollTo( ) 등등 2. screen 객체 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체입니다. 중요 프로퍼티 - availHeight, availWidth, width, height, orientation 3. location 객체 사용자가 보고 있는 페이지의 URL을 다루는 .. 2023. 3. 14. JS hoisting 호이스팅 함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려집니다. 이런 현상을 호이스팅이라고 합니다. 알고가야하는 내용 함수에는 두 가지 리터럴 형태가 존재한다. 1. 함수 선언 함수 선언은 function 키워드 뒤로 함수 의 이름을 적어서 사용합니다. function test() { return "test" } 2. 함수 표현식 함수 표현식은 function 키워드 뒤로 이름을 적지 않고 사용합니다. 이름이 없기 때문에 익명 함수라고 부르기도 합니다. var testValue = function() { return "testValue" } 변수 관련내용 선언한 변수의 값 까지 끌어올려지지는 않고 선언만 끌어올려짐 console.log(testValue); //undefi.. 2023. 3. 13. JS 클래스 클래스 이전의 생성자를 이용 한 타입 생성과 클래스는 정확히 그 결과가 일치한다. 기존의 자바스크립트의 타입 생성 방법을 다른 언어와 비슷하도록 보기 쉽게 문법을 개선한 것이 자바스크립트 클래스이다. 익플에서 적용 안됨 ※ 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가 신텍스(Syntactic sugar)라고 한다 기본 모양새 생성자 부분 constructor 함수 안에서 생성하고 속성을 바로 선언 function 키워드없이 메서드 이름으로 바로 생성 class User { constructor(name) { this.name = name; } sayName() { console.log(this); console.log(this.name); } } var me = new User(.. 2023. 3. 13. JS 프로토타입 상속 & subtype, supertype 효율적인 객체 설계 재사용성과 효율적인 관리를 위한 객체 설계가 필요하다. 알고가야 하는 내용 자바스크립트에서는 상속받는 타입을 하위 타입(subtype), 상속하는 타입을 상위 타입(supertype) 이라고 부릅니다 생성자 함수에서의 this 는 그 생성자 함수의 인스턴스를 의미한다 1. 생성자 훔치기 call 이나 apply 를 이용하여 인스턴스를 인수로 전달하고 프로퍼티를 상속받는 방법을 생성자 훔치기라고 합니다 // 기본 소시지 레시피 function Sausage(el1, el2) { this.inside1 = el1; this.inside2 = el2; } function FireSausage(el1, el2, el3) { Sausage.call(this, el1, el2); this.ins.. 2023. 3. 13. JS 프로토타입 프로토타입 prototype 자바스크립트에서 생성자는 prototype 프로퍼티를 통해 타입의 특징을 정의합니다. (ex : 붕어빵 틀) 효율적인 생성자 정의 인스턴스를 생성할 때마다 같은 내용의 별개의 함수가 계속 만들어진다면 효율적이지 못한 과정이라 볼 수 있다. 기본적인 모양새 각 인스턴스마다 같은 내용의 별개의 메서드가 계속 만들어진다 function Food(name) { this.name = name; this.smell = function () { console.log(this.name + " 냄새가 난다"); } } 향상된 버전 공통된 메서드를 정의해 사용 // 공통된 smell 메서드를 정의해 사용 function smell() { console.log(this.name + " 냄새가 난.. 2023. 3. 13. JS 생성자 생성자 생성자란 앞에 new 연산자가 붙은 함수를 의미하며 동일한 프로퍼티와 메소드를 가진 다수의 인스턴스를 만들 수 있습니다. new Object(), new Array() 등등 자바스크립트의 내부적으로 존재하는 내장 생성자 및 직접 새로운 타입을 만들 수도 있습니다. function MyOwn() { } var myObj = new MyOwn(); console.log(myObj instanceof MyOwn); // true console.log(myObj.constructor === MyOwn); // true new 연산자의 역활 new 연산자가 붙으면 함수의 this 는 인스턴스를 참조하게 되며, new 연산자가 자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요 없어지게 .. 2023. 3. 13. JS closure 함수 closure 내부 함수가 살아있는 상태에서 외부 함수가 파괴 되면 외부 함수의 변수들에 대한 접근 권한은 내부 함수만 가지게 되고 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 closure 입니다. var person = (function () { var age = 15; return { name: "wade", getAge: function () { console.log(age); return age; }, setAge: function (val) { age = val; console.log(age); } } })(); person.getAge(); // 15 person.setAge(20); // 20 person.age = 30; // 적용 되지 않음 person.getAge(); // 1.. 2023. 3. 13. 이전 1 2 다음
