🍀 Vue를 쓰는 이유
Vue는 React나 Angular과 마찬가지로 web-app을 만들 때 사용합니다.
Vue는 React나 Angular보다 러닝커브가 짧습니다.
Angular은 TypeScript가 필수적으로 사용되어야 하고 React는 JavaScript 문법을 기반으로 작동하지만
Vue는 간단한 Vue 문법을 이용해서 상대적으로 쉽게 학습할 수 있다고합니다
특징
- Angular의 양방향 데이터 바인딩을 이용합니다
- 컴포넌트 간 통신은 React처럼 단방향 데이터 흐름을 따릅니다
- Angular, React와 비교했을 때 상대적으로 가볍고 빠릅니다(코인 거래소에서 Vue를 선호한다는 이유가 이것 때문일까요?)
0.시작하기
npmnpm install --global @vue/cli
yarnyarn global add @vue/cli
새로운 프로젝트 시작하기
vue create <app-name>
로컬에서 실행하기
npmnpm run serve
yarnyarn serve
1.Vue 구조
Vuex
- 가상 돔을 관리하기 위한 역할
- 개별 요소를 관찰하며 값이 변경되었을 때 자동으로 업데이트‼
Vue CLI
- 프로젝트를 자동으로 생성/세팅해주는 자동화 역할을 합니다
- 웹팩 세팅을 간단하게 할 수 있게합니다
- NPM을 통해서 동작!
Vue Router
- V-Dom들을 향해 이동할 수 있는 라우터 역할을 합니다
node_modules란?
- 모듈 간 복잡한 의존성을 띄고 있기 때문에 무겁고 건드렸을 때.. 되돌리기 힘들 수도 있습니다
- node.js 환경의 의존성 모듈
Babel
- 번역기
- JavaScript compiler
- 자바스크립트 ES6+ 코드를 버전에 맞춰 번역해주는 도구
- 브라우저의 버전 별로 코드가 동작하지 않는 경우가 있어 이 문제를 해결하기 위해 만들어진 도구
Module - 개발 규모가 커질수록 파일 하나에 모든 기능을 담기가 어려워집니다(변수 네이밍 문제 등... 그리고 일단 보기가 너무 힘듦💦) - 따라서 파일을 여러 개로 분리하여 관리를 하게 되었고, 분리된 파일 각각을 모듈이라고 합니다 - 대개 기능 단위로 분리. 클래스 하나 혹은 특정 목적을 가진 복수의 함수를 담은 라이브러리로 구성됩니다 - ESM(ECMA Script Module), AMD, CommonJS, UMD
- 그러나..`/ᐠ｡ꞈ｡ᐟ\`
- 모듈의 수가 많아지고 의존성이 깊어지면 모듈 간의 문제를 파악하기가 어려워진다 - 이를 해결하기 위해 웹팩이 등장함
Webpack - static module bundler - 모듈 간 의존성 문제를 해결하기 위한 도구 - 프로젝트에 필요한 모듈을 매핑하고 내부적으로 종속성 그래프를 빌드합니다
Bundler - 모듈 의존성 문제를 해결해주는 작업을 진행합니다 - Webpack도 다양한 Bundler 중 하나(가장 기본이되는 번들러) - Bundling된 결과물은 개별 모듈의 실행 순서에 영향을 받지 않고 동작 - Vue CLI는 Babel, Webpack에 대한 초기 설정이 되어 있다
2.Vue의 라이프사이클
Vue.js를 이용해서 개발을 하기 위해 Vue Instance가 꼭 필요합니다
이 Instance가 생성될 때 Vue.js는 초기화 작업을 진행하게 됩니다
- 생성
- Dom에 mount
- update
- destroy
instance
new Vue({
// 인스턴스 옵션 (data, template, el, methods, life cycle hook ....
})