목적
백엔드 개발자라고 할지라도, 프론트엔드의 가장 트렌드 기술의 최소한의 구동원리는 알고 있어야 팀프로젝트의 View를 자연스럽게 익힐 수 있을 것이라고 판단해서 정리했다.
Vue.js란?
웹 페이지 화면을 개발하기 위해 릴리즈된 Javascript 기반의 프론트엔드 프레임워크이다. vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다.
리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다.
vue.js는 위 그림과 같은 구조를 가지고 있다. 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.
즉, 단순 라이브러리의 기능 외에 프레임워크 역할도 수행하게 되는 것이다.
Vue.js 장점
뷰 같은 경우는 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있다.
배우기 쉽다.
리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
리액트의 장점과 앵귤러의 장점을 가지고 있다.
Vue.js의 필요성?
Vue.js를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, Vue.js를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되어진다.
뿐만아니라 리액트와 앵귤러에 비해 성능이 우수하다고 말하는 사람도 있을 만큼 빠르고,
리액트의 장점과 앵귤러의 장점을 가지고 있다.
Vue.js 특징
MVVC 패턴
뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
위 그림에서 보듯, MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다.
이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해진다.
2. Component 기반 구조
뷰가 가지는 또 하나의 큰 특징은 바로 컴포넌트 기반 프레임워크라는 것이다.
위 그림과 같이 컴포넌트란 레고 블록을 조합하는 것과 비슷하다.
즉, 화면을 왼쪽그림과 같이 구성을 하면 오른쪽그림과 같은 컴포넌트 트리 구조를 가지게 되는 것이다 이러한 컴포넌트 기반의 프레임워크를 사용함으로써 코드의 재사용성이 향상되며, 직관적인 화면 구조를 갖게 된다.
리액트와 앵귤러의 장점을 가진 프레임워크
Vue는 앵귤러의 양뱡향 데이터 바인딩과 리엑트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다. 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경되는 것을 의미한다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다.
즉, 컴포넌트간의 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한뱡향으로만 전달하게끔 프레임워크가 구조화되어 있는 것을 말한다.
이 외에도 Vue는 빠른 화면 렌더링을 위해 리엑트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹화면에 적합한 동작구조를 갖추고 있다.
가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.
따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화며을 그릴 수 있다.
Vue의 인스턴스의 정의와 속성
뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다.
즉, 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다.
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello Vue.js !'
}
});
</script>
</body>
</html>HTML화면에 'Hello Vue.js !' 라는 텍스트를 출력하기 위한 코드
일단 new Vue()로 뷰 인스턴스를 생성, 물론 이전에 Vue 인스턴스를 사용할 수 있게 vue.js 라이브러리를 내려받고 있는 코드가 존재한다.
그리고 인스턴스 안에 el 속성으로 해당 뷰 인스턴스의 범위를 설정해주었고, data 속성에 message 값을 정의하여 화면의 {{message}}에 'Hello Vue.js !'가 출력되도록 하였다.
잘 보면 el의 범위가 특정 div의 아이디 값과 매칭되는 것이 보인다.(css 선택자)
즉, 해당 뷰 인스턴스는 app이라는 아이디를 가진 특정 HTML 태그라는 범위를 갖고 사용되는 인스턴스인 것이다.
References (참고 자료)
