반응형 javascript3 [JavaScript/ React] 브라우저의 동작원리 브라우저의 랜더링 과정 1. 브라우저의 랜더 엔진이 HTML을 파싱을 통해 DOM TREE를 생성한다. 2. CSS파일과 inline로 작성된 스타일을 파싱해서 CSS DOM을 구성한다. CSS는 우선 순위가 존재한다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 3. 위에서 만들어진 DOM TREE와 CSS DOM을 결합하여 하나의 RENDER TREE가 만들어진다. 여기서 RENDER TREE는 문서의 시각적인 구조를 나타내고 있다. 4. 뷰 포트 내에서 생성된 RENDER TREE의 각 NODE가 어느 위치에 있어야 할지 결정이 된다... 2023. 7. 6. [JS/JavaScript] 자바스크립트 콜백큐 (Callback Queue)란? 지난번 자바스크립트의 동작원리를 설명할때 "CallBack Queue"를 잠시 설명했습니다. 간단하게 설명하면 WebAPIs에 있는 비동기처리를 Stack에 보내기전 머무르는 영역입니다. 우리가 알고있는 큐는 FIFO구조로 First in First out으로 먼저들어간게 먼저 나오는 구조입니다. 일상 생활에서 일차선 터널이라고 생각하면 쉽게 생각할수 있습니다. 하지만, 지난번 설명한 CallBack Queue는 FIFO구조가 아닙니다. 사실 CallBack Queue는 3가지로 나누어 관리 되고 있습니다. 1. Task Queue(Event Queue) 2. Micro Task Queue(Job Queue) 3. Animation Frame 여기에도 우선순위가 있는데, 크롬 기준 다음과 같은 우선 순위.. 2023. 5. 8. [JavaScript 기초] 프론트엔드 프레임워크 종류 및 특징(Vue.js, React, Angular) front개발을 좀더 쉽게 도와주는 많은 프레임워크가 존재합니다. 시대가 갈수록 많은 프레임워크가 탄생하고 사라지죠. 일단 대표적인 프론트엔트 프레임워크3가지를 소개하고자 합니다. 위 차트는 깃허브에서 가져온 차트입니다. 2020년도 자료긴 하지만, 1위부터 3위 까지만 알아보도록 할께요. 1. Vue.js 뷰는 오픈소스 자바스크립트 프레임워크입니다. 가장 많이 쓰는 이유는 react와 Angular의 장점이 섞여 있습니다. 또한 단순한 웹 개발 프레임워크 입니다. 특징으로는 TypeScript를 지원하고 양방향과 단방향의 바인딩을 지원합니다. 또한 Virtual Dom을 지원 합니다. 1. React React는 facebook에서 만든 javascript라이브러리 입니다. 웹 컴포넌트를 렌더링하고, .. 2022. 2. 11. 이전 1 다음 반응형
