Vue.js 시작하기
백엔드 개발을 하면서 간단하게 화면을 구성해야하는 일이 있을 경우가 종종 발생합니다. 기존에 하던 방식처럼 Server-Side-Rendering, jQuery, AJax를 사용하여 구성할까 라는 고민을 하던 중 미루고 미루어 두었던 Vue.js 학습하여 도입하기로 결정하였습니다. 많은 프론트엔드 프레임워크(Angular.js, React.js) 중에서 Vue.js를 선택한 가장 큰 이유는 러닝커브가 적기 때문입니다. 백엔드 개발자로서 화면구성을 할 일이 그렇게 많지 않는 저는 러닝커브, 생산성, 성능 이 세가지를 만족하는 Vue.js 를 선택하게 되었습니다.
1. Vue.js란
Vue.js는 프론트엔드 프레임워크 입니다. 기존의 JSP로 구현되어 있는 사이트에도 쉽게 적용가능하며, vue-router와 같은 라이브러리를 사용하면 SPA(Single Page Application) 아키텍처 구성 또한 가능합니다. 또한 ES6와 Webpark의 번들링을 통해 대규모 애플리케이션을 단일 파일 컴포넌트(Single File Componemts)로 빌드하여 복잡도를 줄일 수 있습니다.
2. MVVM패턴
Vue.js는 MVVM(Model-View-ViewModel) 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리 입니다. 그렇기 때문에 간단하게 MVVM 패턴에 대해서 알아보도록 하겠습니다. MVVM 패턴은 소프트웨어 아키택처 패턴이며, Backend 로직과 화면 동작 관련 로직을 분리하기 위해 설계된 패턴입니다.
2.1. MVVM 패턴의 구성 요소
2.1.1. Model
비지니스 로직과 실제 데이터를 처리하는 부분
2.1.2. View
MVC 패턴에서와 마찬가지고 View는 사용자 화면을 렌더링하는 부분
2.1.3. ViewModel
View를 표한하기 위해 만들어진 View를 위한 Model
2.2. 요약
쉽게 말해서 MVVM 패턴은 Backend 로직과 UI 렌더링 로직을 분리한 패턴이며 ViewModel이 중간에 위치하여, Backend와 UI단에서 넘어오는 데이터를 바인딩해주는 중간자 역할을 수행합니다.
3. 시작하기
개인적으로 필자가 생각하는 Vue.js의 강점은 러닝커브가 낮다는 것입니다. 아래의 예제처럼 정말 쉽게 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Start!</title>
</head>
<body>
<div id="app">
<div id="app">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>
댓글남기기