Vue.js란? 🧐

웹 페이지 화면을 개발하기 위한 점진적인 프레임워크

• 점진적인 프레임워크 : 라이브러리 기능 + 프레임워크 기능

---

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

Vue.js의 동작원리 🦾

• 가상 DOM으로 화면 요소를 변경 및 조작하고 최종 결과물을 DOM Tree에 반영

가상 DOM

정의

• DOM을 최소한으로 조작하여 작업을 처리하는 방식
• 가상 DOM이라는 DOM 트리를 모방한 가벼운 JS 객체를 통해 직접 DOM을 핸들링 하지 않고 자바스크립트가 HTML을 렌더링하는 방법

사용 이유

• 실제 DOM을 수정하는 과정이 자바스크립트에서 메모리 상의 객체를 수정하는 것보다 오래 걸림
• DOM을 반복적으로 직접 조작 → 브라우저 렌더링 횟수 증가 → PC자원 소모 증가

작동 방식

Vue.js의 특징 😎

1. UI 화면단 라이브러리

• MVVM 패턴의 View 모델에 해당하는 화면단 라이브러리
  

  • DOM Listners : DOM의 변경 내역을 즉각적으로 반응하여 특정 로직을 수행하는 장치
  • Data Binings : View에 표시되는 내용과 Model의 데이터를 동기화

• 화면의 요소를 제어하는 코드와 데이터 제어 로직을 분리 → 코드를 직관적으로 이해, 유지보수 편리함↑

2. 컴포넌트 기반 프레임워크

• 화면을 여러개의 작은 단위로 쪼개어 개발 → 재사용성↑, 구현 속도↑, 코드 가독성↑

3. React.js와 Angular.js의 장점을 가지고 있음

   Angular.js의 장점

   • 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 → 한쪽이 변경되면 다른 한쪽도 자동으로 변경

   ---

   React.js의 장점

   • 단방향 데이터 흐름 : 컴포넌트 단방향 통신 구조화 (상위 컴포넌트 → 하위 컴포넌트)
   • 가상 DOM 렌더링 방식 : 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신

Vue.js의 장단점 ⚔️

장점

1. 배우기 쉽다 (HTML, CSS, JS만 알고 있어도 사용이 가능함)
2. React.js의 장점과 Angular.js의 장점을 모두 가지고 있음

단점

1. 다른 프레임워크보다 생태계가 작다

출처 📝

• MVVM in Vue.js
• Do it! Vue.js 입문 - 장기효

위의 내용은 Vue.js를 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌