[Vue] Vue.js 란 ?

Vue.js에 관한 포스팅입니다.

Vue.js란 ?
컴포넌트 기반의 SPA를 구축할 수 있게 해주는 웹 프론트엔드 프레임워크.

• SPA : Single Page Application

SPA ?

• 단일 페이지 애플리케이션
• 하나의 페이지 안에서 필요한 영역만 로딩되는 형태
• 빠른 페이지 변환
• 적은 트래픽 양
  단점
• 최초 로딩 시, 리소스들을 한꺼번에 가져오기 때문에, 가져오는 리소스 양에 따라서 페이지 로딩이 느릴 수 있다.

Vue의 패턴
Vue는 UI 패턴 중에서 MVVT 패턴을 사용한다.

MVVT (Model-View-ViewModel)의 동작

View
사용자에게 보여지는 UI
사용자의 입력이나 변경이 일어나면 ViewModel에게 데이터 바인딩에 대한 요청을 보냄
(HTML과 CSS로 이뤄진 코드로, 내용을 삽입하기 위해 Vue.js에서 제공하는 디렉티브를 사용한다.)

View Model
Model의 변경 내용을 화면인 View에게 알려 반영하여 사용자가 데이터를 볼 수 있도록 한다.
View가 보여줘야하는 데이터와 코드를 가지고 있고, View가 ViewModel을 옵저빙하는 형태로 바인딩 되어있어 자동으로 업데이트 한다.
(Vue.js에서 제공하는 Vue 객체이다.)

Model
실제 데이터, 비즈니스 로직을 가지고 있다.
데이터를 관리하다가 값이 변경되면 ViewModel에게 변경사항을 알린다.
(서버에서 전달받은 데이터, 화면에서 생성된 데이터를 자바스크립트 객체 형태로 사용한다.)

장점

• View와 Model의 독립성 유지
• 코드 유지보수의 편리함
• 효율적인 유닛 테스트

단점

• 쉽고 단순한 프로젝트에 ❌
• 데이터 바인딩이 필수이기에 규모가 커지면 메모리 소모가 큼

참고 : https://velog.io/@chulhwan99/MVVM-%ED%8C%A8%ED%84%B4%EA%B3%BC-VUE