Vue.js란?

Vue 뷰는 웹 페이지 화면을 개발하는 목적으로 만들어진 프론트엔드 프레임워크이다. 프레임워크는 필수 코드, 알고리즘, 데이터베이스 등 웹 페이지를 개발하는 데에 있어서 어느 정도 구성이 되어있는 뼈대를 제공하도록 만들어진 것이다. (참고: https://dahanweb.tistory.com/35)

 

MVVM 패턴

MVVM 패턴

Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM 패턴은 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 말한다. 이 방식으로 개발하면 화면 코드(프론트엔드)과 데이터 코드(백엔드)를 분리하여 코드를 직관적으로 이해할 수 있고, 서비스되고 유지보수가 더 편해지기 때문이다.

 

MVVM 패턴을 설명하기 전에 어떻게 처리되는지 과정을 살펴보도록 하자. 사용자에게 비춰지는 구글화면을 뷰라고 한다. 구글 사이트 내에 검색창, 아이콘 등을 돔이라고 하며, 검색 버튼을 클릭했을 때 반응하는 것을 돔 리스너라고 한다. 그리고 버튼을 클릭했을 때 검색 결과가 출력되는 과정을 데이터 바인딩이 관여하게 되는데 이때 모델에서 검색어와 관련된 데이터베이스 등 데이터를 불러오게 되고 이렇게 가져온 것을 뷰모델을 걸쳐 사용자에게 보여지는 뷰에 도달하게 된다.

 

뷰(View)는 사용자에게 보여지는 화면을 뜻하며, 모델(Model)은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장하는 그릇이라고 생각하면 된다. 뷰모델(View Model)은 뷰와 모델의 중간 부분으로 돔 리스너(Dom Listener)와 데이터 바인딩(Data Binding)을 제공하는 영역이다. 돔 리스너는 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치아며, 데이터 바인딩은 뷰에 표시되는 내용과 모델의 데이터를 동기화하는 과정이다. 여기서 돔(Dom)은 HTML 문서에 들어가는 요소들(Tag, Class, Attribute 등)의 정보를 담고 있는 것들이다.

 

컴포넌트 기반 프레임워크 

컴포넌트는 마치 레고 블록처럼 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 화면을 구성할 수 있다. 위부터 header 영역, main 영역, footer 영역으로 나눠지는 것이라고 할 수 있다.

이 글을 공유하기

댓글

Designed by JB FACTORY