브라우저 렌더링 과정 첫번째는 Parsing단계로, HTML파일과 CSS파일을 파싱하여 각각 트리를 만듭니다. HTML 파일을 해석하여 DOM 트리를 구성하고, 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM 트리 구성 작업도 함께 진행합니다. 두번째는 Style단계로, 두 트리를 결합하여 렌더 트리를 만듭니다. Render 트리는 화면에 보여질 내용만 포함하기 때문에 display: none과 meta tag같은 화면에 보이지 않는 것들은 포함되지 않습니다. 세번째는 layout단계로, Render 트리를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산합니다. 네번째는 Paint단계로, 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다. 마지막으로 C..
전체 글
🥕 event.target vs event.currentTarget target은 이벤트가 처음 발생한 대상을 가리킨다. 반면에, currnetTarget은 이벤트가 버블링 또는 캡쳐링이 되는 과정에서 현재 이벤트가 위치하고 있는 대상을 가리킨다. *target과 같은 요소를 참조할 수도 있고 다를 수도 있다. item1 item2/li> item3
🥕 이벤트 버블링 버블링은 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어졌다. 브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파된다.\ // false 생략 가능 element.addEventListener('click', (e) => { ... }, false); 자바스크립트 addEventListener() 함수로 요소의 이벤트를 등록하면 기본적으로 버블링 전파 방식으로 이벤트가 흐르게 되어, 만일 자식 요소에 이벤트가 발생하면 부모 요소도 버블링 통해 이벤트가 전파되어 리스너가 호출되게 된..
🥕 Script 태그 DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다. src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다. 해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다. 여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로 defer, async가 있다. 🥕 defer defer 속성은 스크립트를 '백그라운드'에서 다운로드한다. 그러므로 HTML 파싱(DOM 생성)을 중단시키지 않으며 defer 속성이 있는 스크립트의 다운로드가 끝나더라도 DOM 생성을 마칠 때 까지 지연된 후 스크립트를 실행한다. ->DOM이 모두 ready된 다음에 실행된다. 유의할 ..
🥕 재귀와 스택 재귀: 주어진 문제를 해결하기 위해 하나의 함수에서 자신을 다시 호출하여 작업을 수행하는 방식이다 . 어떤 루틴이나 프러시저가 자기 자신을 반복적으로 호출하여 문제를 풀어나가는 알고리즘이다.함수를 정의할 때, 자기 자신을 다시 참조해 호출하는 알고리즘을 말한다. 예를 들어, 팩토리얼 함수를 재귀 함수로 구현할 수 있다. // function factorial(num) { if (num === 0) { return 1; } else { return num * factorial(num - 1); } } console.log(factorial(5)); // Output: 120 }이 예제에서 factorial 함수는 자기 자신을 호출하여 팩토리얼을 계산한다. 호출 스택에는 각 호출의 상태가 저..
🥕 DOM DOM은 Document Object Model의 약자 => 문서 객체 모델? 문서 객체란이나같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 한다.+ Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있다. 🥕 DOM tree tree의 자료구조는 이름에서 알 수 있는 것처럼 하나의 root node에서 시작된다 그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그린다. tree에서는 위쪽의 node를 부모(parent) 노드 ..
🥕 this this는 자신이 속한 객체 또는 자기가 생성할 인스턴트를 가리키는 자기 참조 변수이다. this는 자바스크립트 엔진에 의해서 암묵적으로 생성, 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달 된다. 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 🥕 this 바인딩 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들면, 변수 선언과 변수 이름과 확보된 메모리 공간의 주소를 바인딩 하는 것이다. 즉 this 바인딩이란 this와 this가 가리킬 객체가 바인딩 하는 것이다. function Circle(radius) { this.radius = radius; //this는 생성자 ..
🥕 디스트럭처링 할당 디스트럭처링 할당은 구조화된 배열과 같은 이터러블이나 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적 할당 하는 것을 이야기한다. 🥕 배열 디스트럭처링 // es5 const arr = [1, 2, 3] const one = arr[0] const two = arr[1] const three = arr[2] console.log(one, two, three); // 1 2 3 //es6 const arr = [1, 2, 3] const [one, two, three] = arr; console.log(one, two, three); // 1 2 3배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블 이어야 하며, 할당 기준은 배열의 인덱스다...