Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크이다.
Vue는 Component기반의 SPA(Single Page Application)을 만들 수 있는 프레임워크 입니다.
Component
기존의 WEB에서 하나의 화면을 만들기 위해서는 html 파일을 만들고 css, js를 추가하여 만들어주는 방식을 사용했습니다. 하지만 이러한 방식은 규모가 커질 수록 html, css, js의 복잡도가 증가함에 따라 관리가 힘들어지게 되었습니다.
Modern JavaScript방식의 라이브러리와 프레임워크들은 Component라는 개념을 도입하여 이를 해결하고자 했습니다. Component는 우리나라 말로 요소로 해석되는데 이러한 요소들을 조합하여 하나의 페이지를 만드는 방식이라고 생각할 수 있습니다.
Logo.js, Title,js, Button.js 등 특정 요소에 대한 기능을 하나의 Component에 정의함으로서 Application의 규모가 커지더라도 유연하게 대처할 수 있습니다.
SPA
SPA는 단일 페이지 어플리케이션이라는 의미로 하나의 html 파일과 하나의 JS파일로 이루어져 있습니다. 최로 화면을 그릴 때 html과 JS를 로딩하여 전환이 될 경우 페이지를 이동하는 것이 아닌 전환될 부분만 Virtual Dom을 통해 그려주게 됩니다. 마치 우리가 모바일에서 사용하는 하나의 앱처럼 자연스러운 반응을 보여주게 됩니다.
SPA를 사용하게 되면 빠른 페이지 변환, 반응성, 애니메이션 등 사용자에게 좀 더 재미를 느끼게 할 수 있으며 적은 트래픽양을 누릴 수 있습니다. 하지만 최초 로딩 때 JS 파일을 가져와야 하는데 JS의 크기가 크면 클 수록 초기 로딩 속도가 저하되게 됩니다. (이를 해결하기 위한 code-splitting이 있다.)
또한 각각의 브라우저는 로봇이라는 것을 보내 Web Page들을 크롤하게 되는데 이때 화면이 그려지기 전이기 때문에 텅 빈 div 태그만 보이게 됩니다. 그러면 검색엔진에서 검색에 밀리게 되는 부분이 있을 수 있기 때문에 meta tag 또는 nuxt 같은 서버 사이드 렌더링 프레임워크를 이용하기도 합니다.
Virtual Dom
Browser는 html을 전달받으면 렌더 엔진이 이를 파싱해 DOM으로 이루어진 트리를 만듭니다. 이때의 DOM의 각 노드들은 html의 엘리민트들과 연관되어 있습니다.
그리고 외부 css파일과 각 엘리먼트들의 inline 스타일을 파싱합니다. 이 스타일 정보를 사용하여 DOM 트리에 따라 새로운 트리인 렌더트리를 생성합니다.
렌더 트리가 다 생성되게 되면 layout(reflow)과정을 거치게 됩니다. 각 노드들의 스크린 좌표가 주어지고 위치를 부여받게 됩니다. 렌더링 된 요소들에 색을 입히는 과정이 수행됩니다. 이를 Painting이라고 합니다.
위의 과정이 브라우저가 DOM을 생성하는 방법입니다. 우리가 DOM을 조작하게 되면 DO에 변화생기면 렌더트리를 재생성하고 모든 요소들의 스타일이 계산되고 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는 과정이 반복되게 됩니다.
SPA 구조의 어플리케이션은 DOM 조작이 많이 발생되게 되기 때문에 성능을 개선하기 위해 가상의 DOM에 먼저 적용시키고 최종적인 결과를 실제 DOM에 반영됩니다. 이러한 과정은 브라우저의 연산량을 줄여 성능을 개선합니다.
(참고)
https://velopert.com/3236
https://simplevue.gitbook.io/intro/vue.js
https://medium.com/it-%EB%B2%88%EC%97%AD%EC%B0%BD%EA%B3%A0/%EC%96%B4%EC%A7%B8%EC%84%9C-vue-js%EB%8A%94-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%9D%B8%EA%B8%B0%EA%B0%80-%EB%A7%8E%EC%9D%80%EA%B1%B0%EC%9D%BC%EA%B9%8C-bbc20afb4ad5
