1.Vue.js 란
Vue.js는 UI 를 만들기 위한 자바스크립트 프레임워크입니다.
기존의 JSP로 구현되어 있는 사이트에도 쉽게 적용가능하며, vue-router와 같은 라이브러리를 사용하면 SPA(Single Page Application) 아키텍처 구성 또한 가능합니다. 또한 ES6와 Webpark의 번들링을 통해 대규모 애플리케이션을 단일 파일 컴포넌트(Single File Componemts)로 빌드하여 복잡도를 줄일 수 있습니다.
- 데이터 바인딩 과 화면 단위를 컴포넌트 형태로 제공하며 관련 API 를 지원
- Angular 에서 지원하는 2 way data bindings 을 동일하게 제공
- 다른 Front-End FW (Angular, React) 와 비교했을 때 훨씬 가볍고 빠름
- 러닝커브가 낮고, 쉽게 접근 가능
< MVVM 라이브러리 구조 >
Vue.js 는 UI화면 개발 방법 중 하나인 MVVM 패턴의 화면단 라이브러리 입니다.
MVVM 패턴이란 화면을 Model-View-ViewModel 로 구조화하여 개발하는 방식을 의미합니다. 화면제어와 데이터 제어를 분리하여 유지보수성과 재사용성이 높은 코드를 작성할 수 있습니다.
2.Vue.js 시작하기
*이포스팅은 html / css / javascript 선행학습을 마친상태에서 진행하시는것을 추천드립니다
Vue 를 시작할때는, CDN 에서 스크립트 파일을 불러와서 하는 방법과, 커맨드 라인 인터페이스를 사용하여 CLI 프로젝트를 구성하는 방법이 있습니다.
우선 CDN으로 스크립트파일을 불러오는 방법으로 설명을드리고 CLI로 프로젝트를 생성하여 하는방법은 추후에 진행하도록 하겠습니다.
Vue.js 공식사이트 를 들어가보시면 설치 스크립트파일과 CDN 주소를 확인하실수있고 편한 방법을 사용하시면됩니다.
저는 CDN을 땡겨와 사용하겠습니다. 다음 링크를 사용하시면 npm에 올라간 최신버전을 반영합니다.
<script type="text/javascript" src="https://unpkg.com/vue"></script>3. Hello, Vue.js !
선언적렌더링
Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.
html
<div id="app">
<p>{{ message }}</p>
</div>script
var App = new Vue ({
el: '#app', // 적용될 엘리먼트
data: {
message: 'Hello, Vue.js !'
}
})
스크립트에서 el: '#app' 은 app이라는 id 의 스코프 안에서 작동을합니다. data 에 massge 라는 변수를 만들고 변수의 값으로 Hello, Vue.js ! 라는 스트링값을 주었습니다. 이 데이터가 p 태그 안에 {{ message }} 에 랜더링됩니다. 이런식의 {{ ... }}이중-중괄호 형태로 나타낸 형태를 보간법 이라고 합니다. 파일을 열어보시면 Hello, Vue.js ! 라는 텍스트가 뜰것입니다. 정상적으로 작동이 되었다면 개발자모드에서 콘솔창을 열어 다음과같은 명령어를 입력해보세요
그럼 화면의 값이 "Bye Vue.js !" 로 바뀌는걸 확인할수있으며 이 데이터의 값이 변경될때마다 갱신되어 화면이 렌더링됩니다.
이러한부분은 v-text 디렉티브로 대체될수도있으며 자세한건 추후에 알아보겠습니다.