Vue의 개념정의

vue.js

• 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크
• spa(single page application) 지원

SPA

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

CSR

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

SPA는 하나의 THML과 많은 양의 JS를 사용자에게 보내준 뒤, 사용자가 클릭이나 어떤 이벤트를 하면 JS가 사용자가 원하는 모양으로 만들어져서 화면을 보여주는 형태이다. so spa에서 사용하는 렌더링 방식의 CSR의 장점과 단점에 대해 얘길 하자면

CSR

• 장점
  1. 서버와 클라이언트 간 트래픽 감소
     • 웹 어플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 후 필요한 데이터만 갱신
  2. 사용자 경험(UX)향상
     • 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하기 때문
• 단점
  1. SSR에 비해 전체 페이지 최종 렌더링 시점이 느림
  2. SEO(검색 엔진 최적화)에 어려움이 있음

SSR

• Surver side rendering
• 서버에서 클라이언트에게 보여줄 페이지를 모두 구성하여 전달하는 방식
• js 웹 프레임워크 이전에 사용되던 전통적인 렌더링 방식
• django를 생각하면 된다.