Vue.js는 프론트엔드 기술 중 하나입니다. 한 페이지에서 모든 컨텐츠를 보여주는 웹사이트를 SPA(Single Page Application)이라고 하는데,
이런 동적인 페이지를 쉽게 만들어주는 기술이 Vue.js입니다. jQuery가 있기는 하지만, 좀 더 간단한 방법을 제공하기 위해 개발된 Vue.js 살펴보겠습니다.
공식 문서
Vue.js의 탄생
Vue.js는 가벼운 소규모 어플리케이션을 만드는 것을 목표로 만들어졌습니다. 중국의 Evan You가 개발하여 2014년에 릴리즈된 새로운 프레임워크입니다. 제작자는 이전에 구글의 Angular JS의 개발팀이었습니다. 그가 Vue.js를 개발한 이유에 대해서는 이렇게 말합니다.
Angular의 정말 맘에 드는 부분만 추출하여 가벼운 것을 만들 때 사용할 수 있으면 어떨까?
그는 심플하고 가벼운 SPA를 만들고 싶었던 것입니다.
Vue.js는 “데이터와 뷰를 연결해주는 역할”
Vue.js라는 것은 한마디로 데이터와 뷰를 연결해주는 역할을 합니다. MVVM(Model-View-ViewMode) 이라는 방식을 기본으로 만들어져 있습니다.
“Model(Vue 안에 준비된 데이터)”과 “View(HTML에서 표시되는 요소)” 그리고 “ViewModel(View와 Model을 어떻게 연결할까)”로 나누어 생각하는 방식입니다.
MVVM의 구조를 생각할 때는
- 데이터는 무엇인가? (Model)
- 웹페이지에서 바뀌는 부분은 어디인가? 그러기 위해서 필요한 데이터를 생각할 것
- 표시되는 요소는 무엇인가 (View)
- 그 데이터가 HTML의 어느 부분에서 어떤 형식으로 표시되는가 생각할 것
- 어떤 식으로 연결되는가? (ViewModel)
- HTML의 어디가 조작될 때, 데이터가 어떤 형식으로 변화되는가 생각할 것
Vue.js의 주요 기능
Vue.js에는 여러 가지 기능이 있습니다.
| 기능 | 서식 |
|---|---|
| 데이터를 있는 그대로 표시 | {{데이터}} |
| 요소의 속성을 데이터로 지정 | v-bind |
| 입력폼과 데이터의 연결 | v-model |
| 이벤트 연결 | v-on |
| 조건에 따라 표시 | v-if |
| 반복해서 표시 | v-for |
| 데이터를 사용한 계산 | computed |
| 데이터의 변화 감시 | watch |
| 표시/비표시에 애니메이션 처리 | transition |
| 컴포넌트 조립 | component |
설치해 보기
Vue.js를 설치하는 방법에는 “CDN을 사용하는 방법” “다운로드하는 방법” “Vue-cli로 시작하는 방법” 등 여러 가지가 있습니다. “Vue-cli로 시작하는 방법”은 대규모 어플리케이션을 구축할 때 사용하는 방식으로 입문자에게는 권장하지 않으므로, 공식 사이트에 있는 설치 방법을 따라가며 설치하면 되겠습니다.