티스토리 뷰
React와 Vue중 무엇을 공부할지 고민하다 상대적으로 배우기 더 쉽다 생각한 Vue를 선택하게 되어 공부한 기록을 남기고자 합니다.
(공부 책 : Vue.js Quick Start )
1. MVVM 패턴
Vue.js는 MVVM(Model - View - ViewModel) 패턴을 따르고 있습니다.
MVVM패턴은 애플리케이션 로직과 UI 분리를 위해 설계된 패턴으로 View는 HTML, CSS로 작성하고 ViewModel은 View의 실제 논리 및 데이터 흐름을 담당합니다. View는 비즈니스 로직에서 ViewModel의 상태 데이터를 변경하면 View에 즉시 반영되어 ViewModel 외 다른 요소는 신경쓸 필요 없습니다.
2. 개발환경
Node.js: 서버 측 자바스크립트 언어 ( nodejs.org/ko/ )
npm: 의존성 관리를 위해 사용하는 노트 패키지 관리자 ( Node.js 설치시 같이 설치됩니다. )
VSC(Visual Studio Code): 코드 편집 도구 ( code.visualstudio.com/ )
Chrome + Vue.js devtools: 크롭 브라우저 기반 Vue.js 디버깅, 개발 도구
Vue-CLI: Vue 작성을 위한 기본 틀을 제공하는 도구
# npm의 경우 commad(cmd)창에서
npm install -g npm
npm install -g yarn @vue/cli
을 입력하여 npm 최신 버전으로 업그레이드 및 Vue-cli를 설치합니다.
# VSC에서 코딩시 추가하면 도움되는 플러그인
[보기] + 확장을 클릭하거나 CTRL + SHIFT + X를 눌러 설치합니다. 혹은
view-in-browser: html 파이을 기본 부라우저로 선택합니다.
vetur: Vue.js 코드 문법 강조, 자동완성 등을 제공합니다.
JS-CSS-HTML Formatters: JS, CSS, HTML 코드 자동완성 기능을 제공합니다.
HTML Snippets: HTML 태그 조각을 빠르게 작성해줍니다.
Vue 3 Snippets: Vue.js 3.0 코드 조각 지원, 문법 강조 기능을 제공합니다.
Vue-beautify: Vue.js 코드 정리 배치 기능을 제공합니다.
ESLint: 자바스크립트 코드 문법 체크 등의 기능을 제공합니다.
# 크롬 설치 후 구글 창에 Vue.js devtools를 입력한 뒤 나오는 첫 페이지를 클릭하시면 크롬 전용 확장 도구를 추가할 수 있습니다.
3. 간단한 예제 코드
먼저 앞으로 공부하면서 코드를 저장할 임의의 디렉터리(폴더)를 만듭니다. 그리고 VSC로 해당 디렉터리를 엽니다.
저의 경우 개인공부(VUE)라 폴더명을 지정했습니다. VSC에 폴더가 열리면 하단 그림과 같은 아이콘을 클릭하여 ex01-01.hmtl 파일을 추가합니다.
Vue는 CDN 방식으로 불러와 코딩 작업을 할 예정입니다.
ex01-01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="ex01_01">
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
var model = {
message: 'Hello World!'
};
var ex01_01 = new Vue({
el: '#ex01_01',
data: model
})
</script>
</body>
</html>코딩 후 브라우저에 잘 나오는지 확인해봅니다.
결과 화면
'Vue' 카테고리의 다른 글
| Vue.js 이벤트 처리 (0) | 2021.02.25 |
|---|---|
| Vue 인스턴스 (0) | 2021.01.29 |
| Vue.js 기타 디렉티브와 계산형 속성 (0) | 2021.01.22 |
| Vue.js 반복 렌더링 디렉티브 (0) | 2021.01.12 |
| Vue.js 기본 디렉티브 (0) | 2021.01.04 |