반응형 React5 [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. [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 2 다음 반응형
