Vue.js

Vue

• SPA(Single Page Application)을 지원해주는 자바스크립트 프레임워크
• Evan You에 의해 2014년도 발표
  
  

SPA

• Single Page Application (단일 페이지 애플리케이션)
• 단일 페이지로 구성되며 서버로부터 최초에만 페이지를 다운로드하고, 이후에는 동적으로 DOM(HTML)을 구성
  • 처음 페이지를 받은 이후부터는 서버로부터 새로운 전체 페이지를 불러오는 것이 아닌, 현재 페이지 중 필요한 부분만 동적으로 다시 작성
• 연속되는 페이지 간의 사용자 경험(UX)을 향상
  • 모바일 사용량이 계속 증가하고 있는 현재 트래픽 감소와 속도, 사용성, 반응성 향상이 매우 중요하기 때문
• 동작 원리의 일부가 CRS(Client Side Rendering)의 구조를 따름

SPA의 등장 배경

• 과거의 웹 사이트들은 요청에 따라 매번 새로운 페이지를 응답하는 MPA(Multi Page Application)
  • Django 실습을 떠올려보면 많은 app/templates/app/ 안에 많은 .html파일이 있었다.
• 스마트폰이 등장하면서 모바일 최적화의 필용성이 대두되고, 모바일 네이티브앱과 같은 형태의 웹 페이지가 필요해짐
• 이러한 문제를 해결하기 위해 Vue.js와 같은 프론트엔드 프레임워크가 등장
  • CRS(Client Side Rendering), SPA(Single Page Application)의 등장
• 1개의 웹 페이지에서 여러 동작이 이루어지며 모바일 앱과 비슷한 형태의 사용자 경험을 제공
  
  

CRS

• Client Side Rendering
• 서버에서 화면을 구성하는 SSR방식과 달리 클리이언트 화면을 구성
• 최초 요청 시 HTML, CSS, JS 등 데이터를 제외한 각종 리소스를 응답받고 이후 클리이언트에서는 필요한 데이터만 요청해 JS로 DOM을 렌더링하는 방식
• 즉, 처음엔 뼈대만 받고 브라우저에서 동적으로 DOM을 그림
• SPA가 사용하는 렌더링 방식

장점

• 서버와 클라이언트 간 트래픽 감소
  • 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 후 필요한 데이터만 갱신
• 사용자 경험(UX) 향상
  • 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하기 때문

단점

• SSR에 비해 전체 페이지 최종 렌더링 시점이 느림
• SEO(검색 엔진 최적화)에 어려움이 있음(최초 문서에 데이터 마크업이 없기 때문)

SSR

• Server Side Rendering
• 서버에서 클라이언트에게 보여줄 페이지를 모두 구성하여 전달하는 방식
• JS 웹 프레임워크 이전에 사용되던 전통적인 렌더링 방식

장점

• 초기 구성속도가 빠름
  • 클라이언트가 빠르게 컨텐츠를 볼 수 있음
• SEO(검색 엔진 최적화)에 적합
  • DOM에 이미 모든 데이터가 작성되어 있기 때문

단점

• 모든 요청마다 새로운 페이지를 구성하여 전달
  • 반복되는 전체 새로고침으로 인해 사용자 경험이 떨어짐
  • 상대적으로 트래픽이 많아 서버의 부담이 클 수 있음
    
    

SSR & CSR

• 두 방식의 차이는 최종 HTML 생성 주체가 누구인가에 따라 결정
• 즉, 실제 브라우저에 그려질(렌더링) HTML을 서버가 만든다면 SSR / 클라이언트가 만든다면 CSR
• '어떤 게 더 좋다'가 아니라 내 서비스 또는 프로젝트 구성에 맞는 방법을 적절하게 선택하는 게 중요
  
  

Vue.js의 등장배경

• SPA과 CRS가 등장한 것처럼 현대 웹 페이지는 페이지 규모가 계속 커지고 있고, 그 안에서 사용하는 데이터 그리고 사용자와의 상호작용이 매우 많은데,

• Vanilla JS 만으로는 관리하기가 어려움

  const form = document.querySelector('#form') 
  form.addeventListener('submit', function() {내부로직....와다다다다}) 

  • 하나의 form태그에 submit을 감지하기 위해서 작성한 아주 기본적인 로직이다.
  • 실질적으로 submit이라는 상호작용이 발생했을 때 어떤 일을 해야하는지는 아직 적지도 않았는데 벌써 두줄이 적혔다...
  • 만일 해당 이벤트로 인해 다른 DOM요소의 내용이 변경되야 한다면, 변경해야하는 요소를 일일이 다 선택하고 수정해주는 과정이 추가적으로 필요하다..😅
  • 그런데 한 페이지에서 다뤄야할 데이터나, 이벤트(상호작용)이 많다면...? 😂

• 그에 반해 Vue.js는

  • DOM과 Data가 연결되어 있고
  • Data를 변경하면 이에 연결된 DOM은 알아서 변경된다
  • 즉 우리는 오직 Data에 관한 관리만 신경쓰면 되는 것이다!!
    
    

MVVM Pattern

• 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴
  
  
  

Model

• Vue에서 Model은 JavaScript Object
• Object === { key : value }
• Model은 Vue Instance 내부에서 data라는 이름으로 존재
• 이 data가 바뀌면 View(DOM)가 반응
  
  
  

View

• Vue에서 View는 DOM(HTML)
• Data의 변화에 따라 바뀌는 대상
  
  

View Model

• Vue에서 VeiwModel은 모든 Vue Instance
• View와 Model 사이에서 Data와 DOM에 관련된 모든 일을 처리
• ViewModel을 활용해 Data를 얼마만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것