Vue.js 입문 # 0

Vue.js

Vue.js 소개

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리

MVVM-구조에서의-Vue

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음
• Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공
• 하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름.
• 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

MVVM 패턴이란?

MVVM 패턴이란

Backend 로직과 Client 의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인하였다. 간단하게 생각해서 화면 앞단의 회면 동작 관련 로직과 뒷단의 DB 데이터 처리 및 서버 로직을 분리하고, 뒷단에서 넘어온 데이터를 Model 에 담아 View 로 넘어주는 중간 지점이라고 보면 된다.

 

Vue.js의 주요 특징과 개념

선언적 렌더링 (Declarative Rendering): Vue.js는 HTML 템플릿을 사용하여 화면에 데이터를 렌더링하는 데 초점을 두고 있습니다. 데이터와 화면 요소 간의 연결을 설정하고 데이터가 변경되면 화면이 자동으로 업데이트됩니다.

컴포넌트 기반 구조: Vue.js는 컴포넌트 기반 아키텍처를 채택하고 있어, 애플리케이션을 작은 독립적인 컴포넌트로 구성할 수 있습니다. 이로써 코드의 재사용성과 유지보수성이 증가합니다.

컴포넌트 기반 구조 (vuejs.org)

양방향 데이터 바인딩 (Two-way Data Binding): Vue.js는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 제공합니다. 이를 통해 입력 양식과 데이터 모델 간의 동기화를 쉽게 구현할 수 있습니다.

Vue 인스턴스: Vue.js 애플리케이션은 Vue 인스턴스로 구성됩니다. Vue 인스턴스는 데이터, 메서드, 컴포넌트 등을 정의하며, 애플리케이션의 진입점 역할을 합니다.

디렉티브: Vue.js는 v- 접두사를 가진 디렉티브를 제공합니다. 디렉티브는 HTML 요소에 특별한 속성을 추가하여 화면 동작을 제어하고 데이터를 연결하는 데 사용됩니다.

Vue Router: Vue.js와 함께 사용되는 공식 라우팅 라이브러리인 Vue Router를 통해 클라이언트 사이드 라우팅을 쉽게 구현할 수 있습니다.

Vuex: Vue.js 애플리케이션의 상태 관리를 위한 상태 관리 패턴 및 라이브러리인 Vuex를 사용할 수 있습니다.

커뮤니티와 에코시스템: Vue.js는 활발한 커뮤니티와 다양한 확장 라이브러리 및 플러그인을 제공하여 개발자들이 애플리케이션을 개발하고 개선하는 데 도움을 줍니다.