뷰란?
Evan You가 만들었으며, 2014년 릴리즈 이후 꾸준히 발전하고 있는 자바스크립트 프레임 워크이다. 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 되었다.
Spa
SPA란 Single Page Application의 약자
단일 페이지 어플리케이션은 현재 웹 개발의 트랜드이다.
전통적인 페이지 vs 단일 페이지 어플리케이션 비교
전통적인 페이지에서는 html태그를 불러와야 했지만, 단일 페이지 어플리케이션은 하나의 페이지위에 필요한 컴포넌트를 변경하고 그 컴포넌트만 랜더링 하는 방식 랜더링이란 서버로부터 html파일을 받아 브라우저에 뿌려주는 과정
참조
Web-app
Web-app이란? Web-application의 약자로 브라우저 내에서 실행이 가능한 프로그램이다.!
장점
- pc에 소프트웨어를 배포하여 설치하지 않아도 웹 어플리케이션은 유지 관리가 가능하다.
- 웹 메일, 온라인 마켓, 인터넷 게시판, 블로그 게임등 다양한 기능 구현이 가능
- 웹 표준언어로 제작하여 호환성, 비용면에서 좋다.
구성 요소
출처:클립소프트
1) 웹 브라우저 : 사용자가 요청한 웹 서버의 결과를 보여주기 위한 애플리케이션 (크롬)
2) 웹 서버: 웹 브라우저의 요청에 대한 결과 응답, 정적인 페이지(html, jpeg, css) 처리 (아파치, nginx)
3) 웹 어플리케이션 서버 (was) : 웹 서버만으로 할 수 없는 데이터베이스 조회, 다양한 로직 처리와 같은 동적인 페이지 처리 (Tomcat, Jeus)
4) 데이터 베이스(DB) : 데이터를 저장하는 장소
참조
뷰의 특징
- MVVM모델을 사용한다.
- Virtual DOM을 사용한다.
- Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮다.
- Template와 Component를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고, View Layer를 정리하여 사용한다.
MVVM 패턴
MVVM패턴은 Model + View + View Model을 합친 용어
- Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분
- View : 사용자에게 보여지는 UI
- View Mode : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터를 처리하는 부분입니다.
동작
MVVM의 동작 순서
1. View에 들어온 event를 View Model에게 알려주면 View Model은 Model을 업데이트 시킨다.
2. Model이 변화하면 이는 View Model에 알려지고, View Model과 바인딩 되어있는 View가 업데이트 된다.
Mvvm 특징
Model 과 view과 분리 되어 있기 때문에, 독립적으로 개발이 가능하다!
Mvvm 참조
가상돔(Virtual DOM)
개념
virtual dom은 실제 dom을 너무 많이 업데이트 하는 비효율적인 연산을 줄이고자 만들어진 가상의 돔, virtual dom은 메모리에 저장되어 사용된다.
Virtual DOM의 장점
실제 DOM을 조작하는 것은 느리지만, virtual DOM을 조작하는 건 빠르다 .
virtual DOM은 노드의 변경 사항만을 DOM에서만 반영하지, 화면을 그리지 않기 때문이다.
virtual DOM을 사용하면 데이터 변경이나 DOM구조 변경에 대한 브루어저의 비효율적인 작업이 줄어든다.
참조
컴포넌트(Component)
컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립적 모듈을 의미한다. 사진에서 처럼
레고 블록 처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 만들 수 있다.
참조
뷰를 사용하는 이유
web-app을 만들기 위해서 뷰를 사용한다.
- 리액트나 앵귤러와 비교해서 굉장히 쉽다.
- 코드짤 때 한가지 방법이 잘 정리 되어있음(방법이 하나)
- 코드의 통일성을 잘 유지 할 수 잇다.
- 다른 개발자들이 유지보수 하기 좋다
- HTML 렌더링 빠름
- 업데이트 잘됨
