Vue.js

1) Vue의 기본적인 특징 SPA

SPA(Single Page Application)은 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스들을 한번에 다운

--> 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 전달받아서 페이지를 갱신시킴

 

-단점

초기에 다 다운로드 받기에 초기 구동속도가 당연히 느리다

 

SEO(Search Engie Optimization) -> 검색엔진 최적화 (역할: 구글이나 네이버와 같이 검색엔진으로 웹 사이트를 검색했을 때 결과를 페이지 상단에 노출시켜줘서 사용자의 유입을 이끌어 내도록 최적화 하는법)

ex) Junior Developer J Portfolio => 검색시 검색엔진위쪽에 나타나도록 하는것

 

 

2)MVVM 디자인 패턴 프레임워크 (Model , View , ViewModel)

1.디자인 패턴

프로그램을 개발하는 중에 발생한 문제점을 상황에 따라 간편하게 적용하고 특정한 규약을 통해 쉽게 쓸 수있는 형태로 만든 것 -> ex) 라이브러리,프레임워크

 

2.MVVM 패턴

Model,View,ViewModel

1.Model

Model => 애플리케이션의 정보,데이터를 나타낸다. DB,처음의 정의하는 상수,초기화값, 변수 등을 뜻함

! 규칙

> 사용자가 편집하길 원하는 모든 데이터를 가지고 있다.

 

> 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야한다.

 

> 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야만 한다.

=> 또한, 모델은 재사용이 가능해야함 다른 인터페이스에서도 변하지 않아야 한다.

 

 

2.View

 

View => 인풋(input) 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타낸다

! 규칙

> 모델이 가지고 있는 정보를 따로 안된다

=> 화면에 띄울 것들을 화면에 표시해주기만 해야되고 그때 필요한 정보들은 저장해서는 안된다.

 

> 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 한다.

=> 모델은 다른애들이 뭘 하는지 몰라야한다. ( 뷰는 데이터를 받으면 화면에 표시해주는 역할만 함)

 

>Model 마지막 요소와 동일

=> 뷰(사용자 화면 표시 내용 변경) -> (전달) 모델 -> 모델변경

 

3.ViewModel

데이터와 사용자 인터페이스 요소들을 잇는 다리 역할을 함.

사용자가 데이터를 클릭하고 수정할 때 발생하는 이벤트를 처리하는 부분을 뜻함.

View:ViewModel=1:n

Command & Data Binding을 사용 | 의존성X

 

> 모델 | 뷰에 대해서 알고 있어야함

 

>모델 | 뷰 변경을 모니터링 해야함

 

출처 https://workatit.tistory.com/76

 

 

MVVM 패턴의 의의

공장에서 분업화를 통해서 생산효율을 높이는 것과 같은 원리 

 

참고:[실시간 모니터링 시스템을 만들며 정복하는 MEVN]