Vue.js란 무엇인가?

Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임 워크이다. 여기서 SPA는 단일 페이지 애플리케이션을 뜻한다.

일반적인 웹 사이트와 SPA의 차이 - 페이지가 열리는 방식

• 일반적인 웹 사이트
  - 일반적인 웹 사이트의 경우, 페이지를 이동할 때마다 매번 페이지 전체를 다시 로딩하게 된다.
  페이지를 이동할때 해당 페이지에서 이용하는 다양한 웹 자원(자바스크립트 파일, CSS 파일, 이미지 파일 등) 전체를 서버에서 가져와, 로딩한다는 뜻이다.
  여기에는 이전 페이지에서 사용했던(중복된) 자바스크립트 파일, CSS, 이미지 파일도 포함될 수 있다.
  이전페이지에서 사용했던(중복된) 웹자원 + 해당페이지에서 이용하는 웹자원 전체를 페이지 이동할 때마다 다시 로딩함
  

• SPA
  - Single Page Application 단일 페이지 애플리케이션이다. 즉, 말 그대로 페이지 하나에서 동작하는 에플리케이션 이다.
  SPA는 제일 처음 웹 사이트에 접속했을때, 웹 사이트 전체에 필요한 모든 웹 자원을 서버로부터 가져와서 로딩한다.

  • SPA의 장점
    페이지를 이동하면 웹 페이지 전체가 서버로부터 로딩되어 바뀌는 것이 아니라, 처음 접속했을 때 로딩된 페이지 중에서 변경이 필요한 부분만 바뀌게 된다.
    -> 페이지 전환속도가 매우 빠르고, 이미 로딩된 자원(중복된)을 다시 서버로부터 받아올 필요가 없기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있다 !
    

  • SPA의 단점
    사용자가 웹 사이트에 처음 접속하면 사이트 이용에 당장은 필요하지 않은 모든 웹 자원을 가져와야 하는 단점이 있다.
    -> 만약에 첫 페이지만 보고 해당 웹 사이트를 더이상 사용하지 않고 빠져나가는 사용자라면, 내가 방문하지 않을 웹 페이지에서 사용하는 웹 자원까지 모두 로딩되어, 속도저하를 느낄 수 있다.

---

데이터를 연결하는 Vue.js - MVVM패턴

Vue.js는 MVVM 패턴을 사용하여, 데이터와 뷰를 연결해주는 역할을 한다.
여기서, MVVM 패턴이란, Model(Vue 안에 준비된 데이터)과 View(Html 에서 표시되는 요소)그리고 View Model(View 와 Model을 어떻게 연결할까) 로 나누어 생각하는 방식이다.

MVVM의 구조를 생각하는 방식
1) Vue 안에있는 데이터(Model)는 무엇인가?
2) Html 에서 표시되는 요소(View)는 무엇인가?
3) 이 둘(Model, View)이 어떤식으로 연결되는가?