반응형 프론트엔드5 [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/React/FrontEnd] 프론트엔드 면접문제 part1(JavaScript) 이번에 백엔드에서 프론트로 전향을 하면서 기본 지식을 얻는게 좋다는 생각을 하였습니다. 그러기 위해서 책이나 유튜브 강의를 보는것 도 좋지만, 가장 좋은건 면접질문이라고 생각해요. 현업자들이 요구하는 최소한의 지식이 면접에서 나오기 때문이죠. 저는 React를 하는데 왜 js에 대한 문제일까요? 바로 js를 이해하면 React가 보다 쉽기 때문입니다. 절대 React가 쉽다는것이 아니라, 아무지식이 없는거보단 사전 js지식이 있어야 쉽게 이해할수 있거든요! 정답은 다음 글에서 알려드리도록 하겠습니다. 아래 질문을 읽고 답변을 해보세요. 1. 자바스크립트의 기본 데이터 타입은 무엇인가요? 2. 변수 선언 시 var, let, const의 차이점은 무엇인가요? 3. 호이스팅(hoisting)이란 무엇인가요?.. 2023. 5. 3. 이전 1 2 다음 반응형