Vue.js 기초 - Vue.js란 무엇인가

Vue 기초 / 인스턴스 생성

Vue.js는 무엇인가?

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework이다. 여기서 프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 뜻한다.

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

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

Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크이다.

일반 웹 사이트와 SPA 방식으로 개발된 웹 사이트의 차이는 페이지가 열리는 방식에서 난다.

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

SPA의 경우는 말 그대로 단일 페이지 애플리케이션이다. 단일페이지, 즉, 페이지 하나에서 동작하는 애플리케이션이다. SPA는 제일 처음 웹사이트에 접속할 때 웹사이트 전체에 필요한 모든 웹 자원을 서버롷부터 가져와서 로딩을 하게 된다. 페이지를 이동하게 되면 웹 페이지 전체가 바뀌는 것이 아니라 처음 접속했을 때 로딩된 페이지에서 변경이 필요한 부분만 바뀌게 된다. 그렇기 때문에 페이지 전환 속도가 굉장히 빠르고, 이미 로딩한 자원을 다시 서버로부터 받아 올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있다.

SPA의 이런 장점이 있는 반면에 단점은 사용자가 웹 사이트에 처음 접속하면 사이트 이용에 당장 필요하지 않은 모든 웹 자원까지도 로딩하기 때문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점 존재함.

1. Vue.js 장점

- 직관적이고 배우기 쉽다.

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

Vue는 컴포넌트 단위로 개발을 통해 재사용성을 극대화하고 애플리케이션 전체에 걸쳐 양질의 코드를 생산할 수 있도록 한다.

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

2. Vue.js 특징

- MVVM 패턴 사용

MVVN은 Model-View-ViewModel의 약자이다. 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴.

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

우리가 보는 웹 화면은 하나 하나가 수많은 웹 요소로 구성되어 있다. 예를들면 버튼, 링크, input, 이미지 등 작은 단위의 요소, 이러한 작은 요소가 결합되어 만들어진 특정 기능을 구성하는 UI 단위가 있다.

이런 작은 단위부터 특정 기능을 처리하는 좀 더 큰 단위까지 이루고 있는 작은 단위의 여러 개의 View 중에는 다른 화면에서도 사용되는 View가 있다. 이런 View를 재사용 할 수 있는 구조로 개발하는 것을 컴포넌트(Component)라고 부른다.

Vue로 개발된 파일(.vue) 하나하나가 모두 컴포넌트다. 컴포넌트는 한 화면을 이루는 작은 요소일 수 있고, 한 화면 전체일 수도 있다. Vue에서 하나의 컴포넌트는 HTML+CSS+Javascript로 이루어져 있고, 다른 컴포넌트에서 import해서 바로 사용할 수 있다.

vue 기초

뷰는 vs 코드 vue tooling extension 설치만 하면 준비 끝. 별도의 툴 필요 없음.