개발하는 루루언니

📙 리액트란? 리액트는 2011년 페이스북의 개발자들에 의해 탄생한 자바스크립트 라이브러리로서, 웹/모바일 애플리케이션의 뷰를 개발할 때 사용된다. 리액트는 컴포넌트에 기반한 접근 방식으로 사용하므로 , 재사용 가능성이 높은 컴포넌트를 개발 할 수 있다. 📙 가상 DOM 이란? 가상 DOM은 그에 대응하는 실제 DOM을 그대로 복사한 자바스크립트 객체로서, 요소 및 어트리뷰트와 프로퍼티로 구성된 노드 트리라고 할 수 있다. 리액트의 render 함수를 사용하여 노트 트리가 생성되면, 데이터 모델의 변경사항을 기반으로 이 노드 트리 즉 가상 DOM이 업데이트 된다. ✅ attribute 어트리 뷰트란? : HTML 문서에서의 정적인 요소 ex) = > class = attribute 이다. ✅ proper..

가상 DOM을 이용하면 실제 DOM 에 변화를 바로 적용하는 것보다 전체적인 프로세스를 효율적으로 수행할 수 있다. 효율적이다 = " 전체적인 프로세스에 드는 비용이 적다 " 속도 차원의 문제라기 보다는, 연산 횟수 차원의 문제라고 할 수 있다. 우선 각각의 DOM 조작은 레이아웃 변화, 트리변화 및 렌더링을 일으킨다. 가상 DOM을 사용하지 않으면 변화가 있을때마다 DOM 조작이 일어나고 이에 대한 연산이 수행 되며 렌더링 되기 때문에 변화를 적용할 때 드는 비용이 비교적 크다. 가상 DOM을 이용하면 일종의 '오프라인 ' DOM 트리 (이는 렌더링 되지 않는다 -> 연산 비용이 적다) 에 변화를 적용 한뒤 그 변화를 하나로 묶어서 한번에 실제 DOM에 전달하기 때문에 연산 횟수가 줄어들고 변화에 대한..

📙 SSR 에 대한 게시글 이므로 CSR 내용은 다소 부족할 수 있습니다 :) 1. SSR (Server Side Rendering) 란? : 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 1. User 가 Website에 요청을 보낸다. 2. Server는 'Ready to Render' 즉 즉시 렌더링 가능한 html을 만든다. ( 리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다) 3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어 있기 때문에 HTML 은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능 하다 ( javascript 가 읽히기 전이다.) 4. 클라이언트가 자바스크립트를 다운 받는다. 5. 다운 받아지고 있는 사이에 유저는 컨텐츠를 볼 순 있으나..