1.Vue (Wepack,Babel,Sass)

의존성 과  개발용 의존성 모듈을 배웠습니다.

패키지의 배포 시 포함될 의존성 모듈을 지정합니다.

$ npm install --save MODULE_NAME
# or
$ npm i MODULE_NAME

개발용 모듈설치

패키지의 개발시 사용될 의존성 모듈을 지정합니다(배포시  포함되지 않는다.)

$ npm install --save-dev MODULE_NAME
# or
$ npm i -D MODULE_NAME

개발용 의존성 과 의존성의 차이점은 배포 차이인 것 같다 (아직은 많이 몰라서 다시 공부해서 제대로 추가하겠습니다.)

 

Wepack

웹팩은 오픈소스 자바스크립트 모듈 번들 소스이다. (쉽게 말해 Plugin라고 생각하면 편할 것 같다.)

-Webpack-cli는 터미널에서 웹팩 명령 (Commands)를 실행할 수 있게 해주는 도구입니다.

webpack-cli 커맨드에서 실행할수 있는도구입니다.
$ npm i -D webpack webpack-cli
//개발용 으로 실시간 Reload 서버를 실행하기위해  wepack-dev-server 설치
$ npm i -D webpack webpack-cli
//wepack-merge 웹팩 Config 객체를 병합(merge)하기 설치 합니다.
$ npm i -D webpack-merge

여기서 주의할 점은 모르는 것들 꼭 Stack Over flow 참고하시면 좋습니다.

Babel

바벨은 Es6 이상의 코드를 Es5 이하 버전으로 변환하기 사용한다고 한다.

• @babel/core: 바벨이 실제 동작하는 모듈입니다.
• @babel/preset-env: 바벨의 지원 스펙을 지정합니다.
• babel-loader: 웹팩(Webpack) 지원을 위해 사용합니다.

$ npm i -D @babel/core @babel/preset-env babel-loader

EsLint

'EsLint' 코드 품질과 코딩 스타일의 문제를 식별하기 위한 정적 코드 분석 도구입니다.

npm i -D eslint babel-eslint eslint-config-standard  eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
 // wepack-cli 설치 명령어 입니다.

render function 동작 Es6 문법 간소화

//h = hyperscriptd의 약어로 html 구조를 생성하는 스크립트의 의미 Virtual DoM 구현에서 관행적으로 사용
render: h=> h(App)

 

총 세 가지를 설치를 하였으며 자세한 내용 따로 빼놓았습니다. 그리고 지금은 현재  공부하는 과정이며, 

혼자 공부하면서 몰랐던 부분을 저장과 기록을 채워놓을 예정입니다

현재 몰랐던 부분들 정리 요약본 입니다.

1.Wepack-Cli 사용도를 몰랐습니다 설치 과정을 하면서 알게 되었습니다.

2. 의존성과 개발용 의존성 차이점 

3.Babel의 사용도  빈도를 알았습니다. 

4.render function 동작 ES6 문법 간소화 

5.Vue 문서화 찾는요령