[Do it! Vue.js 입문] Vue.js 소개

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 구조에서의 Vue.js 위치

위의 그림과 같이 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