Vue.js 시작하기
먼저 vue.js가 무엇인지 부터 알아봐야 겠죠?
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
공식문서에 나와있는 Vue.js의 정의이다.
다른프레임워크에 대한 비교는 숙련된 프론트엔드 개발자라면 확인하라고 적혀있었다...
대충 한번 훑어보았습니다.
- React와 비교
- 렌더링성능이 더 우수 (최대 약 1/3 단축)
- Vue의 가상 DOM 구현이 훠얼씬 가볍다
- AngularJS(Angular1)와 비교
- Vue에 비해 어플리케이션의 구성 방법의 자율성이 낮음
- Vue에서는 단방향의 데이터 흐름을 사용해서 단순하며 흐름을 쉽게 파악가능
- Angular2와 비교
- 일단 TypeScript를 안배워도됨( ㄱㅇㄷ ㅇㅈ )
- Angular1과 마찬가지로 구성 방법의 자율성이 낮음
Vue js를 사용하는 방법
CDN을 이용해서 사용하는방법 (
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
)CDN이 무엇?
CDN(Content Delivery Networks)는 지난 몇 년 동안 웹 호스팅에 큰 변화를 일으켰습니다. 하나의 서버에서 여러분의 웹사이트를 호스팅하는 대신 파일들을 분산시키고 여러 시스템에 걸쳐 로드합니다.
제가보기엔 쉽게 얘기해서 script부분에 빌드가 가능하게끔 만들어주는 느낌이라고 해야할까요? 저도 이번에 처음알게 됬는데 test.html 파일내에 위의 script부분을 추가하고 나니 vue.js 문법이 먹힙니다.
개인적인 생각이지만 디렉티브나 라우팅을 js를 잘 못 다루고 특히 webpack을 이용한 application 개발이 미숙하신분들은 이방법으로 하시는게 좋습니다. 라고 공식문서에 친절하게 나와있습니다.
앞부분 예제들(디렉티브 사용방법 등)은 이녀석과 함께 따라해보는게 좋을 것 같아요. 왜냐하면 쉽거든요
vue-cli를 설치하여 단일 vue 컴포넌트를 이용해서 만드는 방법
- 흠 angular-cli와 비슷한 맥락입니다 webpack을 이용해서 만드는건데 잠깐 해봤지만 angular-cli 사용하는방법이 거의 비슷한 것 같아요.
설치방법
vue-cli 설치
$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project
$ cd my-project
# 의존성을 설치하고 실행하세요!
$ npm install
$ npm run dev
공식문서에서는 vue init webpack my-project
이렇게 적혀있습니다. 실제로 해보시면 아주 친절하게 routing 세팅까지 다 되있더군요 하지만 저같은 초보개발자는 라우팅도 직접 구현을 해봐야하니까 vue init webpack-simple my-project
을 이용합시다. 화면을 보여주는것은 동일한데 차이점은 라우팅이 하나도 세팅이 안되있고 단일 vue 컴포넌트로만 화면에 출력을 되게한 상태입니다.
추가적으로 설치시에 여러 옵션을 세팅을 하게될텐데 [? Use ESLint to lint your code] [yes/no]
라고 나오면 no를 하는게 좋습니다.
이게 Lint에서 대충 감이오시겠지만 문법을 세세하게 공백 갯수, 줄바꿈 갯수 가 틀리면 build가 안됩니다. 아직 배우는 단계이므로 과감히 no 하시는게 좋습니다.
DevTools!
Angular도 있나 찾아봐야겠는데 Vue.js는 개발자 도구가 따로 있더라구요 사스갓뷰...이래서 사람들이 vue vue vue 하나봅니다 ㅋㅋ
구글에 ** vue.js devtools **를 검색해줍니다. 그러면 알아서 첫번째로 Chrome Web Store에 있는 것을 설치해줍니다.
vue project 인 경우 npm run dev로 실행시에 8080포트가 위처럼 열립니다. 그러면 우측 상단에 v자 모양이 색깔이 생길 거에요.
그럼 해당페이지에 우클릭 후 검사를 눌러주면 위 그림처럼 elements 옆에 Vue라고 떠요 누르시면 아주 보기 좋게 나옵니다.
이 툴은 vue 자체가 어느정도 숙달이되서 vue-cli를 이용할 때 부터 많이 쓰일 것 같네요.
MVVM 패턴?아마 vuejs를 검색하시거나 자료를 찾다보면 MVVM패턴에 대해서 많이 들을 거에요.
Model - View - ViewModel의 줄임말이에요.MVVM 패턴은 어플리케이션의 로직과 UI분링를 위해 설계된 패턴이에요
Model 은 도메인에 특화된 데이터 입니다. - View 는 유저 인터페이스로 ViewModel의 상태 데이터가 변겨오딜 경우 즉시 View에 반영이 되는 것이이에요
ViewModel은 상태와 연산을 담당하며 Model과 View사이에서 데이터를 전달받고 변환해주는 역할을 해요
천천히 단일 html 페이지에서 Vue js에서 사용되는 디렉티브, 인스턴스, 이벤트처리, 스타일, 컴포넌트들을 실습해보고나서 webpack을 이용해서 뭘하나 만들어보는 순서로 공부를 해봐야겠어요!
'Front_End > Vue.js' 카테고리의 다른 글
05. Vue.js Dynamic CSS 적용하기 (0) | 2018.12.14 |
---|---|
04. Vue.js 스타일 적용 방법 (0) | 2017.12.26 |
03. Vue.js 초간단 Event Handling (1) | 2017.12.25 |
02. Vue.js Vue 인스턴스 옵션 and Life Cycle (0) | 2017.12.24 |
01. Vue.js 기본기: 각종 디렉티브 (0) | 2017.12.23 |