[Vue.js 프로젝트 투입 일주일 전] 1장 - Vue.js는 무엇인가?

1.0 Vue.js는 무엇인가?

  - 사용자 인터페이스 개발을 위한 Progressive Framework

    - Progressive: 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발

  - SPA (Single Page Application) 개발을 위한 프론트엔드 프레임워크

    - 페이지가 열리는 방식의 차이

    - 일반적인 웹사이트의 경우 페이지 이동으로 새로 열리는 페이지에 필요한 자원 항상 다시 서버로부터 로딩

    - SPA는 페이지 하나에서 동작하는 단일 페이지 어플리케이션 (페이지 이동시 변경 필요한 부분만 로딩)

    - SPA는 페이지 전환 속도가 매우 빠르고 웹 자원 효율적 관리 가능

    - SPA 단점: 사용자가 웹사이트 처음 접속 시 모든 웹 자원 다 로딩해서 화면 로딩 속도가 느려짐

    - 제공하는 웹 사이트의 성격이 어떠하냐에 따라 웹 사이트를 개발하는 방식도 달라져야 함!

1.1 Vue.js 장점

  - 직관적이고 배우기 쉬움

  - 재사용을 통한 애플리케이션 개발 기간 단축 및 양질의 코드 생산 가능

    - 뷰의 템플릿 => 컴포넌트를 통한 재사용성 극대화

  - Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있음

    - Angular의 데이터 바인딩(Two-Way): 데이터와 웹 화면의 요소(HTML DOM)가 서로 양방향으로 연결

      - 어느 한쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영되는 것

      - Angular의 속도(성능) 문제 존재, 웹의 작은 변화 -> HTML DOM 트리 구조 모두 갱신하는 비효율

    - React의 Virtual DOM; 실제 DOM 문서 추상화

      - 변화가 많은 화면(View)를 DOM에서 직접 처리하지 않고,

        가상의 DOM을 만들어 메모리에서 처리한 후 실제 DOM과 동기화시킴

1.2 Vue.js 특징

  - MVVM 패턴

    - Model-View-ViewModel

    - 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴

    - 웹: HTML DOM => View, 자바스크립트 => Model

    - Vue => ViewModel (데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성 제공)

  - 컴포넌트를 사용한 높은 재사용성

    - 화면(View)을 이루고 있는 작은 단위의 여러 개의 View 중에는 다른 화면에서도 사용되는 View가 있음

    - 이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것 => 컴포넌트

    - 컴포넌트는 한 화면을 이루는 작은 요소일 수도 있고, 한 화면 전체일 수도 있음

    - 하나의 컴포넌트는 HTML+CSS+JS로 이루어져 있고, 다른 컴포넌트에서 import해서 바로 사용 가능