럿고의 개발 노트

[Goorm] Vue.js로 시작하는 SPA개발 Chapter2. Hello World로 만나는 Vue 본문

Vue.js Note/[Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)

[Goorm] Vue.js로 시작하는 SPA개발 Chapter2. Hello World로 만나는 Vue

KimSeYun 2019. 11. 28. 15:14

[Goorm] Vue.js로 시작하는 SPA개발

2. Hello World로 만나는 Vue

2.1. Hello World로 만나는 Vue


● 페이지 요구사항

- HTML body태그 안에 빈 div Element 만들기

- div Element에 #app ID 주기

- JavaScript를 통해 div Element안에 Text를 넣어주기

- 이 페이지를 JavaScript / jQuery / Vue 속도 비교

- div안에 div를 더 넣어서 그 안에 content를 변경


● 실습코드


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter02 - Ex1</title>
<!-- jQuery 추가 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Vue.js 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- JS 이용 -->
<h5>- JavaScript 이용</h5>
<div id = "app1"></div>
<script>
document.getElementById("app1").innerText = "Hello World"; // ID가 app인 곳에 Helloworld를 넣어라
</script>
<!-- jQuery 이용 -->
<h5>- jQuery 이용</h5>
<div id = "app2"></div>
<script>
$("#app2")[0].innerText = "Hello World" // jQuery 문법
</script>
<!-- Vue.js 이용 -->
<h5>- Vue.js 이용</h5>
<div id = "app3">{{ message}}</div>
<script>
let vm = new Vue({
el:'#app3',
data:{
message:''
},
created() {
this.message = 'Hello World';
}
});
</script>
</body>
</html>
view raw vueEx1.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter02 - Ex2</title>
<!-- jQuery 추가 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Vue.js 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- JS 코드 -->
<h5>- JavaScript 이용</h5>
<div id = "app1">
<div></div>
</div>
<script>
// div안에 div에 Hello World
document.getElementById("app1").getElementsByTagName("div")[0].innerText = "Hello World";
</script>
<!-- jQuery 이용 -->
<h5>- jQuery 이용</h5>
<div id = "app2">
<div></div>
</div>
<script>
$("#app2 div:first-child")[0].innerText = "Hello World";
</script>
<!-- Vue.js 이용 -->
<h5>- Vue.js 이용</h5>
<div id = "app3">
<div>{{ message}}</div>
</div>
<script>
let vm = new Vue({
el:"#app3",
data:{
message:""
},
created() {
this.message = "Hello World";
}
});
</script>
</body>
</html>
view raw vueEx2.html hosted with ❤ by GitHub



● 실습 내용 정리

- 로딩 속도면 비교

■ JavaSccript : 39.2min

■ jQuery : 40min / 1.87s

■ Vue.js : 40.8min / 40ms

- 코드 간결성은 Vue가 떨어지지만, 예제 내에서 div가 한 두개가 아닌 여러 개가 있다면 훨씬 간결해 진다.(이유는 data의 위치만 잘 넣어주면 되기 때문에)

- jQuery와 JavaScript의 경우 Selector를 직접 지정해줘서 찾아가야 하는데, 전체 페이지 구조를 다 파악하기에는 어려움이 많다.

- 반면 Vue(혹은 SPA Library들)은 명시적 변수 이름을 통해서 JavaScript로직을 통해서 수행할 실제 도메인 로직에 집중 가능

- Vue의 경우 다양한 Directive(TODO 혹은 다른 것들도 포함)들을 제공하기 때문에 반복적인 코딩을 줄일 수 있으며, 유지보수도 용이함.

★ 도메인 로직 : 모델 고유의 데이터 그리고 그 데이터를 조작 및 관리하는 로직

★ Directive : HTML Compiler에 의해 해석된 특정한 행위의 기능을 가진 DOM Element



● 실습 코드 Github 및 출처

- 실습 코드 : https://github.com/ksy90101/Vue.js/tree/master/%5BGoorm%5DVue.js/Chapter02

- 출처 : https://edu.goorm.io/learn/lecture/13020/vue-js%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-spa-%EA%B0%9C%EB%B0%9C



저작자표시 비영리

'Vue.js Note > [Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)' 카테고리의 다른 글

[Goorm] Vue.js로 시작하는 SPA개발 Chapter6. Components  (0) 2019.11.28
[Goorm] Vue.js로 시작하는 SPA개발 Chapter5. Directives  (0) 2019.11.28
[Goorm] Vue.js로 시작하는 SPA개발 Chapter4. Template Syntac  (0) 2019.11.28
[Goorm] Vue.js로 시작하는 SPA개발 Chapter3. Vue Instance와 작동원리  (0) 2019.11.28
[Goorm] Vue.js로 시작하는 SPA개발 Chapter1. 강의 소개  (0) 2019.11.28
'Vue.js Note/[Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)' Related Articles more
Comments