개발 환경 설정하기 - node와 VScode 설치

 

node와 VSCode는 설치법이 간단하니, 다른 글 참고.

 

설치후 확인 - 

C:\Users\User>node -v
v16.14.0

C:\Users\User>npm -v
8.5.0

C:\Users\User>

 

 

 

https://github.com/vuejs

vuejs

 

 

https://github.com/vuejs/core

GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

 

 

 

https://cli.vuejs.org/

Vue CLI

 

프로젝트 생성도구 사용. (이유는 아래 참조)

- React는 CRA(Create React App)

 - VueJS는 Vue-CLI

: CDN(Content Delivery Network) 서비스 제공하기는 한다.

 - Angualr는 Angular-CLI 

 

도구를 사용해서 프로젝트를 생성해야 하는 이유?

1.  ECMAScript6 기준으로 코드를 작성해야 한다.

- Javascript 컴파일러를 이용해서 변환한 후 배포해야 한다.

- 구버전 브라우저들이 해석을 못해서...

- React와 VueJS는 babel 을 사용함.

 

 

참고)babel : JavaScript 컴파일러

https://babeljs.io/

Babel · The compiler for next generation JavaScript

TSC :  TypeScript 컴파일러

 

2. Module Bundler 가 필요하다.

> npm install vuejs

node_modules 폴더가 만들어지고...

배포를 할때 라이브러리 js들을 번들링햇 배포를 해야 한다. 이때 WebPack 을 사용한다.

 

참고) WebPack (모듈 번들러)

https://webpack.kr/

webpack

 

3. ECMAScript6 / TypeScript 구문을 체크해주는 기능이 필요함. (코드 정적 분석 도구)

ESLint/TSLint 라고 함

 

참고) https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

 

참고) https://palantir.github.io/tslint/

TSLint

 

 

VueJS 플러그인 설치

Vue.js workbox

Vue.js AutoImport

Vue 3 Snippets

className Completion in CSS

 

VSC 의 터미널에서

Z:\Projects\VueJS>npm install -g @vue/cli
[#######...........] / idealTree:@babel/generator: timing idealTree:node_modules/@vue/cli/node_modules/@babel/generator Completed in 1ms

 

설치후 확인

Z:\Projects\VueJS>vue --version
@vue/cli 5.0.8

크롬브라우저에서 vue.js devtools 설치