29. The vue compiler
내용
이 강의에서는 Vue.js에서 템플릿을 생성하는 두 가지 방법에 대해 설명합니다:
- HTML 문서 내 템플릿 생성: 지금까지 사용한 방법으로, HTML 문서 내에
<div>태그와 같은 요소 안에 템플릿을 작성합니다. - Vue 인스턴스 내 템플릿 생성:
createApp함수에 전달되는 설정 객체 안에template속성을 추가하여 템플릿을 직접 로드할 수 있습니다. 이 방법은 HTML이 다른 파일에 저장되어 있을 때 유용할 수 있지만, 대부분의 에디터에서 HTML 구문을 JavaScript 파일 안에서 인식하지 못하고, 다중 줄 템플릿 작성이 어렵다는 단점이 있습니다.
또한, Vue의 두 가지 다운로드 버전(컴파일러 포함 버전과 컴파일러 미포함 버전)에 대해 설명하고 있습니다. 컴파일러가 포함된 버전은 템플릿을 객체로 변환하는 작업을 내부적으로 수행하며, 컴파일러가 없는 버전은 파일 크기가 작고 로딩 시간이 단축되지만, 템플릿을 수동으로 작성해야 합니다. 이 강의에서는 컴파일러 없이 템플릿을 수동으로 작성하는 방법과 이를 위한 render 함수의 사용에 대해 설명하고 있습니다.
마지막으로, Vue CLI를 사용하면 템플릿을 쉽게 작성하면서도 컴파일러가 없는 버전의 성능 이점을 누릴 수 있다고 언급하며, 이후 강의에서 Vue CLI에 대해 더 자세히 다룰 것이라고 밝힙니다.
vue.global.min.js 1
- 파일 이름에
prod없으면 개발용 파일이라는 뜻 - 파일 이름에
runtime없으면 컴파일 코드가 포함되어있다는 뜻
index.html
<!DOCTYPE>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app"></div>
<!-- 개발용 vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.min.js"></script>
<!-- 배포용 vue.js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.prod.min.js"></script>-->
<!-- runtime 개발용 vue.js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.runtime.global.min.js"></script>-->
<script src="app.js"></script>
</body>
</html>
app.js
const vm = Vue.createApp({
data() {
return {
message: 'Hello World!',
}
},
template: `{{ message }}`,
}).mount('#app');
main.css
body{
font-size: 20px;
font-family: sans-serif;
}
.red{
color: red;
}
vue.global.min.js 2
파일 이름에
prod없으면 개발용 파일이라는 뜻파일 이름에
runtime없으면 컴파일 코드가 포함되어있다는 뜻https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.min.js
vue.runtime.global.min.js 1
- 파일 이름에
prod없으면 개발용 파일이라는 뜻 - 파일 이름에
runtime없으면 컴파일 코드가 포함되어있다는 뜻
index.html
<!DOCTYPE>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app2"></div>
<!-- 개발용 vue.js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.min.js"></script>-->
<!-- 배포용 vue.js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.global.prod.min.js"></script>-->
<!-- runtime 개발용 vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.12/vue.runtime.global.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
const vm2 = Vue.createApp({
data() {
return {
message: 'Hello World2!',
}
},
render() {
return Vue.h(
'h1',
this.message,
)
}
}).mount('#app2')
main.css
body{
font-size: 20px;
font-family: sans-serif;
}
.red{
color: red;
}