해당 페이지는 캐시워크 채용공고 사이트 개발에 사용중인 React를 사용한 이유와 Front-end에서 사용되는 JavaScript 라이브러리 중, 요즘 핫한 React와 Vue 에 대해 설명하고자 합니다. 두 라이브러리 비교를 위한 몇가지 특징에 대해서 간략하게 설명을 할 것이기때문에 자세한 내용은 직접 공부하시는 것을 추천드립니다.
JavaScript의 동향
주요 JavaScript 라이브러리와 프레임워크의 관심도 변화를 Google Trends 비교를 통해서 보면 2018년 초중반까지는 jQuery가 가장 높다가 최근들어 React, jQuery, angular, (vuejs, polymer) 순으로 인기가 변동되고 있다.
Google Trends란, 구글 검색 데이터를 기반으로 전세계적인 검색 트렌드를 알 수 있는 통계프로그램입니다.
지역을 대한민국으로 지정한 Google Trends 비교도 비슷하다. 2018년 9월 2–8일 기준으로 아직까지는 jQuery가 가장 많은 인기를 차지하고 있고 그 뒤로 react, angular, (vuejs, polymer) 가 따르고 있다.
최근들어 대한민국에서도 vuejs를 사용하는 회사가 많아지기는 했지만 위 통계에 따르면 jQuery 와 react, angular를 사용하는 회사가 많은것으로 파악된다.
소개
NAVER D2 에서 2017년과 이후 JavaScript의 동향에 대한 글을 작성한 글이 있으니 참고해도 좋다. (https://d2.naver.com/helloworld/7229119) + (https://d2.naver.com/helloworld/3259111)
DOM vs Virtual DOM
DOM
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 파싱된 HTML이라고 말할 수 있다.
BOM(Browser Object Model): 웹 브라우저 기능 요소를 직접 관리/제어할 수 있는 특별한 객체 모음
DOM 은 BOM의 최상위 객체인 window 객체의 하위 객체이다.
렌더링
DOM 은 브라우저의 렌더링 엔진에 의해서 생성된다. 렌더링 엔진은 브라우저의 주요 구성 요소 중 하나이며 자세한 내용은 이 곳을 참고하길 바란다.
렌더링 엔진 동작 과정 (Webkit 기준)
HTML 파싱 및 DOM 트리 구축 → 렌더 트리 구축 → 렌더 트리 배치 → 렌더 트리 그리기
브라우저의 렌더링 엔진에 의해 HTML을 파싱하여 DOM 트리를 구축하고 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 파싱된 스타일 정보와 DOM 트리는 “렌더 트리” 라는 것을 생성한다. 렌더 트리 생성이 끝나면 각 노드가 정확한 위치에 표시되는 배치 작업이 이루어지고 스타일이 적용된다.
DOM 렌더링의 위기
단순하게 HTML을 서버에서 받아서 한번에 그리고 끝나는게 아니라 최근에는 SPA(Single Page Application)이 생기게 되면서 DOM을 수시로 변경하게 되는 일이 발생했다.
예를들어 어떤 요청이 있을 때, 브라우저는 노드가 1000개쯤 있는 DOM 트리를 뒤져서 특정 노드를 찾아 width를 조금 넓혀주고 CSS 트리를 만들고 합치고 화면에 스케치하고 색을 채운다고 하자. 이 작업이 한 번만 이루어진다면 괜찮겠지만 100번 또는 그 이상의 요청이 올 경우 위의 작업이 100 이상으로 이루어져야 한다. (DOM API를 이용하여 실제로 테스트하면 렌더링이 오래걸린다는 것을 느낄 것이다.)
Virtual DOM
가상 돔(Virtual DOM)은 브라우저 대신 DOM 변경을 인지하고 그 내용을 가상 돔에 반영한다. 이 변화를 반영한 가상 돔의 내용을 브라우저에게 전달하여 그리게 한다.
가상 돔은 브라우저의 DOM과 렌더링을 위한 버퍼 역할을 한다.
- 메모리상에 가상의 DOM Tree를 구축
- 데이터가 수정될 때 새로운 DOM Tree를 구축하고 이전 것과 비교
- 비교 후 변경사항이 있는 부분 수정
아래 간단한 코드를 통해 Virtual DOM의 concept에 대해 이해해 보자.
document.getElementById("app").appendChild("<div>hello</div>");document.getElementById("app").appendChild("<div>hello</div>");...document.getElementById("app").appendChild("<div>hello</div>");
DOM API 를 통해 #app에 태그를 무수히 많이 추가하는 코드이다. 위에 설명된 DOM 렌더링 방식에 의해 DOM을 여러번 렌더링을 하는 것이기때문에 화면을 그리는 렌더링 계산 비용이 많이 든다. 따라서 브라우저의 속도가 느려지게 되는 것이다.
let tmp = "";tmp += "<div>hello</div>";...tmp += "<div>hello</div>";document.getElememntById("app").appendChild(tmp);
위의 코드는 tmp라는 변수에 업데이트할 내용을 전부 만들고 마지막 5번째 라인에서 한 번만 DOM을 업데이트 했다. 이러한 방식으로 코딩을 하고 있었다면 이미 Virtual DOM의 concept를 사용하고 있는 것이다. 변경할 사항을 “가상의” 위치에서 처리하고 “실제 DOM”의 조작을 최소화하는 것이다.
이러한 개념을 사용하여 개발자들에게 제공하고 있는 것이 React와 Vue.js인 것이다. React의 Virtual DOM에 대한 영상을 참고하면 DOM과 Virtual DOM의 렌더링 차이를 쉽게 이해할 수 있을 것이다. 화면이 변경돼야하는 상황이 생기면 Virtual DOM에 새로운 화면을 그리고 React는 이전 화면과 새로운 화면을 비교하여 변경된 사항만 실제 DOM에 그리는 것이다. (이는 Vue.js도 마찬가지다.)
추가적인 내용은 2편을 참고하세요.
