반응형 JavaScript50 [JavaScript/ React] React React에서 Virtual Dom을 뭐라고 설명할까요? 공식 문서를 확인해보면 UI의 가상적인 표현을 메모리에 저장하고, React Dom과 같은 라이브러리에 의해 실제 Dom과 동기화 라고 되어있습니다. 또한 공식문서를 확인해보면 JSX라는 용어가 눈에 보입니다. https://ko.legacy.reactjs.org/docs/hello-world.html Hello World – React A JavaScript library for building user interfaces ko.legacy.reactjs.org Hello World다음으로 보이는 JSX 그만큼 중요하다는 말이겠죠? JSX는 JavaScriptXML의 약자입니다. 즉 JavaScript 확장 문법이라보시면 됩니다. const el.. 2023. 7. 10. [JavaScript/ React] Virtual 동작원리 지난 브라우저의 동작원리에 이어 Virtual Dom의 동작원리를 알아보겠습니다. Virtual Dom은 자바스크립트 객체로 표현할수 있습니다. 예시입니다. 와 같은 예시가 있을때, let exam ={ tagName: attribute:{} children:{] } 과 같이 말이죠 Virtual Dom은 자바스크립트 객체로 활용되기 때문에 실제 Dom에서 동작하는것이 아닌, 메모리에서 동작하게 됩니다. 메모리에서 동작하닌깐 속도는 빠르겠죠? 지난번에도 말씀드렸듯이 Virtual Dom은 랜더링되지 않기 때문에 연산비용이 최소화가 됩니다. 그럼 무엇을 하는지는 알겠는데, 그래서 Virtual Dom은 뭔데? Virtual Dom은 지금까지 설명한 과정을 추상화해놓은것입니다. 우리는 아무것도 하지않았고, .. 2023. 7. 7. [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. 이전 1 2 3 4 ··· 13 다음 반응형