# virtual DOM
[React] Virtual DOM?
DOM을 추상화한 가상의 객체Document Object Model, 문서객체모델브라우저에서 다룰 HTML 문서를 파싱하여 우리에게 시각화 해준다.이 객체를 이용해서 HTML, XML 문서에 동적 처리를 해준다.ex. getElementById직접 DOM에 접근하는 것
[면접준비] 1일차
CORS란 무엇이고 어떻게 허용할 수 있나요?CORS란 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유 정책입니다. 여기에서 교차 출처는 (엇갈린) 다른 출처를 말합니다.동일 출처 정책을 따르면 동일한 출처의 서버에 있는 리소스는
[JS] DOM vs Virtual DOM
웹페이지에 들어가있는 html element들을 트리의 형태의 구조로 표현한 것크롬이나 사파리처럼 웹서핑에 사용되는 프로그램 브라우저에 console.log(document)를 실행해보면 document객체가 출력됨브라우저가 아닌 컴퓨터 자체에서 자바스크립트를 실행No
돔(dom)과 가상 돔(virtual dom)
DOM과 Virtual DOM 리액트에서는 virtual DOM(가상 돔)이라는 것을 사용한다. 그렇다면 그냥 DOM을 사용하지 않고 왜 따로 가상 돔을 만들어서 사용하는 것인것일까? 그리고 그렇게 가상돔을 사용하면 어떠한 장점들이 있을까? DOM과 Virtual
한 주의 정리 - WIL
이번주(2월 13일 ~ 2월 19일) 리액트 숙련과정부터 리액트 심화과정까지 생각보다 어렵고 생각치도 못한 것들이 많이 일어났던 한주였다.1\. 리덕스 액션은 어떤 행동을 뜻한다. 액션은 하나의 객체이다. 액션에 type은 필수이다. 액션 생성 함수는 액션을 만드는 함
[React][리액트를 다루는 기술] react 특징과 DOM & Virtual DOM
리액트의 특징에 대해 알아보기 전에 DOM에 대해 알아보고자 한다.DOM은 Document Object Model의 약어이며, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.웹 브라우저는 DOM을 할용하여 객체에 JS와 CSS를 적용한다. 또한 D
리액트 - Virtual DOM
2월 15일 여정 38일차이다.오늘은 Virtual Dom에 대해 간단하게 알아보려고한다.기본적으로 브라우저의 작동 원리는 이러하다.HTML를 파싱 후, DOM트리를 구축합니다.CSS를 파싱 후, CSSOM트리를 구축합니다.Javascript를 실행합니다.DOM과 CS
Virtual DOM(가상 DOM)
문득 프레임워크 없는 프론트엔드 개발이라는 책을 읽으면서 가상 돔에 대해서 정리하고자 작성하게 되었다.리액트에 의해 가상 DOM의 개념은 선언적 렌더링 엔진의 성능을 개선시키는 방법이 되었다.출력된 UI는 메모리에 유지되고, 실제 DOM과 동기화 되며, 가능한 적은 작
[Front-end] 수업 #069일 1-5
React POFO 클론코딩 -> React로 옮겨보기 실습 >지난번 POFO 클론코딩 페이지를 HTML , CSS , JavaScript로 만들었고 그것을 토대로 React에 Component화 시켜서 옮기는지 간단하게 알아보는 시간이다. 의 구성 >에 기본적으로 가 들어가고 안에 Component를 생성하여 넣어준다. WrapComponent 최상위...
Explain about Virtual DOM and role in the overall performance of React Application.
Front-End 개발에서 DOM 변경을 최적화하는 방식입니다. 가상 DOM은 DOM 대신 메모리에 상시적으로 가상의 DOM 트리를 저장하여 UI 변경에 대한 적은 비용으로 실제 DOM을 갱신할 수 있습니다.Virtual DOM is way to optimize DOM
[튜토리얼] React 리액트 시작
메타에서 개발한 오픈 소스 자바스크립트 라이브러리.프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수는 Vue가 가장 많으며(2022년 12월 04일 기준 Vue는 201K, React는 199K, An
[알게된 것] Ref? 왜써야할까?
Ref를 사용해야 하는 이유는 크게 두 가지로 나뉜다.1\. DOM에 접근하여 HTML Element를 핸들링 해야하는 경우2\. 상태 변화를 갖는 변수가 필요하지만, 화면이 리렌더링 되는 것을 원치않는 경우위 이미지는 Virtual DOM을 정확하게 표현하는 자료라고
[React] Virtual DOM
가상의 DOM 객체실제 DOM의 사본 같은 개념React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용합니다.Virtual DOM은 Real DOM의 가벼운 사본과 같습니다.Virtual
Virtual Dom 이란?
먼저 virtual dom을 설명하기 전에 dom에 대해서 알아보자. DOM Document Object Model의 약자이며, 한글로는 "문서 객체 모델"이라고 부른다. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.우선 브라우저가 랜더링되기까지의 과
virtual dom이란?
virtual DOM이란?DOM을 추상화한 가상의 객체입니다. 가상 DOM은 React, Vue.js그리고 elm에 사용됩니다. 가상 DOM은 실제로 스크린에 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠릅니다. 1-1. DOM(Docu
# React key concepts
모든 코드를 컴포넌트 라는 작은 단위로 쪼개고, 이들을 조합하여 사이트를 구성한다. 만들어둔 기능을 재사용할 때 코드들을 전부 복사&붙여넣기할 필요없이 그냥 컴포넌트들을 import 해서 사용하면 되기 때문에 매우 용이하다.(React 뿐만 아니라 Angular, Vu
