Vue.js 란?

12 min readFeb 2, 2021

Vue.js는 Progressive Javascript Framework입니다. 여기서 프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발된 것을 뜻합니다.

예를 들어 웹의 경우는 별도의 설치 없이 브라우저만 있으면 접속이 가능하기 때문에 접근성이 매우 뛰어납니다. 그리고 네이티브 앱의 경우는 일반적인 웹보다 빠르고 더 뛰어난 사용자 경험을 제공합니다.

결국 Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들수 있는 프레임워크를 제공하는데 있습니다.

또한 Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크입니다. 여기서 SPA는 단일 페이지 애플리케이션을 말하는데 SPA가 무엇인지 이해하기 위해서는 기존의 웹의 동작 방식를 먼저 이해해야 합니다.

SPA방식으로 개발되어지지 않은 웹사이트에 접속을 했다고 가정하도록 하겠습니다.

도메인 주소를 입력하고 특정 웹사이트에 들어와서 해당 사이트에서 제공하는 특정 메뉴를 클릭하면, 여러분이 보고 있는 페이지가 선택된 메뉴에 해당하는 페이지로 이동이 될 것입니다. 이때 브라우저에 있는 URL이 처음 여러분이 접속한 도메인 주소에 변화가 일어날 것입니다.

물론 SPA로 개발된 웹사이트도 여기까지는 동일합니다.

중요한 것은 페이지가 열리는 방식에서 차이가 납니다.

일반적인 웹사이트의 경우는 여러분이 페이지를 매번 이동할때 마다 페이지 전체를 다시 로딩하게 됩니다. 이때 해당 페이지에서 이용하는 다양한 자바스크립트 파일, CSS파일, 이미지 파일 등 전체를 서버에서 가져와서 로딩을 하게 됩니다.

아마 이렇게 로딩이 되는 파일 중 일부는 이미 해당 페이지로 이동되기 전에 머물렀던 페이지에서 사용했던 동일한(중복된) 자바스크립트, CSS, 이미지 파일일 수 있습니다.

일반적인 웹사이트의 경우 페이지 이동으로 새로 열리는 페이지에 필요한 웹 자원(자바스크립트, CSS, 이미지 등)을 항상 다시 서버로 부터 받아와서 로딩을 하게 됩니다.

SPA의 경우는 말 그대로 단일 페이지 애플리케이션입니다. 이름에서 알 수 있듯이 단일 페이지, 즉 페이지 하나에서 동작하는 애플리케이션 인것입니다.

SPA는 여러분이 제일 처음 웹사이트에 접속했을때, 웹사이트 전체에 필요한 모든 웹 자원(자바스크립트, CSS, 이미지 등)을 서버로 부터 가져와서 로딩을 하게 됩니다.

그리고 여러분이 페이지를 이동하게 되면, 웹 페이지 전체가 바뀌는 것이 아니라, 처음 접속했을 때 로딩 된 페이지 중에서 변경이 필요한 부분에 대해서만 바뀌게 됩니다. 그렇기 때문에 페이지 전환 속도가 굉장히 빠르고, 이미 로딩된 자원을 다시 서버로 부터 받아 올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리 할 수 있습니다.

SPA는 이런 장점 때문에 최근 웹 애플리케이션에서 굉장히 많이 사용되고 있는 방식입니다. 하지만 SPA도 단점이 존재합니다.

여러분이 제일 처음 웹사이트에 접속을 했을때, 당장 필요하지 않은, 즉 웹 사이트 전체에서 필요한 모든 웹 자원을 로딩하기 때문에, 초기 접속시 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있습니다.

더구나 만약에 여러분이 첫 페이지만 보고 해당 웹 사이트를 더이상 머물지 않고 빠져나가는 사용자라면, 내가 방문하지 않을 웹 페이지에서 사용하는 웹 자원까지 모두 로딩이 되는 것으로 인한 속도 저하를 느낄 수 있습니다.

여러분이 제공하는 웹 사이트의 성격이 어떠냐에 따라 웹 사이트를 개발하는 방식도 달라져야 합니다.

최근 웹 애플리케이션을 개발할때 프론트엔드에 개발에 사용되는 가장 인기 있는 프레임워크에는 Vue외에도 React, Angular 있습니다.

제일 처음 웹프론트엔드를 접할 때 모든 개발자들이 고민하는 것 중에 하나가 이 3가지 프레임워크 중에 무엇을 먼저 배울것이고, 무엇을 적용할 것인가 일 것입니다.

저의 경우는 개발 경력이 오래되다 보니, 너무나 자연스럽게 이 3가지 프레임워크를 별 고민 없이 사용할 수 있었습니다.

Angular가 제일 먼저 나왔고, 그 다음으로 React, Vue 순으로 나왔기 때문에, 나온 순서대로 자연스럽게 익히고 실무 프로젝트에 적용을 하게 되었습니다.

하지만 이제야 막 웹프론트엔드를 시작하는 개발자라면 정말 고민이 될 수 밖에 없을 것 같습니다.

Vue.js 장점

Vue가 가지고 있는 가장 큰 장점은 다음과 같이 3가지로 정리를 했습니다.

직관적이고 배우기 쉽다.
재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있다.
Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.

직관적이고 배우기 쉽다.

나는 최근 전세계 개발자들에게 가장 인기 있고, 많이 사용되고 있는 웹프론트엔드 프레임워크인 React.js, Angular.js, Vue.js를 모두 사용해 봤습니다. 여기서 사용을 해봤다는 것은 단지 학습차원에서 공부하고 프로토타이핑 수준의 미니 프로젝트를 진행한 것이 아니라, 실제 사용되는 애플리케이션을 개발하는 프로젝트를 진행한 경험이 있습니다.

내가 생각하는 Vue.js의 가장 큰 장점 중 하나는 배우기가 가장 쉽다는 것입니다. 특히 다른 언어로 개발해 본 경험이 있는 개발자라면, 정말 단 기간 안에 Vue.js를 익히고 실무에 바로 적용할 수 있을 정도로 매우 직관적이고 배우기가 쉽습니다.

만약에 여러분이 웹 애플리케이션을 개발을 하고 고객사에 납품을 해야 하는 상황이고, React, Angular, Vue 이렇게 3가지 프레임워크 중 하나를 선택해서 개발을 해야 하는 상황이라면 나는 Vue를 사용하라고 과감히 추천하고 싶습니다.

특히나 고객사의 운영팀이 아직 이 3가지 프레임워크에 대한 경험이 없다면, 더더욱 Vue를 추천한다. 이건 내가 실무에서 무수히 겪은 경험을 토대로 말을 하는 것입니다.

고객사의 운영팀, 운영팀을 일단 새로운 기술이 적용되는 것에 대해서 두려움이 있습니다. 왜냐하면 운영팀 입장에서는 기존에는 한번도 다뤄보지 않은 새로운 기술을 빠르게 익혀야 하고, 그 기술로 구현된 애플리케이션을 실제 운영을 해야 하는 상황이기 때문입니다.

하지만 운영팀 엔지니어들은 이미 오랜 시간 동안 시스템을 운영한 많은 노하우를 가지고 있고, 최소한 하나 이상의 프로그래밍 언어에 익숙한 사람이 가능성이 매우 높습니다. 이때 React, Angular, Vue와 같은 프론트엔드 프레임워크에 대한 경험이 전혀 없다면, 기존 기술 지식을 가지고 가장 빨리 익힐 수 있는 것이 Vue.js라는 것에 나는 확신을 가지고 있고, 실제 실무에서 그렇다는 것에 대한 많은 사례를 경험 했습니다.

재사용을 통한 애플리케이션 개발 단축 및 양질의 코드를 생산할 수 있다.

Vue는 재사용성을 극대화하고 애플리케이션 전체에 걸쳐 양질의 코드를 생산할 수 있도록 해줍니다. 결국 애플리케이션 개발 속도를 높일 수 있습니다.

우리가 흔히 부르는 템플릿이란 용어가 있습니다.

보통 템플릿이라고 하면, 무언가 정형화 되어 작성이 되어서 유사한 것을 만들때 적용하여 빠르게 원하는 것을 만들 수 있도록 해주는 이미 구조화가 된 것을 말합니다.

템플릿은 문서일 수 도 있고, 특정 디자인 일 수도 있습니다.

프로그램에서도 템플릿이란 것은 비슷한 개념이라고 생각하면 됩니다.

특정 기능을 가지고 있는 프로그램 코드 세트이며, 개발자는 템플릿을 사용해서 이미 템플릿이 가지고 있는 기능을 활용하여 유사한 프로그램을 빠르고 안정적으로 개발할 수 있습니다.

Vue에서는 컴포넌트(Component)가 이에 해당합니다. Vue에서는 컴포넌트를 통해 재사용성을 극대화 할 수 있습니다. 컴포넌트가 무엇인지는 해당 챕터에서 자세히 설명을 드릴것이니까 지금은 이런것이 있고, 이런것을 통해 코드의 재사용을 높이고 양질의 코드를 개발할 수 있다고 이해하시면 좋을것 같습니다.

Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.

Angular가 처음 나왔을 때, 가장 큰 충격은 받은 기능 중 하나는 단연코 데이터 바인딩 부분입니다. 기존의 웹 개발 방식에서 자바스크립트의 대부분의 역할은 웹화면에서 사용자의 인터랙션을 통해 발생하는 데이터와 이벤트를 화면에 설정하거나 반대로 발생한 데이터/이벤트를 가져오는 부분에 대한 코딩이였습니다.

사실 너무나 당연한 코드이기도 하지만, 대다수의 웹 개발자들은 이런 자바스크립트 코딩을 어려워했고, 실제고 많은 코드를 작성해야 이런 부분을 처리할 수 있었습니다.

Angular가 나오고 데이터 바인딩, 정확히는 Two-Way 데이터 바인딩을 제공함으로써 어찌보면 웹 개발의 혁명이 일어났다라고 생각할 수 있습니다.

이 이후에 나올 챕터에서 데이터 바인딩에 대해서는 자세히 설명을 할 것이지만, 여기서 간략하게 설명을 하자면, 데이터와 웹화면의 요소(HTML DOM)가 서로 양방향으로 연결이 되어 있어서 어느 한쪽에 변경이 일어나면 연결되어 있는 다른쪽에 자동으로 반영이 되는 것을 의미합니다.

이렇게 됨으로써, 기존 웹 개발에서 어느 한쪽의 변경이 일어났을때 다른 한쪽에 해당 결과를 반영하기 위해서 구현했던 수많은 코드를 작성할 필요가 없어졌고, 개발자의 실수 혹은 구현 능력 부족으로 인한 오류를 걱정할 필요가 없어진 것입니다.

지금 이 내용이 이해가 되지 않더라도 걱정하지 않으셔도 됩니다. 우리는 이 책을 통해서 이 모든 내용을 아주 자연스럽게 익힐 수 있게 될것이고, 이해가 될 것이기 때문입니다.

Angular는 그렇게 처음 등장과 동시에 웹 개발 방식에 혁명을 가져다 줬고, 많은 웹 애플리케이션 개발에 사용이 되게 됩니다.

그런데 이렇게 완벽해 보이는 Angular도 웹 애플리케이션이 복잡해 짐에 따라 치명적인 단점이 발견이 되게 됩니다.

그건 바로 속도(성능) 문제였습니다.

Angular의 등장으로 웹에서도 데스크탑 애플리케이션 수준의 프로그램을 개발할 수 있다는 가능성이 열리게 되었고, 웹 애플리케이션은 기존에 데스크탑 애플리케이션이 처리하던 많은 기능을 담기 시작합니다.

그러면서 웹 화면은 점점 더 복잡도가 증가하게 되었고, 웹 즉 HTML DOM(Document Object Model)의 특성상 복잡도가 증가 할 수록 점점 무거워지고 느려지게 되었습니다.

HTML DOM은 트리구조로 되어 있어서 웹 화면에 요소가 많아지고 복잡도가 증가할 수록 끊임없이 연결된 트리구조를 갖게 되고, 웹 화면에 변경이 일어날 때 마다 이러한 트리구조의 갱신이 일어나야 하고 이 작업은 굉장히 큰 성능 저하를 가져오게 되는 것입니다.

예를 들어 여러분이 보고 있는 웹화면에 광고 배너가 있습니다. 여러분이 배너를 클릭을 했고, 광고 팝업이 보여졌다라고 가정해 보겠습니다. 이때 웹은 내부적으로 DOM의 트리구조를 갱신하게 됩니다. 이렇게 웹에 작은 변화가 있을 때 마다 DOM 트리구조를 모두 갱신하는 비효율성으로 인해 웹의 복잡도가 큰 화면이라면 이러한 작업은 치명적인 성능 저하를 가져오게 되는 것입니다.

이러한 단점을 극복하고 빠르고 고성능을 가진 웹 애플리케이션을 위해 나온것이 React 입니다.

React는 이러한 DOM의 문제를 개선하기 위해서 Virtual DOM(가상 돔) 개념을 제공하게 됩니다. Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면(View)을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리를 한 후 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였습니다.

Vue는 Angular가 가지고 있는 데이터 바인딩의 장점과 React가 가지고 있는 Virtual DOM의 장점을 모두 수용해서 개발이 되어진 프레임워크 입니다.

Vue.js 특징

MVVM 패턴 사용
Component를 사용하여 재사용성이 높습니다.

MVVM 패턴

MVVM은 Model-View-ViewModel의 약자입니다. 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴입니다. 일반적인 웹의 경우는 HTML DOM이 View, 자바스크립트가 Model의 역할을 하게 됩니다. MVVM 패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해서 만들어졌습니다.