vue의 장점(Vue Router(routing), SPA, SSR, Hydration,<template>)

 

 

1. Vue Router 라이브러리로 SPA( Single-Page Application)가 가능하다. SSR도 가능하다.

용어 정리  

* SPA ( Single-Page Application)

* SSR ( Server-Side Rendering)

 

클라이언트 측 대. 서버측 라우팅
서버 측 라우팅은 서버가 사용자가 방문 중인 URL 경로에 따라 응답을 발송하는 것을 의미합니다. 기존의 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 HTML 응답을 수신하고 새로운 HTML로 전체 페이지를 다시 로드합니다.

그러나 단일 페이지 응용 프로그램(*SPA)에서 클라이언트 측 자바스크립트는 탐색을 가로채고, 새로운 데이터를 동적으로 가져오며, 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할 수 있다. 이것은 일반적으로 더 빠른 사용자 경험을 가져오는데, 특히 사용자가 오랜 시간 동안 많은 상호 작용을 수행할 것으로 예상되는 실제 "응용 프로그램"과 더 유사한 사용 사례의 경우 그러하다.

이러한 SPA에서 “routing"은 브라우저에서 클라이언트 측에서 수행됩니다. 클라이언트 측 라우터는 History API 또는 해시 변경 이벤트와 같은 브라우저 API를 사용하여 응용 프로그램의 렌더링된 보기를 관리하는 역할을 합니다. By. 파파고

출처 : 공식사이트

출처 : https://vuejs.org/guide/scaling-up/routing.html

Routing | Vue.js

 

Vue Router - SPA

Vue는 SPA를 구축하기에 적합합니다. 대부분의 SPA의 경우 공식적으로 지원되는 Vue Router 라이브러리를 사용하는 것이 좋습니다. 자세한 내용은 Vue Router의 설명서를 참조하십시오. by. 파파고

 

SSR

Vue.js는 클라이언트 측 응용 프로그램을 구축하기 위한 프레임워크입니다. 기본적으로 Vue 구성 요소는 브라우저에서 DOM을 출력으로 생성하고 조작합니다. 그러나 동일한 구성 요소를 서버에서 HTML 문자열로 렌더링하여 브라우저로 직접 전송하고 마지막으로 정적 마크업을 클라이언트의 완전한 대화형 앱으로 "Hydration"하는 것도 가능하다.

server-rendered Vue.js 앱은 앱 코드의 대부분이 서버와 클라이언트 모두에서 실행된다는 점에서 "동형" 또는 "범용"으로 간주될 수 있다.

by. 파파고

출처 : 공식사이트

출처 : https://vuejs.org/guide/scaling-up/ssr.html

Server-Side Rendering (SSR) | Vue.js

 

 

*Hydration : Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.

하이드레이션은 Vue가 서버가 보낸 정적 HTML을 넘겨받아 클라이언트 측 데이터 변경에 대응할 수 있는 동적 DOM으로 전환하는 클라이언트 측 프로세스를 말한다. by. 파파고

https://v2.ssr.vuejs.org/guide/hydration.html

Client Side Hydration | Vue SSR Guide

 

2. 코드를 작성하는 방법이 정해져있다. -> 협업을 할 떄 코딩 스타일 통일이 가능하다. (+ 쉽다) 

 

3. HTML 구조를 거의 그대로 사용한다. -> html, js, css 로 구현된 기존 프로그램을 vue로 변환려면 수고스러움이 적다.

일반적으로 *.vue 파일 확장자를 사용하는 Vue 단일 파일 구성 요소(SFC)는 HTML과 같은 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 지정 파일 형식입니다. Vue SFC는 HTML과 구문적으로 호환됩니다.
각 *.vue 파일은 세 가지 유형의 최상위 언어 블록(<template>, <script> 및 <style>)으로 구성되며 선택적으로 추가 사용자 지정 블록으로 구성됩니다. by.파파고

html -> template

js -> script, css ->script

 

 

출처:

https://vuejs.org/api/sfc-spec.html#language-blocks

SFC Syntax Specification | Vue.js

 

 

 

<template>

각 *.vue 파일에는 한 번에 최대 하나의 최상위 수준 <템플릿> 블록이 포함될 수 있습니다.
컨텐츠가 추출되어 @vue/compiler-dom으로 전달되고, 자바스크립트 렌더 함수로 미리 컴파일되어 내보낸 구성 요소에 렌더 옵션으로 첨부됩니다. by.파파고

 

 

 

<script>

각 *.vue 파일은 한 번에 최대 하나의 <script> 블록을 포함할 수 있습니다(<script setup>은 제외).
스크립트는 ES 모듈로 실행됩니다.
기본 내보내기는 일반 개체 또는 defineComponent의 반환 값으로 Vue 구성 요소 옵션 개체여야 합니다.

<style>

하나의 *.vue 파일에 여러 개의 <style> 태그가 포함될 수 있습니다.
<style> 태그는 현재 구성요소에 스타일을 캡슐화하는 데 도움이 되는 범위 속성 또는 모듈 속성을 가질 수 있습니다(자세한 내용은 SFC Style Features 참조). 캡슐화 모드가 다른 여러 개의 <style> 태그를 동일한 구성 요소에 혼합할 수 있습니다.

 

ㅇㅇㅇ

ㅇㅇㅇ

ㅇㅇㅇ

참고

---

 

참고사이트1 : https://velog.io/@woals3000/Vue%EB%A5%BC-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%9C%EB%8B%A4.-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C

Vue를 알아야 한다. - 왜 사용할까?

참고사이트2 : https://brunch.co.kr/@clay1987/138

Vue. js의 3가지 핵심구조