Vue.js란?

bbolddagu·2023년 4월 18일
vue
0

Vue

목록 보기
1/1

Vue.js

:사용자 인터페이스 개발을 위한 Progressive Framework

  • Progressive Framework: 라이브러리 기능 + 프레임워크 기능 == "라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다"
  • 라이브러리 기능 : 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
  • 프레임워크 기능 : 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

Vue.js의 특징

1. MVVM (Model-View-ViewModel) 패턴

: MVC 패턴의 발전된 형태로, 데이터 바인딩을 이용하여 뷰와 모델 간의 상호작용을 관리

  • View : HTML/CSS 등의 프론트엔드 요소를 담당
  • Model : 데이터 담당
  • ViewModel : Vue.js에서 제공하는 관찰자(Observer) 패턴과 데이터 바인딩을 이용하여 뷰와 모델 간의 상호작용을 관리

➡ 데이터와 뷰의 분리, 코드의 재사용성, 유지보수성 등을 향상시켜주는 장점

2. 컴포넌트 기반 구조

  • 재사용성이 높고, 개발과 유지보수를 쉽게 만들어 준다.

3. Angular의 장점(데이터 바인딩 - 양방향 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있음.

(가) Angular.js의 장점

  • 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화

(나) React.js의 장점

  • 단방향 데이터 흐름 : 컴포넌트 단방향 통신 구조화
  • 가상 DOM 렌더링 방식 : 변경된 부분만 실제 DOM에 반영

📌 가상 DOM (Virtual DOM)

DOM (Document Object Model)
: 문서 객체 모델
: HTML, XML 등의 문서를 구조화하여 프로그래밍 언어에서 다루기 쉽게 만든 것

  • DOM은 웹 페이지의 동적인 기능 구현에 매우 중요한 역할을 합니다. 웹 페이지의 요소를 자바스크립트를 통해 동적으로 변경하거나, 사용자의 이벤트 처리 등을 구현할 수 있습니다.
    ➡ 개발자들은 보다 높은 수준의 상호작용을 제공하는 웹 페이지를 만들 수 있게 됩니다.
  • UI 업데이트가 발생할 때마다 Vue.js는 이전 상태의 Virtual DOM과 새로운 상태의 Virtual DOM을 비교하고, 변경된 부분만 실제 DOM에 반영합니다. 이를 통해 실제 DOM 조작을 최소화하고, UI 업데이트의 효율성을 높일 수 있습니다.

📖참고

profile
bbolddagu

0개의 댓글