[Vue] Vue의 특징과 기본 구조

 

 

🍀 Vue를 쓰는 이유

Vue는 React나 Angular과 마찬가지로 web-app을 만들 때 사용합니다.
Vue는 React나 Angular보다 러닝커브가 짧습니다.
Angular은 TypeScript가 필수적으로 사용되어야 하고 React는 JavaScript 문법을 기반으로 작동하지만
Vue는 간단한 Vue 문법을 이용해서 상대적으로 쉽게 학습할 수 있다고합니다

특징

• Angular의 양방향 데이터 바인딩을 이용합니다
• 컴포넌트 간 통신은 React처럼 단방향 데이터 흐름을 따릅니다
• Angular, React와 비교했을 때 상대적으로 가볍고 빠릅니다(코인 거래소에서 Vue를 선호한다는 이유가 이것 때문일까요?)

 

 

0.시작하기

npm
npm install --global @vue/cli
yarn
yarn global add @vue/cli

새로운 프로젝트 시작하기

vue create <app-name>

로컬에서 실행하기

npm
npm run serve
yarn
yarn 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 .... 
})