Vue.js란 무엇인가? (1)

1. Vue.js란?2. Vue.js의 장점3. Vue.js의 특징

1. Vue.js란?

• Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크

  • 점진적인 프레임워크

    • 다른 단일형 프레임워크와 달리, 점진적으로 채택할 수 있도록 설계

      • 코어 라이브러리 → 컴포넌트 기반 → 클라이언트 사이드 라우팅 → 상태관리

    • 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 제공

    • 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

       

 

2. Vue.js의 장점

• 배우기 쉬움

  • 다른 프레임워크는 타입스크립트, ES6, 웹팩 등을 함께 학습해야 함
  • Vue.js는 먼저 배우고 나중에 학습에도 상관없음

• React와 Angular에 비해 속도가 빠르고 가벼움

  • 성능 비교 글

    • https://blog.logrocket.com/angular-vs-react-vs-vue-a-performance-comparison/

• React와 Angular의 장점 채택

  • React의 Virtual DOM(가상돔)
  • Angular의 데이터 바인딩

 

3. Vue.js의 특징

• MVVM 패턴

  • 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

    • Vue.js외에도 React, Angular 등도 MVVM 패턴 채택

  • 뷰(View) - 뷰 모델(ViewModel) - 모델(Model)로 구조화 하여 개발하는 방식

    • 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리
    • 코드를 직관적으로 이해 가능
    • 유지보수 용이

 

• Vue.js에서 MVVM 패턴

  • 뷰(View) → 돔(DOM)

  • 뷰 모델(ViewModel) → Vue.js

  • 모델(Model) → 자바스크립트 객체

  • 작동 예시

    • Vue.js에서 뷰 단의 DOM 이벤트 감지
    • 이벤트가 감지되면 서버로 부터 데이터 요청
    • 결과로 받은 Model 데이터를 Vue.js에서 데이터 바인딩을 통해 뷰 화면 변경

   

• 컴포넌트 기반 프레임워크

  • 뷰의 컴포넌트를 조합하여 화면 구성
  • 코드 재사용 용이
  • HTML 코드에서 화면의 구조를 직관적으로 파악

   

 

[참고]

1. Do it! Vue.js 입문 - 장기효
2. https://kr.vuejs.org/v2/guide/index.html