[Vue-Webpack]01-01. Vue, Webpack를 시작하기 전에...

+ 추가 - Vue 기능에 대한 설명은 Vue 공식 홈페이지 번역이 정말 잘 되어 있어요.

 

          - 시중의 책들도 거의다 홈페이지 복사 붙여넣기 정도여서 홈페이지 보고 공부하시길 추천드립니다.

 

Vue는 중국에서 만든 스크립트 언어로 ECMA Script 5 기능을 사용한다.

 

ECMA Script란 쉽게 말하면 Java Script 언어의 버전이라고 생각하면 된다.

 

새로운 버전에 새로운 함수, 기능들이 추가되고 있다.

 

특히 ECMA Script 6에 유용한 추가기능이 많고 Vue에서 많이 사용되므로 정리된 글을 읽어 보시는걸 추천합니다.

 

Java Script가 업데이트 되면 구버전의 브라우저에서 호환에 문제가 생기는 이유는

 

새로운 함수들을 업데이트 하지 않기 때문에 페이지가 정상적으로 작동하지 않게 되기 때문이고

 

Vue Js 역시 구버전의 브라우저에서는 문제가 발생하게 된다.

 

대표적인 예로 Internet Explorer 11 아래 버전이 있고 11버전도 따로 설정을 하지 않으면 오류가 발생한다.

 

ECMA Script에 대해서는 다음 블로그가 정리를 잘해주셔서 링크를 남깁니다.

 

 

 

ECMA Script 2015 (ES6) : https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

 

[JavaScript] ES6 문법 정리

ECMA Script 2016 & 2017 : https://gomugom.github.io/ecmascript-proposals-1-intro/

 

ECMAScript Proposals 1 - ES2016 & ES2017

 

ECMA Script 2018 : https://www.zerocho.com/category/ECMAScript/post/5adae68aca91b1001b14dd29

 

(ECMAScript) ES2018(ES9)의 변화

 

ECMA Script 2019 : https://www.zerocho.com/category/ECMAScript/post/5c909bfe5a8005001ffb3f14

 

(ECMAScript) ES2019(ES10)의 변화

 

 

 

 

 

Webpack은 프로그래밍 한 웹 관련 파일들을 패키징, 묶어주는것으로 이해하면 된다.

 

html, js, css와 같은 파일을 묶어 간단한 파일 목록으로 만들어주는 개념이다.

 

기존의 html에서 js 파일, css 파일을 호출하고 폴더 구조로 관리하는데 

 

Vue에서는 단순한 구조로 관리하게 된다.

 

https://webpack.js.org/

webpack

 

웹팩 페이지에 가면 위와 같은 그림이 보이는데

 

웹 환경에서 사용하는 다양한 파일들의 꼬여있는 관계를 풀어주는 그림으로 이해하면 된다.

 

처음에는 잘 안느껴지는데 프로젝트를 진행하면서 구조에 대해 이해하기 쉬울 것이다.