[Vue.js] About Vue.js

Vue.js

 

VUE.JS

프런트엔드 프레임워크는 크게 React, Vue, Angular가 있다. 

그 중 Vue.js를 조사해본다.

 

MVVM 패턴

Vue의 디자인은 MVVM 패턴을 기반으로 작성된다.

1. View

View는 UI에 관련된 것을 다룬다. 사용자가 화면을 통해 사용되는 구조, 레이아웃, 형태 등의 인터페이스를 정의한다.

2. ViewModel

View를 표현하기 위해 만든 View를 위한 Model. View를 나타내기 위해 데이터 처리를 ViewModel에서 한다.

3. Model

어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분.

 

Vue.js 장점

1. Easy to get started

다른 프런트엔드 프레임워크를 사용해보진 못했지만, Angular > React > Vue 순으로 난이도가 있다고 한다.

Vue.js는 한글화된 공식문서, 서적, 강의 등 초보자가 접근하기에 쉽다고 하고, 실제로 큰 어려움없이 배우고 있다. 

 

2. Component Based

Vue는 어플리케이션을 빌드하는데 유지보수와 재사용성을 위한 작은 조각의 컴포넌트로 구성되어있다. 이러한 개발 

방식은 웹개발에 HOT한 방식이고 W3C의 새로운 웹 컴포넌트 스펙에 부합한 개발 방식이다.

또한 Vue의 특징중 한가지는 Single File Components다.

<template lang="HTML">
    <div>
    	{{msg}}
    <div>
<template>

<script>
export default{
    data() {
        return {
            msg : 'jungkimhoon'
        }
    }
}
</script>

<style>

</style>

다음과 같이 Vue 단일 파일에 HTML, CSS, JAVASCRIPT를 작성할 수 있다.

이로써 구성 요소의 스타일을 변경하기 위해 컨텍스트를 전환하고 다른 파일로 이동할 필요가 없다.

 

3. View 최적화

Vue는 위에서 처럼 MVVM 패턴을 기반으로, view에 최적화 되어있다.

따라서, DOM을 제어하는데, 기존 jQuery를 통한 DOM조작은 필요하지 않다.

아직 공부가 필요한 부분이다. ( kkodu.tistory.com/1 )

 

4. 다양한 모듈

상태관리를 위한 Vuex, SPA를 위한 vue-router, 그리고 본 블로그에서도 원하는 기능을 작성하기 위하여

모듈을 사용하여 편리하게 개발을 완성했다. 모듈들은 reference들이 대부분 존재하여 본인이 원하는 모듈을 찾아

개발하기 쉽다. 본인은 이 모듈의 도움을 상당히 받아 개발을 진행한 경험이 있다. 너무 좋은 옵션이라고 생각한다.

 

5. 성능

Vue.js는 다른 프레임 워크에 비해 가볍고 빠른 효과적인 성능을 보여준다고 한다.

 

결론

아직 아무것도 해보지 못한 개발어린이 Vue린이로써 조사하면서 Vue의 편리한 점들에 대해 공감하면서도 DOM과

관련해서는 아직 더 조사하고 배워야겠다고 생각했다...

할게 많다.. 휴우..

 

참고 

• mygumi.tistory.com/206
• medium.com/front-end-weekly/top-7-reasons-to-try-vue-js-in-2016-8c9255e2aa92