Vue.js 란?
- JavaScript의 프레임워크 중 하나. (react.js, angular 등 다른 프레임워크들도 있음)
- 다른 프레임워크에 비해 직관적이기 때문에 배우기가 더 용이함
- 템플릿 기반의 구문을 사용해 HTML과 JavaScript를 명확히 분리 가능 (가독성 좋음)
CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)
- CSR :
장점
- 초기 로딩 후에는 모든 렌더링이 클라이언트 측에서 처리됨 -> 빠르게 느껴짐
- 서버 부하가 감소, 서버는 단지 데이터(JSON)만 전송하면 됨
단점
- 애플리케이션의 자바스크립트 전체를 다운로드해야하므로 초기 속도는 느릴 수 있음
- 검색 엔진이 제대로 반영되지 못할 수 있음 - SSR :
장점
- 서버에서 HTML을 완성해 보내기 때문에, 검색엔진 최적화에는 더 적절
- 첫 페이지에서 모든 정보를 다운로드할 필요가 없으므로 첫 페이지 로딩은 더 빠
단점
- 모든 요청이 서버에서 렌더링되므로 부하가 증가
- 클라이언트와 서버 간 상태를 동기화하는 것이 복잡할 수 있음.
기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>FirstVueApp</title>
///////////////////////////////////////
// Vue를 사용하기 위해 필수. CDN방식
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button v-on:click="count++">Count is: {{ count }}</button>
</div>
///////////////////////////////////////////
<script>
// Vue 객체에서 createApp과 ref를 구조분해 할당으로 생성
const { createApp, ref } = Vue;
// createApp 함수 호출하여 Vue 앰 인스턴스를 생성
const app = createApp({
setup() { // <- Composition API에서 컴포넌트의 반응형 상태와 함수를 정의
// ref로 반응형 데이터 생성
const message = ref("Hello vue");
const count = ref(0);
// setup함수에서 반환하는 객체들. 템플릿에서 사용하려면 반드시 반환해주어야 함
return {
message,
count,
};
},
});
app.mount("#app");
</script>
/////////////////////////////////////////////
</body>
</html>
createApp 함수를 사용해 앱 객체를 생성하고, 반응형 데이터 생성을 위해 ref객체를 생성한다.
const {createApp, ref} = Vue -> 구조분해할당으로 객체 생성
템플릿 영역에서의 unwrap
Vue에서는 동적으로 화면을 바꾸고, 렌더링하기 위해
ref() 를 사용해 반응형 데이터를 생성한다.
즉 ref() 객체 안에 값을 집어 넣는 것.
이를 자바스크립트 안에서 값을 참조하기 위해선
.value를 사용해 값을 참조할 수 있고,
템플릿(HTML) 영역에서는 알아서 unwrap해주기 때문에 .value를 사용할 필요가 없다!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>FirstVueApp</title>
///////////////////////////////////////
// Vue를 사용하기 위해 필수. CDN방식
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button v-on:click="count++">Count is: {{ count }}</button>
</div>
<script>
const App = {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment }
}
};
const app = createApp(App);
app.mount('#app');
</script>
</body>