Vue.js란?

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

1. Vue.js란 무엇인가?

UI단에서 데이터(모델)을 관리하고 이를 처리하기 위한 프론트엔드 프레임워크

(화면을 이쁘게 만드는 프레임워크는 아님!!)

 

1) FrontEnd Framework의 종류

- React

• 탄탄한 아키텍쳐
• ES6 필수
• 컨버팅 하는데 리소스를 많이 먹음.
• 페이스북

- Angular

• Typescript 사용
• 구글

- Vue.js

• Page수준의 라이브러리 참조(script 태그)가 가능. 가벼움.
• React와 Angular의 장점을 차용해서 만듦.
• 알리바바

 

 

2) Vue의 장점

• Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공
• 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름. [관련사이트]

 

3) Vue.js의 특징

- Component 기반의 SPA(single page application)를 구축할 수 있게 해주는 프레임워크

화면을 컴포넌트로 구조화한 컴포넌트 간 관계도

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음

 

- UI화면 개발 방법 중 하나인 MVVM 패턴의 ViewModel에 해당하는 화면단 라이브러리

• Model - View - ViewModel로 구조화하여 개발하는 방식
• 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편하기 때문이다.

 

※ MVVM 패턴이란?

• 마크업 언어나 GUI코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
• 즉, 프론트엔드의 화면 동작과 관련된 로직과 백엔드의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다.