[Vue.js] Vue.js란?

🧶 Vue.js란?

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리

 

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음
• Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공
• 하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름.
• 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

 

📌 MVVM 패턴

Backend 로직과 Client의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인한다.

간단하게 생각해서 화면 앞단의 화면 동작 관련 로직과 뒷단의 DB 데이터 처리 및 서버 로직을 분리하고,

뒷단에서 넘어온 데이터를 Model에 담아 View로 넘어주는 중간 지점이라고 보면 된다.

 

📌 데이터 바인딩 Data binding

View와 Moedel을 하나로 묶어 유기적으로 동작하게 하는 것

기존에는 DOM API를 사용하여 DOM을 직접 조작하는 방식이라서 View가 변경되면 로직이 변경될 가능성이 높다.

데이터 바인딩을 사용하면 템플릿 문법을 사용하여 템플릿에서 직접 컴포넌트 클래스의 프로퍼티를 참조해서 로직을 변경할 필요가 없다.

 

📌 양방향 데이터 바인딩

데이터의 변경을 프레임 워크에서 감지

→ 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지 후, 내용 변경

코드량을 줄여주어 유지보수, 코드관리가 용이하다.

 

📌 컴포넌트 형태

화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것

→ 우리가 프레임워크를 사용하는 이유!

 

 

 

참조

Vue.js 시작하기 - Age of Vue.js

Vue.js 입문서 - 프론트엔드 개발자를 위한

 

양방향 데이터 바인딩 - https://velog.io/@sunaaank/data-binding