뷰(Vue)의 특징

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

---

Vue.js 란?

웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크이자 화면단 라이브러리입니다.

유사한 프레임워크로 리액트(React)와 앵귤러(Angular)가 있습니다.

 

Vue.js(이하 '뷰')의 공식 사이트는 아래 링크를 참조해주세요.

• 공식 사이트: https://vuejs.org/

 

Vue.js의 특징

첫째, MVVM 패턴의 뷰 모델(View Model)에 해당하는 화면단 라이브러리입니다.

MVVM 패턴은 화면 요소 제어 로직과 데이터 제어 로직이 분리되어 있어 유지보수가 편리하다는 특징이 있습니다.

• MVVM 패턴: UI 화면 개발 방법 중 하나로 화면을 모델(Model)-뷰(View)-뷰모델(ViewModel)로 구조화하여 개발하는 방식
  • M(Model): 데이터가 저장되는 곳
  • V(View): 사용자에게 보이는 화면
  • VM(View-Model): 뷰와 보델의 중간 영역으로 돔 리스너(DOM Listener)와 데이터 바인딩(Data Binding)을 제공하는 영역
    • 돔 리스너(DOM Listener): HTML 문서에 들어가는 요소(태그, 클래스, 속성, 등)의 정보를 지니고 있는 데이터 트리
    • 데이터 바인딩(Data Binding): 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

 

 

둘째, 컴포넌트(Component) 기반의 프레임워크입니다.

컴포넌트는 블럭 구조이기 때문에 HTML 코드에 비해 구조를 직관적으로 파악할 수 있습니다.

 

 

셋째, 리액트(React)와 앵귤러(Angular)의 장점을 가진 프레임워크입니다.

• 앵귤러(Angular)의 양방향 데이터 바인딩(Two-way Data Binding)라는 장점
  • 양방향 데이터 바인딩: 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽의 변경이 다른 한쪽으로의 자동으로 변경되는 것
• 리액트(React)의 단방향 데이터 흐름(One-way Data Flow)라는 장점
  • 단방향 데이터 흐름: 컴포넌트 간의 데이터 전달 시 항상 상위에서 하위 컴포넌트로 한 방향으로만 전달하는 것

 

넷째, SPA(Single Page Application) 구성이 가능하다.

SPA는 단일 페이지로 구성된 웹 어플리케이션을 의미합니다.

• SPA 장점
  • 전체 렌더링하지 않고 일부만 갱신하여 전체적인 트래픽 감소 및 렌더링 좋은 효율을 지님
  • 빠른 페이지 변환 및 반응성, 화면 전환 애니메이션이 적용이 가능하여 사용 친화적인 화면 구성이 가능
  • 백엔드와 프론트 엔드가 명확하게 구분 가능
• SPA 단점
  • 초기 구동, 로딩 속도가 느림
  • 검색 엔진 최적화(SEO)가 어려움

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue