Vue Framework 특징

date

May 25, 2023

thumbnail

gsc

Done

public

slug

what-is-vue-framework

author

Vue Framework 란?

Vue.js는 웹 애플리케이션의 사용자 인터페이스를 개발하기 위한 프로그레시브 프레임워크이다. 프론트엔드 개발을 쉽게 하기 위한 React와 함께 대중적인 오픈소스 Javascript 프레임워크로, 가볍고 유연하며 학습 곡선이 낮아 다양한 프로젝트에 적용할 수 있다. 개발자 커뮤니티와 생태계의 지원을 받아 Vue.js를 사용하면 웹 애플리케이션 개발과 유지보수가 편리하다.

Vue가 주목받는 이유

디자이너와 개발자를 위한 설계 Vue.js는 디자이너와 개발자 모두가 쉽게 사용할 수 있는 설계를 갖추고 있다. 직관적이고 간결한 문법을 통해 컴포넌트를 작성하고 조합할 수 있으며, 이는 디자이너와 개발자 모두가 쉽게 접근할 수 있도록 도와준다.

리액티브 양방향 데이터 바인딩 (Reactive Two-way Data Binding) Vue.js의 기능 중 하나로, 데이터의 변화에 따라 자동으로 화면이 업데이트되는 기능을 말한다. 이는 데이터와 화면 요소를 서로 연결하여 데이터의 변경이 화면에 자동으로 반영되는 것을 의미한다. 또한, 사용자의 입력에 따라 데이터도 업데이트되어 양방향으로 동기화된다. 이를 통해 개발자는 데이터와 UI 간의 일관성을 유지하면서 생산성을 높일 수 있고, 사용자 경험을 향상시킬 수 있다.

HTML5와 Javascript의 사용 Vue.js는 HTML5와 자바스크립트에 익숙한 개발자라면 쉽게 배우고 시작할 수 있다. 기존의 HTML 및 JavaScript 코드와 함께 쉽게 통합할 수 있으며, 별도의 학습 곡선이 필요하지 않다. 이로 인해 개발자들이 빠르게 Vue.js를 적용하여 개발할 수 있다.

간단한 설치, 작은 용량 및 빠른 성능 Vue.js는 가볍고 용량이 작은 프레임워크로, 애플리케이션의 초기 로딩 시간을 단축시켜준다. 또한 간편한 설치와 설정 과정을 통해 프로젝트를 빠르게 시작할 수 있다. 이로 인해 Vue.js 애플리케이션은 더 빠른 성능과 우수한 사용자 경험을 제공할 수 있다.

Vue의 특징

Vue가 가진 특징에 대해 5가지를 선별하여 작성했다.

MVVM

Component

Data Binding

Virtual DOM

Vue Lifecycle

MVVM 패턴

MVVM 패턴은 Model-View-ViewModel의 약자로, Vue.js에서 따르는 아키텍처 패턴 중 하나이다. Model과 View 사이에 ViewModel이라는 중간 계층을 두어, View와 Model 간의 결합도를 낮추는 패턴이다.

Model: 애플리케이션의 데이터와 비즈니스 로직이 정의되는 곳

View: 사용자에게 보여지는 화면

ViewModel: View와 Model 간의 인터페이스 역할을 하는 계층

ViewModel은 View의 상태와 Model의 상태를 동기화시켜주는 역할을 한다. 이를 통해 View와 Model 간의 결합도를 낮추고, 애플리케이션의 유지보수성을 높일 수 있다. 또한 MVVM 패턴을 사용하면 개발자는 UI와 비즈니스 로직을 분리하여 개발할 수 있으므로, 코드의 가독성과 유지보수성이 향상된다.

컴포넌트(component) 기반

Vue.js는 컴포넌트 기반으로 개발이 가능하다. 컴포넌트란 작은 단위의 UI 조각으로, 화면을 구성하는 모든 요소를 컴포넌트로 만들어 조합할 수 있다. 이는 유지보수와 확장성 측면에서 큰 이점을 가진다.

컴포넌트 기반으로 개발하면, 독립적인 컴포넌트들을 조합하여 애플리케이션을 만들 수 있다. 이를 통해 컴포넌트 단위로 개발을 진행하면서, 각 컴포넌트를 재사용하거나 다른 컴포넌트와 조합하여 새로운 기능을 구현할 수 있다. 또한, 컴포넌트 단위로 개발을 진행하면 코드의 가독성과 유지보수성이 향상된다.

양방향, 단방향 데이터 바인딩

Vue.js는 데이터와 UI 간의 일관성을 유지하면서 데이터를 업데이트할 수 있는 기능을 제공하는데, 이를 양방향 데이터바인딩이라고 한다. 이는 데이터와 UI 간의 상호작용이 자연스럽게 이루어지도록 해주는데, 사용자가 입력한 값이 자동으로 데이터에 반영되고, 데이터가 변경될 때마다 UI도 자동으로 업데이트된다.

반면, 단방향 데이터 흐름은 데이터의 흐름이 한 방향으로만 흐르는 것을 의미한다. Vue.js에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 주로 사용된다.

가상 돔 (Virtual DOM) - 빠른 렌더링 가능

이 개념은 React가 Vue.js는 가상 돔(Virtual DOM)을 사용하여 빠른 렌더링을 보장한다. 가상 돔은 실제 돔(Document Object Model)과 동일한 구조를 갖춘 가상의 돔을 사용하여, 변경된 부분만 실제 돔에 적용함으로써 불필요한 렌더링을 최소화하고 빠른 렌더링을 가능하게 한다.

DOM과 Virtual DOM의 비교

ㅤ	Real DOM	Virtual DOM
업데이트 속도	느리다	빠르다
HTML 업데이트 방식	전체 업데이트	변경된 부분만 업데이트
새로운 element 업데이트 시	새로운 DOM 생성	가상 DOM에 태그를 추가하고 변경된 부분만 실제 DOM에 적용
메모리	사용량 높음	사용량 적음

Vue의 생명 주기(Lifecycle)

Vue는 컴포넌트의 생명 주기를 가지고 있다. Vue 인스턴스가 생성되고 소멸될 때, 그리고 화면에 렌더링될 때 등 여러 단계에서 훅(hook)이 호출된다.

beforeCreate: 인스턴스가 생성되기 전에 호출된다.

created: 인스턴스가 생성된 후, 데이터(데이터 바인딩)와 이벤트 리스너를 초기화한 후 호출된다.

beforeMount: 인스턴스가 화면에 렌더링되기 전에 호출된다.

mounted: 인스턴스가 화면에 렌더링된 후 호출된다.

beforeUpdate: 데이터가 변경되어 화면을 업데이트하기 전에 호출된다.

updated: 데이터가 변경되어 화면을 업데이트한 후 호출된다.

beforeDestroy: 인스턴스가 소멸되기 전에 호출된다.

destroyed: 인스턴스가 소멸된 후 호출된다.

Vue의 생명 주기 훅을 사용하여 컴포넌트의 데이터를 초기화하거나, 이벤트 리스너를 등록하거나, 외부 라이브러리와의 연동 등을 처리할 수 있다. 또한, 훅을 사용하여 컴포넌트의 상태를 추적하거나, 디버깅 정보를 출력하는 등의 작업을 수행할 수 있다.

Vue.js is a popular open-source JavaScript framework used for building user interfaces. Here are some of its pros and cons based on the current web page context:

Pros:

Vue.js is easy to learn and use, making it a great choice for beginners.

Vue.js has a small size and is lightweight, which makes it faster than other frameworks.

Vue.js has a simple syntax that allows developers to write code quickly and efficiently.

Vue.js has a large community of developers who contribute to its development and provide support.

Vue.js has a flexible architecture that allows developers to use it in different ways.

Cons:

Vue.js is not as popular as other frameworks like React or Angular, which means there are fewer resources available online.

Vue.js has a smaller ecosystem than other frameworks, which means there are fewer third-party libraries available.

Vue.js has less support for server-side rendering than other frameworks.

JQuery와 VueJS 비교

기존에 많이 사용되는 JQuery와 VueJS를 비교하여, VueJS가 어떠한 형태로 동작하는지 간략한 코드를 비교하여 설명한다.

입력창에 값을 입력하면, p태그 text 영역에 반영되는 형태의 화면 코드를 비교해보자.

Jquery 코드


<html>
    <head>
        <title>JQuery 코드</title>
    </head>
    <body>
        <input id="inputBox" type="text">
        <p></p>
    </body>
</html>

<script>
    $(document).ready(function(){
        
        //입력값을 불러온 뒤 P태그에 출력
        $("#inputBox").on("input", function(){
            var text = $(this).val();
            $("p").text(text);
        });
        
    });
</script>

JQuery 방식은 다음과 같은 순서로 동작한다.

화면 최초 로드 시 #inputBox 의 태그에 입력 이벤트를 등록한다.

이벤트가 발생하면 #inputBox 의 입력된 값을 가져오고 p 태그에 출력한다.

VueJS 코드


<html>
    <head>
        <title>VueJS</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="text">
            <p>{{ text }}</p>
        </div>
    </body>
</html>
<script>
    const app = Vue.createApp({
        data(){
            return {
                text:""
            };
        },
    });
    app.mount("#app");
</script>

VueJS 방식은 다음과 같은 순서로 동작한다.