Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이자 화면단 라이브러리라 할 수 있다.

     

    현재 프론트엔드 프레임워크 시장은 리액트(React), 앵귤러(Angular)가 많은 점유율을 가지고 있습니다

    그만큼 오래된 프레임워크이기 때문입니다. 뷰는 이들 중 가장 가벼운 프레임워크라고 할 수 있습니다.

     

    Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리입니다.

     

     

    위 그림에서 보듯이 MVVM패턴이란 화면을 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식을 의미합니다.

    이런 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로

    이해할 수 있고 추후에 유지보수가 편해지기 때문입니다.

     

    MVVM 구조도의 용어 설명

     

    - 뷰(View) = 사용자에게 보이는 화면

    - 돔(DOM) = HTML문서에 들어가는 요소들의 정보를 담고 있는 데이터 트리

    - 돔 리스너(DOM Listener) = 돔의 변경 내역에 대해 즉각적으로 빈응하여 특정로직을 수행하는 장치

    - 모델(Model) = 데이터를 담는 용기. 보통 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

    - 데이터 바인딩(Data Binding) = 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

    - 뷰 모델(ViewModel) = 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

     

    'JavaScript > Vue.js' 카테고리의 다른 글

    뷰 인스턴스  (0) 2021.01.05
    Vue 개발환경 설정  (0) 2021.01.05
    Vue의 특징  (0) 2021.01.05
    $refs  (0) 2020.12.06
    Vue 디렉토리 구조  (0) 2020.11.16

    댓글