[뷰 Vue.js] Vue.js란? (개념 및 MVVM 패턴의 구성요소, 처리 흐름)

Vue.js는 Component 기반 Framewrok이다.

- 컴포넌트(Component) 기반의 SPA(Single Page Application)을 구축할 수 있게 해주는 프레임워크

- Component: 웹을 구성하는 로고, 버튼 등 웹 페이지 내의 다양한 UI 요소를 재사용하도록 구조화한 것
- SPA: 단일 페이지 어플리케이션으로 하나의 페이지 안에서 필요한 영역만 로딩되는 형태(빠른 페이지 변환, 적은 트래픽 효과, 단, 최초 로딩시 모든 요소들을 가져와야 하기 때문에 속도가 느려질 수 있음)

MVVM 패턴을 이용한다.

프론트엔드의 화면 동작과 관련된 로직과 백엔드 데이터ㅔ이스 처리 로직을 분리하여 더 깔끔하게 코드를 구성하는 것

MVVM 구성요소

View	사용자에게 보이는 화면 출력
Model	데이터를 담는 용기로, 보통 서버에서 가져온 데이터를 자바 스크립트 객체 형태로 저장
ViewModel	뷰와 모델의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공하는 영역
DOM	HTML 문서에 들어가는 요소의 정보(태그, 클래스 등)를 담고 있는 데이터 트리
DOM Listener	돔의 변경 내역에 대해 반응하여 특정 로직을 수행
Data Binding	뷰에 표시되는 내용과 모델의 데이터 동기화 - 뷰의 경우, 양방향/단방향 데이터 바인딩이 모두 가능함

MVVM 구조의 처리 흐름 

1. 구글 화면에서 검색을 할 때 첫 화면 기준 요소들

- View: 전체 화면
- DOM: 로고, 검색창, 버튼 등의 요소들

2. 검색 클릭시 돔 리스너에서 버튼 클릭 감지
3. 모델에서 버튼이 동작하면 검색 결과를 보여주는 로직 처리
4. 데이터 바인딩에서 검색 결과에 해당하는 데이터를 모델에서 가져와 화면에 나타냄