Vue.js (1) 시작

1. 개요

Vue.js: 공통 기능을 제공하는 Library이며 부가 기능을 결합할 수 있는 Framework이기도 하다.

공식 사이트에서는 Framework라고 정의한다.

Vue.js는 앵귤러를 가볍게 쓰고 싶어서 만들어졌기 때문에 데이터 바인딩의 장점을 살릴 수 있다.

또한 리액트의 가상 돔 렌더링을 적용하여 화면 변화에 원활하게 대응할 수 있다.

 

2. MVVM 패턴

MVVM: Model - View - ViewModel 형태로 이루어진 구조
> 데이터 제어(백 엔드), 화면 제어 로직(프런트 엔드)을 분리하여 코드의 직관성과 유지보수성을 향상시킬 수 있다.
> JSP는 Java와 화면요소(Html, Css)가 공존하기 때문에 가독성이 떨어지고 명확한 분석이 어려워질 수 있다.

- Model: 데이터 저장 객체

- View: 화면(DOM)

- ViewModel(DataBinding + DOM Listener): View와 Model의 중간자

 

3. 컴포넌트

현재 프런트 엔드는 컴포넌트 기반 개발이 주류를 차지하고 있다.

레고 블럭을 조립하듯이 컴포넌트를 조합하여 화면을 구성한다.

 

4. 데이터 바인딩

양방향 바인딩: View와 Model의 데이터 값이 동기화되어 항상 동일한 값으로 세팅되는 것

단방향 바인딩: 상위 → 하위 컴포넌트로만 데이터가 전달되는 구조