Front-End/Vue.js

Vue

태나미 2022. 3. 18. 18:51

Vue.js란?

  • 웹 페이지 화면(UI)을 개발하기 위한 프런트엔드 프레임워크입니다.
  • MVVM 패턴을 따르며, 애플리케이션 로직과 UI를 분리하기 위해 설계되었습니다.

MVVM 패턴이란?

  • Vue.js는 MVVM 패턴의 ViewModel 계층에 중점을 둡니다. 양방향 데이터 바인딩을 통해 View와 Model을 연결합니다.
  • MVVM 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리
  • View가 특정 모델에 종속되지 않도록 모델(로직)을 분리한 패턴입니다.
  • 간단히 View와 Movel, ViewModel을 분리하여 독립적인 개발을 할 수 있도록 하여, 테스트, 유지 보수, 재사용성을 높인 패턴입니다.

구성요소

  • 뷰(View) : 보여지는 부분, UI를 다루는 역할을 하며, 비즈니스 로직이 아닌 UI로직(애니메이션)을 포함합니다.
    • 유저 인터페이스(UI)
    • HTML/CSS/XML/YAML 등으로 작성
  • 모델(Model) : 사용되는 데이터를 다루는 역할을 하며, 비즈니스로직이 포함하고 있습니다. Vue인스턴스에 변경을 알려 vue의 getter/setters로 객체의 프로퍼티를 변환합니다.
  • 뷰 모델(View Model) : View만을 위한 Model로 View가 사용하는 메서드, 필드를 갖고 View에 상태 변화 등을 알리며, View가 사용할 수 있도록 데이터를 바인딩합니다.
    • DOM Listners: Dom의 변경 내용을 즉각적으로 반응해 특정 로직을 수행하는 장치입니다.
    • Data Binings: View에 표시되는 내용과 Model의 데이터를 동기화합니다.

Vue.js 특징

  • 화면을 여러개의 작은 단위로 쪼개어 개발할 수 있는 컴포넌트 기반 프레임워크입니다.
    • 컴포넌트 단위로 작성하여 재사용성 및 코드 가독성이 좋습니다.
  • 화면의 요소를 제어하는 코드와 데이터 제어 로직을 분리하여 유지보수성이 좋습니다.
  • 러닝 커브가 비교적 낮습니다.
  • React.js와 Angular.js의 장점을 가지고 있습니다. 
    • Angular.js의 장점
      • 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 → 한쪽이 변경되면 다른 한쪽도 자동으로 변경
    • React.js의 장점
      • 단방향 데이터 흐름 : 상위 컴포넌트에서 하위 컴포넌트로 단방향 데이터 통신
      • 가상 DOM 렌더링 방식 : UI값이 변경 시, 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신

 

출처: