럿고의 개발 노트
[Goorm] Vue.js로 시작하는 SPA개발 Chapter2. Hello World로 만나는 Vue 본문
[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를 변경
● 실습코드
● 실습 내용 정리
- 로딩 속도면 비교
■ 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
'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 |
