Vue.js 란 ?
vue.js 가 무엇인지에 대해 알아봅니다.
Vue.js 공식 문서에서는 아래와 같이 설명합니다.
Vue 는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 이다.
조금 설명을 추가 해보자면 Vue 는 Component 기반의 SPA (Single Page Application) 사이트를 구축 할 수 있습니다. 여기서 Component 란 무엇이고 SPA 란 무엇일까요?
Component
jQuery 시절에 아래의 페이지를 구성해야 했다면 하나의 html 파일을 만들고 그 안에 markup 태그와 css 를 넣고 전체 동작에 따른 js 파일을 작성해주어야 했을 겁니다. 페이지의 규모가 커질수록 html 구조가 복잡해짐에 따라 style 관리가 힘들어지고 js 파일의 규모가 커질수록 모듈 관리 또한 힘들었습니다. Modern Front 의 라이브러리와 프레임워크들은 Component 라는 개념을 도입하여 위와 같은 문제를 해결하였습니다. 아래의 페이지를 예시로 들어보겠습니다. 상단의 로고, 중앙의 타이틀과 버튼, 이미지 들을 각각 조각(component) 들로 분리하여 해당 페이지에서 레고를 조립하듯 끼워 맞춥니다.
Logo.js (상단 로고만을 위한 html, css, js, image 를 관리한다)
Title.js (중앙 타이틀 텍스트만을 위한 html, css, js 를 관리한다)
Buttons.js (버튼에 대한 html, css, js 를 관리한다)
해당 Component 에서는 관심사에 따른 View 만 관리하면 되기 때문에 규모가 커지더라도 유연하게 대처할 수 있습니다.
SPA (Single Page Application)
SPA 란 말 그대로 단일 페이지 어플리케이션 입니다. 하나의 html 파일과 단일 JS 파일로 이루어져 있습니다. 최초 로딩 시에 html 파일과 JS 을 미리 로딩하여 페이지 전환이 될 경우 페이지를 이동하는 것이 아닌 전환될 부분만 그려줍니다.
아래의 이미지를 보면 페이지를 이동하였으나 페이지 전체가 새로 로딩되는 것이 아니라 보여줘야 할 페이지의 부분을 새로 그려주면 페이지를 전환 같은 효과를 보여줍니다.
SPA 로 페이지를 구성하게 되면 빠른 페이지변환과 반응성, 화면전환 애니메이션 등 사용자 친화적인 부분과 적은 트래픽 양을 누릴 수 있습니다. 하지만 장점만 있는 것은 아닙니다. 위에서 말씀드렸던 것 처럼 최초 로딩 시에 JS 파일을 가져와야 하는데 JS 의 사이즈가 커수록 초기 로딩속도는 느려집니다. (이를 해결하기 위해 뒤에서 code-splitting 에 대하여 알아볼 예정입니다) 또, 검색엔진이 해당 페이지를 크롤 했을 때는 페이지가 그려지기 전이기 때문에 텅 빈 div 태그만 노출됩니다. 이를 해결하기 위해서는 meta tag 를 이용하거나 nuxt 같은 서버사이드 렌더링 프레임워크를 이용해야 합니다.
마무리
virtual dom에 대해서는 이미 유튜브에 너무 좋은 자료가 있기 때문에 따로 설명하지 않았습니다 :)
React, Angular 와 비교했을 때 Vue 의 복잡도가 더 낮다고 생각하고, 공식문서 또한 한글화 번역이 잘 되어 있기 때문에 입문자 입장에서 접근하기 쉽습니다 :)
virtual dom: https://www.youtube.com/watch?v=BYbgopx44vo
Last updated
