개요[편집 | 원본 편집]
Vue.js는 웹 프론트엔드 개발을 위한 JavaScript 프레임워크이다. Evan You라는 개발자가 2014년 2월 공개했다. Vue는 단일 페이지 애플리케이션(Single Page Application; SPA) 개발에 특화되어 있는 프레임워크로써 웹 페이지의 각 요소들을 컴포넌트 단위로 추상화하여 재사용할 수 있도록 돕는다. 또한 반응형 프로그래밍을 지향하여, 데이터를 변경하면 유저가 명시적인 업데이트를 호출하지 않아도 바인딩된 부분을 자동으로 업데이트하는 기능을 제공하여 편리하고 직관적으로 사용할 수 있다. 문서의 번역이 잘 되어 있어 이용하기 편리한 것도 장점이다. MIT 라이센스를 따른다.
컴포넌트[편집 | 원본 편집]
Vue의 컴포넌트는 .vue 확장자를 가지는 하나의 파일인데, 이 파일은 크게 template, script, style의 세 부분으로 구성된다. template은 HTML로, 유저에게 보일 컴포넌트의 구조를 정의하고, script는 JavaScript로 데이터와 이벤트를 관리하는 코드가 들어간다. style은 CSS로, 컴포넌트의 스타일을 조정할 수 있다. 각 부분에 사용되는 언어는 사용자의 취향과 필요에 맞게 변경해서 쓸 수 있다.
Template[편집 | 원본 편집]
<template></template> 태그 내에 작성한다. 기본적으로는 HTML로 작성하지만, <template lang="pug">와 같은 식으로 pug, ejs와 같은 다양한 템플릿 언어를 사용할 수 있다.
Script[편집 | 원본 편집]
<script></script> 태그 내에 작성한다. 기본적으로는 JavaScript로 작성하지만, <script lang="ts">처럼 하면 TypeScript나 CoffeeScript같은 자바스크립트로 컴파일되는 프로그래밍 언어들을 사용할 수 있다.
Style[편집 | 원본 편집]
<style></style> 태그 내에 작성한다. 기본적으로는 CSS로 작성하지만 <style lang="scss">처럼 하면 Sass, Less와 같은 CSS로 컴파일되는 다른 스타일시트 언어를 이용할 수도 있다. 또한 <style scoped>로 Scoped 기능을 이용하면 여기서 정의한 스타일이 컴포넌트 외부에는 영향을 미치지 않도록 해준다.
다른 프론트엔드 프레임워크와의 비교[편집 | 원본 편집]
React[편집 | 원본 편집]
- CSS의 위치
- Vue는 위에서 본 것과 같이 하나의 컴포넌트 파일 내에 세 요소를 모두 포함하는 방식을 사용하고 있다. React의 경우는 HTML과 JS는 .jsx 파일 내에 함께 존재하나 CSS는 별개의 파일에 정의하도록 되어 있다. Vue의 방식은 컴포넌트에 영향을 주는 CSS가 같은 파일에 있으므로 찾기 매우 쉬우나, React의 방식은 파일이 많아지고 해당 파일을 찾기 어려워지는 단점을 가진다. styled components라는 라이브러리를 이용하면 Vue와 비슷하게 같은 파일에 스타일을 정의할 수 있어 많이 사용된다.
- 템플릿과 스크립트의 분리 여부
- Vue는 template의 위치와 script의 위치가 엄격하게 분리된다. 반면 React는 스크립트 코드의 render() 함수에 JSX를 이용해 템플릿을 정의한다.
- 상태 변화
- Vue는
this.count += 1처럼 데이터의 값을 변경하면 즉시 화면에 반영된다. React의 state는this.state.count += 1과 같은 식으로 직접 값을 변경해서는 안 되며,this.setState({ count: count + 1 })와 같은 방식을 이용한다. - 단방향/양방향 바인딩
- 리액트는 거의 순수한 부모->자식 단방향 데이터 바인딩을 지향한다. 이는 데이터의 흐름을 단순화시켜 관리하기 편하다는 장점이 있으나, 특정한 상황에서는 자식이 부모의 데이터를 수정할 필요가 꼭 발생하게 된다. Vue도 기본적으로는 단방향의 흐름을 가지나,
v-model과 같은 syntactic sugar를 이용하면 이벤트 핸들링을 래핑해 자식이 부모의 값을 직접 수정할 수 있는 것처럼 보이게 하여 코드의 작성을 편리하게 한다.