2017년 10월 16일 월요일

Vue 2.x - 시작하기

프론트엔드 자바스크립트 프레임워크 Vue 를 배워보자. 오늘부터 시작!!! 
시작하기에 앞서 Vue의  특징에 대해 알아보자.

구글링을 통해 간략히 정리해보면..
 - 다른 프레임워크에 비해 작고 가벼우며 사용하기 간편
 - React 처럼 "뷰" 에만 초점을 두기 때문에 다른 라이브러리와 혼용하여 사용하기 용이
 - 서버사이드 렌더링 지원 등.

이외에도 많은 특징이 있겠지만 나머지는 직접 개발하면서 알아볼 생각이다.

1. 준비하기
 - Vue Devtools 설치 : Vue 앱을 보다 사용자 친화적으로 검사 및 디버그 가능
    github : https://github.com/vuejs/vue-devtools#vue-devtools
 
각 브라우저 별로 설치 방법이 작성되어 있다 . 난 크롬을 자주 사용하므로 Chrome Extenstion로 
설치하여 사용!!

 - Js debugging tool 설치 : 브라우저에서 실시간으로  JS, CSSS, HTML 코드를 확인할 수 있는 서비스
 
JSBin, JSFiddle, CodePen 등이 있으며 자주 사용하는 서비스 선택!
                                 
2. 설치하기
 - CDN : https://unpkg.com/vue/dist/vue.js

설치하는 방법에는 CDN, NPM, CLI 등이 있지만 일단 시작하는 단계이니 CDN으로 간편 설치!

3. JSBin 활용하여 Vue 로드 및 예제


"뷰" 안에 {{name}} 변수를 만든 후 script 에서  Vue 정의를 통해 data에 넣어 name 변수에 해당하는
값을 지정하니 Output에서 "hello, example"이 출력되었다.

여기서 중요한 것은 name의 값을 Vue 로 정의 했기에 {{name}}에 대입되었음!
아직까지는 쉽다...

참조 :
https://velopert.com/3007
https://kr.vuejs.org/

댓글 없음:

댓글 쓰기