> 기초/Javascript
-
TIL-2024.03.28 - JS - Web Rendering - 페인팅 & 리페인팅> 기초/Javascript 2024. 3. 28. 20:25
질문: 페인트, 리페인트는 각각 무엇이고 차이점은 무엇인가? 이후, 어떤 작업이 발생하는가? 랜더트리 구성 이후 발생되는 일: 랜더링 과정 복습: - HTML 문서와 CSS 스타일 시트를 파싱하여 각 요소에 적용되는 스타일을 결정하여 요소의 특성을 설정 (각 요소들의 우선순위, 상속, 선택자에 따라 최종적으로 적용되는 스타일이 결정) 레이아웃 | 리플로우 과정 복습: - JS 코드에서 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우, DOM 이나 CSSOM이 변경. - 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃 다시 계산 이렇게 만들어진 레이아웃에 그래픽을 입히는 작업 (화면에 요소를 그리는 과정)을 페인트 | 리페인트라 함 페인트: 그래픽을..
-
TIL-2024.03.27 - JS - Web Rendering - 레이아웃 계산 & 리플로우> 기초/Javascript 2024. 3. 28. 11:22
질문: 랜더 트리가 구성된 이후 대체 어떤 일이 발생하는가? 레이아웃, 리플로우는 각각 무엇이고 차이점은 무엇인가 랜더트리 구성 이후 발생되는 일: 랜더링 과정 복습: - HTML 문서와 CSS 스타일 시트를 파싱하여 각 요소에 적용되는 스타일을 결정하여 요소의 특성을 설정 (각 요소들의 우선순위, 상속, 선택자에 따라 최종적으로 적용되는 스타일이 결정) 이렇게 만들어진 랜더트리(필요한 요소들의 집합) 웹 페이지의 요소들의 크기와 위치를 결정하기 위해 필요한 계산이 필요. 이러한 작업을 하는 것을 레이아웃 계산 (초기) | 리플로우(변경시) 라 한다. 레이아웃 계산 : 요소의 스타일 정보를 계산하여 각 요소가 어디에 위치하고 어떤 크기를 가져야 하는지를 결정. 레이아웃 계산은 초기 페이지 로드 시에 한 ..
-
TIL-2024.03.26 - Vue - Web Rendering & Vue 작용> 기초/Javascript 2024. 3. 26. 17:21
질문: Web Browser Rendering 과정에서, 랜더링 트리 생성후 어떤일이 발생해? 이 과정에서 Vue, React와 같은 SPA Framework는 언제, 그리고 어떻게 작동할까(Virtual DOM & Vue Rendering )? Web Browser 작동원리: 문서 파싱 (Document Parsing) > Output: 돔트리 생성: 사용자가 URL을 입력하거나 링크를 클릭하여 웹 페이지를 요청하면, 브라우저는 해당 페이지의 HTML 문서를 서버로부터 받아옵니다. 브라우저는 받아온 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 생성합니다. DOM은 HTML 문서의 구조를 표현하는 트리 구조로, 각 요소(Element)는 노드(Node)로 표현됩니다...
-
TIL-2024.03.25 - JS - 외부 객체와 내부 객체> 기초/Javascript 2024. 3. 25. 21:41
목표: - 외부객체 - 내부객체 - 객체의 "외부 객체"는 객체의 기본 구조로. 이는 객체의 프로퍼티들을 포함하고 있는 부분. - 내부 객체는 객체 내부에 포함되어 있는 객체며, 이는 객체의 프로퍼티 중에서 객체 자체를 값으로 가지고 있는 프로퍼티를 의미. const obj = { outerProperty: "Outer", innerObject: { innerProperty: "Inner" } }; 위의 예제에서 "외부 객체"는 obj 전체입니다. outerProperty와 innerObject가 이 객체의 외부 구조를 이룹니다. "내부 객체"는 innerObject입니다. innerProperty가 이 객체의 내부 구조를 이룹니다. -------- 외부객체와 내부객체 외부 객체: 객체의 기본적인 구조를..
-
TIL-2024.03.24 - JS - 얕은 복사 & 깊은 복사> 기초/Javascript 2024. 3. 24. 19:58
------- 배경 아래와 같은 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않음. 이러한 원시값들은 모두 변경이 불가능하며, 각각의 자체적인 데이터 가짐. 예를 들어, 변수에 원시값을 할당하면 변수에는 해당 원시값이 직접 저장되기에 한 변수의 값을 변경해도 다른 변수에 영향 없음. (string, number, boolean, undefined, null, symbol) const a = 1; let b = a; b = 2 console.log(a); //1 console.log(b); //2 하지만 참조값 (Object & Array)은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킴. // ..
-
TIL-2024.03.22 - JS - Closure> 기초/Javascript 2024. 3. 22. 23:29
------- Closure 설명: - 함수와 그 함수가 선언된 렉시컬 환경(lexical environment) 사이의 관계 - 함수가 자신이 선언된 스코프 외부에서 호출되더라도, 해당 스코프에 대한 참조를 유지하고 있는 것을 의미 사용 이유: 데이터 은닉 > Closure 을 사용하여 함수 내에서 선언된 변수들을 외부에서 접근할 수 없도록 은닉 콜백 함수 > 콜백함수로 사용되어 비동기적인 작업으로 외부 변수에 접근 부분 적용 함수 > 함수에 인자를 부분적으로 적용 기본 예시: function outerFunction() { let outerVariable = 'I am outer'; function innerFunction() { console.log(outerVariable); // outerVar..
-
TIL-2024.03.19 - JS - 이벤트 버블링 & 캡처링> 기초/Javascript 2024. 3. 19. 20:57
목표: 이벤트 캡처링 이벤트 버블링 이벤트 캡처링과 버블링 막는 방법 이벤트 캡처링(Event Capturing): 캡처링은 이벤트가 DOM 트리의 상위 요소에서 하위 요소로 향하는 단계 (상위 > 하위) 이벤트가 발생한 요소의 부모 요소부터 시작하여 해당 요소의 가장 최상위 요소인 document까지 이벤트가 전파. 예를 들어, 버튼 요소를 클릭하면, 이 클릭 이벤트는 가장 상위 요소인 document까지 전파되는데, 이 단계에서 이벤트는 이벤트 리스너에 의해 캡처링 단계에서 포착될 수 있습니다. // index.html Click me // main.js document.getElementById('outer').addEventListener('click', function(){ console.log..
-
TIL-2024.02.27 - JS - 실행 컨텍스트-4. 렉시컬 환경-3> 기초/Javascript 2024. 2. 27. 22:39
2.1.2 선언적 환경 레코드 생성 - let, const 전역 변수는 선언적 환경 레코드에 등록되고 관리. - let, const 로 선언한 전역 변수는 전역 객체의 프로퍼티가 되지않고, 개념적인 블록 내에 존재하게 되는데. 이를 전역 환경의 선언적 환경 레코드라 함. 2.2. this 바인딩 - 전역 환경 레코드의 내부 슬롯에 this가 바인딩. - 전역 코드에서 this 는 전역 객체를 가리키므로 전역 환경 레코드의 내부 슬롯에는 전역 객체가 바인딩. - 전역 코드에서 this를 참조하면 전역 환경 레코드의 내부슬록에 바인딩되어있는 객체가 반환. 2.3. 외부 렉시컬 환경에 대한 참조 결정 (상위 스코프와의 스코프 체인) - 외부 렉시컬 환경에 대한 참조는 현재 평가 중인 소스코드를 포함함는 외부 ..