📚Vue.js란 무엇인가 – 점진적 프레임워크로 시작하는 프론트엔드 개발 | MMVM패턴

들어가며

Vue.js는 가볍고 배우기 쉬우면서도, 필요에 따라 강력한 기능 확장이 가능한 프로그레시브(점진적) 프레임워크입니다.

HTML 기반의 템플릿 문법, 반응형 데이터 바인딩, 컴포넌트 기반 구조를 특징으로 하며, React와 유사한 기능을 제공하지만, 더 단순하고 직관적인 API를 지향하기 때문에 React나 Angular와 같은 대형 프레임워크와는 달리, Vue는 “작게 시작해서 크게 성장할 수 있는” 구조를 가지고 있어 입문자부터 실무 개발자까지 폭넓게 사랑받는 기술입니다.

Vue는 React와 유사한 기능을 제공하지만, 더 단순하고 직관적인 API를 지향

이 글에서는 Vue.js가 무엇인지, 어떤 철학을 가지고 설계되었는지, 그리고 왜 많은 프론트엔드 개발자들이 Vue를 선택하는지에 대해 소개하면서 Vue 카테고리의 첫 시작을 열어보겠습니다.

 

---

Vue.js란?

Vue.js는 Evan You가 개발한 MVVM 패턴 기반의 프론트엔드 프레임워크입니다.
디자인과 데이터 바인딩을 쉽게 연결하고, DOM 조작 없이 선언적으로 UI를 설계할 수 있도록 돕는 것이 핵심 목적입니다.

주요 특징

• 컴포넌트 기반 구조: UI를 독립된 블록 단위로 나누어 재사용성 극대화
• 양방향 데이터 바인딩: v-model을 통한 입력값 연동 처리
• 반응형(Reactive) 시스템: 데이터가 변하면 자동으로 DOM 갱신
• 템플릿 문법: HTML 기반 문법으로 직관적인 구조 설계
• 가벼운 번들 크기: 기본 기능만 포함되어 매우 가볍고 빠름
• 점진적 적용 가능: 필요한 기능만 선택해 사용 가능

MVVM = Model - View - ViewModel 

 

구성 요소	역할	Vue.js 기준 예시
Model	순수 데이터, 비즈니스 로직	API 응답, Vuex 상태, DB에서 온 DTO
View	실제 화면, 사용자와의 인터페이스	.vue 파일의 template 영역
ViewModel	View와 Model의 중간 계층 (데이터 가공, 상태 관리)	Vue의 script setup, computed, methods, watch, ref 등

[Model]
 - 서버에서 가져온 데이터
 - 또는 Vuex/Pinia 상태

    ↓ (바인딩)

[ViewModel]
 - script 영역에서 computed로 가공
 - methods로 이벤트 처리
 - ref, reactive로 상태 저장

    ↓ (양방향 바인딩 v-model)

[View]
 - 사용자에게 보여지는 HTML (template)
 - v-if, v-for, v-bind, v-on 등으로 표현

 

---

Vue의 설계 철학

Vue는 “점진적 프레임워크(Progressive Framework)”라는 키워드를 중심으로 설계되었습니다.
즉, 간단한 스크립트 태그 하나로 Vue를 도입할 수도 있고, Vue CLI로 대규모 SPA를 구축할 수도 있습니다.

• 필요한 만큼만 사용: 필수 기능만 도입해서 가볍게 시작
• 확장 가능한 생태계: Vue Router, Pinia, Vuex, Vue Test Utils 등과 연동
• 타입스크립트와의 호환성도 점차 강화됨

---

Vue의 주요 구성 요소

1. 템플릿 (Template)

• HTML과 유사한 형식으로 UI 작성
• {{ message }} 같은 Mustache 문법 사용

2. 컴포넌트 (Component)

• Single File Component (.vue) 형식으로 구조화
• props, emits, setup() 등을 활용한 모듈화

3. 반응형 상태 (Reactivity)

• ref(), reactive()를 통한 데이터 바인딩
• Composition API를 통해 코드 구조 유연화

4. 라우팅과 상태관리

• vue-router: 페이지 전환 및 SPA 구현
• pinia(또는 기존 Vuex): 글로벌 상태 관리

---

Vue의 장점과 단점

장점	단점
배우기 쉬운 문법	복잡한 상태 관리 구조는 학습 필요
문서화가 매우 잘 되어 있음	대규모 프로젝트에선 설계 기준 필요
템플릿 기반의 직관적인 구성	React에 비해 생태계 규모는 작음
점진적 도입 가능	자유도가 높아 코드 스타일 차이 발생 가능

---

실무에서 Vue를 사용하는 이유

• 사내 ERP/관리 시스템 등에서 빠른 개발 가능
• UI 중심의 데이터 시각화/제어 시스템에 강함
• 컴포넌트화된 UI 설계로 코드 재사용성 확보
• Nuxt.js를 활용한 SSR/정적 사이트 생성 가능

👉 nuxt.js 란 ? | https://jobreview.tistory.com/143

---

 

📚 Vue.js 학습 목차

다음은 "framework_library/vue" 카테고리에서 다룰 글 목록입니다. 초급 → 중급 → 고급 순서로 정리되어 있습니다.

1️⃣ Vue 기본 개념 이해

• CDN으로 간단히 시작하기
• Vue 프로젝트 생성 (Vite/CLI)
• Vue 템플릿 문법 완전정복 (v-bind, v-if, v-for, v-on 등)
• 반응형 데이터와 reactive, ref 차이점

2️⃣ 컴포넌트 기반 개발

• 컴포넌트 선언과 등록 방식 (전역, 지역)
• Props와 Emit을 통한 부모-자식 통신
• 컴포넌트 간 상태 공유 방법 (Provide/Inject)
• 슬롯(Slot)의 개념과 활용법
• 템플릿 조건부 렌더링과 반복 처리 패턴

3️⃣ Vue 작동 원리와 구조 이해

• Vue의 전체 작동 흐름 (앱 생성 → 마운트 → 렌더링 → 반응형 업데이트)
• 컴포넌트 라이프사이클 전체 정리 (setup, created, mounted 등)
• 템플릿 렌더링과 DOM 업데이트의 흐름
• 이벤트 바인딩과 DOM 반응성 처리 구조
• 어디에 어떤 설정을 넣어야 하는가 (App.vue, main.js, router 등)

4️⃣ Vue Router

• Vue Router 기초와 설정법
• 동적 라우트 매칭과 파라미터 처리
• 네비게이션 가드와 인증 처리
• 라우트 중첩과 Lazy Loading 적용

5️⃣ Vuex / Pinia 상태 관리

• 상태 관리가 필요한 이유
• Vuex의 구조 (State, Mutation, Action, Getter)
• Pinia로 마이그레이션 하기
• 모듈 분리 및 Store 컴포지션 패턴

6️⃣ 실무 구성 요소와 유틸

• Axios 인터셉터 설정과 API 에러 처리
• 전역 EventBus 또는 mitt 활용법
• 커스텀 디렉티브 만들기 (v-focus, v-mask 등)
• 글로벌 컴포넌트 등록 전략

7️⃣ 고급 주제 및 최적화

• Suspense와 defineAsyncComponent 활용
• keep-alive와 캐싱 전략
• Teleport를 활용한 모달 시스템 구성
• Composition API vs Options API 비교
• 컴포넌트 메모리 누수 방지 패턴

8️⃣ Vue + TypeScript

• 타입스크립트 기반 Vue 프로젝트 구성
• Props/Emit/Setup에 타입 적용하기
• Vue 컴포지션 API의 제네릭 활용법

9️⃣ 테스트 및 배포

• Vue 테스트 전략 (Unit Test, E2E Test)
• Cypress를 활용한 UI 테스트
• Vite + Nginx로 배포하기
• CI/CD와 자동 배포 구성 (GitHub Actions 연계)

초보자와 실무자 모두를 위한 Vue 실전 노트를 이 블로그에 담아보겠습니다.
Vue의 세계에 함께 발을 디뎌보시죠!

📌 다음 글 미리보기
👉 Vue Composition API 완전 정리 초안 작성  

📚 Vue 시리즈 전체 보기
👉 https://jobreview.tistory.com/category/framework_library/vue