[Vue] Vue설치/Bable/Webpack/Bundler

SFC( Single File Component)

• vue의 컴포넌트 기반 개발의 핵심 특징
• 화면의 특정 영역에 대한 여러 코드를 하나의 파일(.vue)에서 관리

component: 재사용 가능한 코드를 캡슐화 하는데 도움을 줌

Vue 인스턴스 === Vue 컴포넌트

Vue CLI를 사용하기 위해서 Node.js설치가 필요하다.

Node.js: 자바스크립트를 브라우저에서만 사용하는게 아닌 SSR에서도 사용 가능하도록 함

python 에서 pip가 있다면 node.js에서는 NPM. 다양한 패키지 관리자.

명령어

설치 공식문서

https://cli.vuejs.org/guide/installation.html

npm install -g @vue/cli

프로젝트 이름이 my-first-vue-app일 때

npm install -g @vue/cli

> 생성: vue create my-first-vue-app

이렇게 생성하면 Babel과 Bundler가 같이 만들어진다.

vue 2로 선택 후 enter

cd my-first-vue-app/ 

npm run serv

Bable

• 자바스크립트의 변환기
• 자바스크립트의 신버전 코드를 구버전으로 번역/변환 해주는 도구
• 자바스크립트의 스펙트럼이 매우 다양하기 때문에 같은 의미인 다른 코드를 해결하기 위한 도구

Node.js

• 자바스크립트를브라우저가 아닌 환경에서도 구동할 수 있도록 하는 자바스크립트 런타임 환경

Webpack

• 정적 모듈 번들러
  • 모듈은 파일하나 (스크립트 하나 === 모듈 하나)
  • 코드를 모듈 단위로 작성하는 등 다양한 시도가 이루어짐
  • 현재는 대부분의 브라우저와 Node.js가 모듈 시스템으로 함
  • 모듈간의 의존성 문제를 해결하기 위한 도군

Bundler

• Bundling: 모듈 의존성 문제를 해결해주는 작업, 해결해주는 도구 : Budndler(웹펙도 번들러 중에 하나)