- Today
- Total
개성있는 개발자 되기
[Vue.js] Ch1 Vue.js 시작하기 본문
1. Vue.js 란?
Vue.js란 Google Creative Lab에서 일하던 에반 유 <Evan you>가 UI를 빠르게 개발하기 위해서 만들었다. 그렇게 떄문에 Vue.js는 웹 화면 작성에 최적화된 프레임워크라고 할 수 있다.
Vue.js 전형적인 MVVM 패턴을 따르고 있는데 다음 사진과 같다.
View - HTML 과 CSS로 작성하는 "화면"
View Model - View의 실제 논리 및 데이터 흐름을 담당, ViewModel 의 상태 데이터만 변경하면 즉시 View에 반영된다.
Model - 도메인 특화 데이터
2. 개발 환경 설정
Vue.js를 학습하기 위해서는 아래와 같은 개발 환경이 필요하다.
Node.js : 서버 측 자바스크립트 언어이자 플랫폼
npm : 앱의 의존성 관리를 위해 사용하는 노드 패키지 관리자
Visual Studio Code : 코드 편집 도구
Vue-CLI : Vuew 앱 작성을 위한 기본 틀을 제공하는 도구
여기서 Vue-CLI 만 짚고 넘어가보겠다.
Vue-CLI는 커맨드라인 인터페이스 기반의 스캐폴딩(Scaffolding) 도구이다. 스캐폴딩이란 애플리케이션을 개발할 때 처음부터 개발하는 것이 아니라 기본적인 인터페이스와 툴을 제공해주는 것이다. 8장에서 자세히 다루겠지만, 이 도구는 프로젝트를 추가하면 빌드, 테스트 등등을 손쉽게 볼수 있고 수행할 수 있는 것으로 보인다.
3. 첫 번째 Vue.js 애플리케이션
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!-- 뷰 -->
<div id="simple">
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
// 모델 객체
var model = {
message: "몽실's 첫 번째 Vue.js 앱입니다.",
};
// 뷰모델 객체
var simple = new Vue({
el: '#simple', // HTML 요소
data: model // 모델 객체 참조
});
</script>
</body>
</html>
뷰-모델-뷰모델 아키텍처로 간단한 화면을 만들었다. 여기서 알아야할 점은 뷰에 표현되는 데이터는 모델에 정의한 객체들이며, 모델과 뷰를 연결해주는 뷰모델을 통해 화면이 그려지는 것이다.
데이터가 변경되면 뷰모델 객체는 즉시 HTML에 반영 된다. 데이터, UI, 로직 이 세부분이 명시적으로 나뉘어져 있어서 복잡한 화면을 만들 때 굉장히 유용할 것 같다.
콧수염 표현식
<h2>{{message}}</h2>
뷰.js 에서는 위와 같이 콧수염표현식으로 선언적으로 HTML DOM을 명시한다. 문자열을 덧붙인다는 의미로 보간법이라고도 불린다.
'Web Development > Vue.js' 카테고리의 다른 글
| [Vue.js] Ch6 컴포넌트 기초 (0) | 2019.05.13 |
|---|---|
| [Vue.js] Ch5 스타일 적용 (0) | 2019.05.09 |
| [Vue.js] Ch4 이벤트 처리 (0) | 2019.05.02 |
| [Vue.js] Ch3 Vue 인스턴스 (0) | 2019.04.25 |
| [Vue.js] Ch2 Vue.js 기초 (0) | 2019.04.14 |
