Vue.js

• UI를 만드는데 사용하는 자바스크립트 기반의 오픈소스 프레임워크

• MVVM 아키텍처 패턴을 따르는 프레임워크

  MVVM(Model-View-VeiwModel)

  • 데이터를 보여주는 view와 데이터를 처리하는 Model 사이에서 데이터를 중개하는 ViewModel을 두어
  • UI와 데이터 처리 로직의 상호의 의존성을 줄이는 아키텍처 패턴

• view와 model의 의존성이 낮아 view, view model, model을 독립적으로 모듈화하고 재사용성이 높은 어플리케이션 설계가 가능하다

  
  

역사

• Google Creative Labs에서 일하던 Evan You가 개발
• AngularJS보다 더 가볍고 사용하기 쉬운 프레임워크를 생각하며 개발한 오픈소스 프로젝트

• React, Angular 와 함께 3대 프론트엔드 프레임워크

  AngularJs

  • 양방향 데이터 바인딩 기능을 사용하는 SPA
  • 사용하기 어렵고, 작성해야하는 프로그램의 크기가 크다

  React

  • ECMAScript6 위주로 사용
  • 개발중인 사이트에 React로 개발된 프로그램을 추가시 별도의 프로젝트를 생성하고 빌드해야함
  • 기존의 웹 어플리케이션과 통합이 상대적으로 어려움

  버전	출시 연도	주요 변화
  Vue 1	2014	최초 릴리즈, 양방향 데이터 바인딩과 컴포넌트 기반 구조 도입
  Vue 2	2016	Virtual DOM 도입, 성능 개선, Vuex, vue-router 확장성 강화
  Vue 3	2020	Composition API 도입, TypeScript 지원 강화, 성능 개선 및 트리쉐이킹 가능

• Vue 3에서는 setup() 함수와 ref, reactive 등을 사용하는 Composition API가 도입되어, 코드 구조가 더 유연해짐

특징

1. 가상 DOM

• 가상 DOM을 사용하여 불필요한 렌더링을 최소화

2. 양방향 데이터 바인딩

• Vue.js는 view에서 받은 요청을 model에 전달
• model에서 받은 응답을 view에 전달하는 viewmodel의 역할을 함
• view 와 viewmodel 사이의 연결점이 되는 양방향 데이터 바인딩

• Vue.js는 간결한 문법과 컴포넌트르 사용하여 빠르게 반응형 UI를 만들 수 있다

  특징	설명
  MVVM 패턴	View와 Model을 ViewModel로 연결해 반응형 UI 구성
  반응형 데이터 바인딩	data, computed, watch 등을 이용해 자동 UI 갱신
  컴포넌트 기반	재사용 가능한 컴포넌트 구조로 유지보수 용이
  디렉티브 사용	v-if, v-for, v-bind, v-model 등의 선언형 템플릿 문법 제공
  가상 DOM 사용	효율적인 렌더링을 위해 Virtual DOM 도입
  라우팅과 상태관리 지원	vue-router, Pinia(또는 Vuex)를 통해 SPA 구현 가능
  경량 & 유연성	기본 기능만 포함된 경량 구조로 필요에 따라 확장 가능

Vue.js의 장점

• CDN 라이브러리로 간단하게 설치 가능
• HTML, CSS, JS만 알면 사용 할 수 있는 낮은 학습 곡선

Vue.js의 단점

• 대규모 프로젝트에서는 구조 설계의 자율성이 오히려 혼란을 줄 수 있음
• 생태계가 React보다 상대적으로 작고, 고급 기능/툴의 자료가 부족할 수 있음
• 기업 환경에서는 React에 비해 채택률이 낮은 편 (하지만 점점 늘고 있음)

ReactJs와 VueJs 비교

• React와 비교했을때 템플릿, 확장성이 좋다
• 두 언어 모드 컴포넌트 기반의 프레임워크이다

1. 템플릿

• Vue 인스턴스는 컴포넌트에 있는 데이터를 표시하는 방법으로 기존 HTML 템플릿을 그대로 활용
• React의 경우 HTML을 변형한 템플릿 문법인 JSX를 사용 (별도로 배워야함)

2. 확장성

• JQuery 처럼 script 태그로 CDN을 추가할 수 있다

• 점점 커지는 프로그램 규모에 맞게 필요한 라이브러리를 선택해 사용 할 수 있다

  CDN

  • 웹 어플리케이션에 자바스크립트 프레임워크나 라이브러리를 바로 사용할 수 있는 호스팅 서비스
  • CDN을 배포하여 어디에서든 균일한 속도로 웹 어플리케이션이 동작 할 후 있다

  항목	Vue.js	React
  컴포넌트 정의	<template>, <script>, <style>로 분리	JSX(JavaScript + XML) 사용
  데이터 바인딩	v-bind, v-model, v-if, v-for 등	props, state, 조건부 렌더링 등 사용
  상태관리	data(), props, computed, watch 등	useState, useEffect, props 등 사용
  파일 구조	싱글 파일 컴포넌트(SFC, .vue 파일)	보통 JS/TS 파일 안에 JSX를 사용

어떤 개발자에게 Vue.js가 적합할까?

• 웹 개발을 처음 접하는 초보자 (HTML/CSS 경험 있음)
• 빠르게 UI를 만들고 싶은 프론트엔드 입문자
• 복잡한 빌드 없이 간단한 SPA를 만들고 싶은 개발자
• 컴포넌트 재사용성과 유지보수가 중요한 팀 개발자