01-1 Vue.js란 무엇인가?
- Vue.js란?
Vue.js란 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.
뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공되므로 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있는 점진적인 프레임워크(progressive framework)라고 불린다.
- Vue.js의 장점
1. 배우기가 쉽다.
2. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
3. 리액트의 장점(가상 돔 기반 렌더링)과 앵귤러의 장점(데이터 바인딩 특성)을 가지고 있다.
01-2 Vue.js의 특징
- UI 화면단 라이브러리
vue.js는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

위의 그림과 같이 MVVM 패턴이란 화면을 모델(model) - 뷰(view) - 뷰 모델(view model)로 구조화하여 개발하는 방식을 의미한다.
이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지보수가 편하기 때문이다.
<구조도 용어 정리>
- 뷰(view): 사용자에게 보여지는 화면
- 돔(DOM): HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
- 돔 리스너(DOM Listener): 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
- 모델(model): 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
- 데이터 바인딩(data binding): 뷰(view)에 표시되는 내용과 모델의 데이터를 동기화
- 뷰 모델(view model): 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
- MVVM 구조의 처리 흐름
구글 사이트에서 검색어를 입력하는 것으로 구조도의 처리 흐름을 알아보자!
1. 구글 사이트에 검색어를 입력한다.
- 여기서 뷰(view)는 사용자에게 비춰지는 구글 검색 화면 전체
- 돔(DOM)은 구글 로고, 검색창, 돋보기, 마이크 아이콘 등 화면에 나타나는 HTML 문서 상의 모든 요소

2. 검색 버튼을 클릭한다.
- 버튼을 클릭하면 돔 리스너에서 이를 감지한다.
- 데이터 바인딩이 검색 결과에 해당하는 데이터를 모델에서 가져와 화면에 나타내준다.

이렇게 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 한다.
즉, 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고 하는 것이다.
💡 MVVM 패턴이란?
: 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
(이전에는 프론트와 백엔드 로직이 한 파일에 섞이면서 가독성이 떨어졌었는데 분리했다는 뜻이다.)
컴포넌트 기반 프레임워크
뷰의 또 다른 특징은 컴포넌트 기반 프레임워크라는 것이다.
리액트, 앵귤러 모두 컴포넌트 기반의 개발 방식을 추구하고 있는데 이는 코드 재사용이 쉽고, 뷰의 경우 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있기 때문이다.
리액트와 앵귤러의 장점을 가진 프레임워크
뷰 = 리액트의 '단방향 데이터 흐름' + 앵귤러의 '양방향 데이터 바인딩'
- 단방향 데이터 흐름: 컴포넌트 간의 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달하게끔 구조화 되어있는 것
- 양방향 데이터 바인딩: 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
+) 리액트의 '가상 돔' -> 빠른 화면 렌더링을 위해 사용
해당 글은 'Do it! Vue.js 입문' 책을 보며 공부한 내용을 정리한 것입니다.
Do it! Vue.js 입문 - 예스24
Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j
m.yes24.com
'Frontend > Vue.js' 카테고리의 다른 글
| [Do it! Vue.js 입문] 화면을 개발하기 위한 필수 단위 - 뷰 컴포넌트 (0) | 2024.07.30 |
|---|---|
| [Do it! Vue.js 입문] 화면을 개발하기 위한 필수 단위 - 뷰 인스턴스 (1) | 2024.07.17 |