Vue.js 란?

Vue.js는 수많은 프로젝트에서 Angular JS를 사용하여 구글을 위해 작업하던 Evan You에 의해 개발되었습니다.

 

"내가 Angular에 대해 정말 좋았던 부분을 뽑아낸 다음 추가적인 모든 개념을 동반하지 않고
무언가를 정말 가볍게 만들어보면 어떨까?"

라는 생각에서 Evan You는 Vue 개발을 시작했다고 합니다.

이러한 Vue.js는 현재 React.js에 이어 2번째로 대중적인 자바스크립트 프레임워크/라이브러리가 되었습니다.

 

 

---

 

그렇다면 Vue.js는 무엇을 말하는 걸까요?

 

Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive Framework)입니다.

Progressive는 Web과 Native App의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 말합니다.

- Web : 별도의 설치 없이 브라우저만 있으면 접속이 가능하기 때문에 접근성이 매우 뛰어남

- Native App : 일반적인 웹보다 빠르고 더 뛰어난 사용자 경험을 제공함

 

이러한 Vue.js가 목표로 하는 것은

웹의 장점과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는 데 있습니다.

Vue.js는 고성능의 Single Page Application(SPA, 단일 페이지 애플리케이션) 개발을 위한 프론트엔드 프레임워크입니다.

 

여기서 SPA(Single Page Application)란 페이지 하나에서 동작하는 애플리케이션을 말합니다.

제일 처음 웹사이트에 접속했을 때,

웹사이트 전체에 필요한 모든 웹 자원(JavaScript, CSS, image 등)을 서버로부터 가져와 로딩을 하게 되는데

이때 페이지를 다른 페이지로 이동하게 되면 웹 페이지 전체가 바뀌는 것이 아니라,

처음 접속했을 때 로딩된 페이지 중에서 변경이 필요한 부분만 바뀌게 됩니다.

 

그렇기 때문에

- 페이지 전환 속도가 빠르고

- 이미 로딩된 자원을 다시 서버로부터 받아 올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있습니다.

 

하지만 이런 SPA에도 단점이 있습니다.

사용자가 웹사이트에 처음 접속하면 사이트 이용에 당장 필요하지 않은 모든 웹 자원까지도 로딩하기 때문에

화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 점입니다.

---

Vue.js의 장점

▶ 직관적

▶ 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드 생산이 가능함.

    ㄴ Vue에서는 컴포넌트를 통해 재사용성을 극대화할 수 있습니다.

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

---

Vue.js의 특징

▶ MVVM(Model-View-ViewModel) 패턴을 사용함.

MVVM은 프로그래밍 로직과 UI 분리를 위해 설계된 패턴을 말합니다.

 

웹에서는

HTML DOM → View 역할

Javascript → Model 역할

Vue → ViewModel 역할을 합니다.

 

MVVM 패턴은 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해 만들어졌습니다.

 

▶ 컴포넌트(Component)를 사용한 높은 재사용성

화면을 이루고 있는 여러 개의 View 중에서 다른 화면에서도 사용되는 View가 있습니다.

이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트(Component)라고 합니다.

Vue로 개발된 파일(.vue) 하나하나가 모두 컴포넌트입니다.

 

컴포넌트는 한 화면을 이루는 작은 요소일 수도 있고, 한 화면 전체일 수도 있습니다.

이러한 Vue에서 하나의 컴포넌트는 HTML + CSS + Javascript로 이루어져 있고,

다른 컴포넌트에서 import 하여 바로 사용할 수 있습니다.