6 ES6 for Vue.js - 오리엔테이션

source: categories/study/vue-beginner-lv2/vue-beginner-lv2_6.md

6.1 ES6 강의 개요 및 목표 소개

개요

ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습
const & let, Arrow Function, Enhanced Object Literals, Modules 학습

6.2 ES6 배경과 Babel 소개

ES6란?

ECMAScript 2015와 동일한 용어
2015년은 ES5(2009년)이래로 진행한 첫 메이저 업데이트가 승인된 해
최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식
ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음

Babel

구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요
ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }
    ]
}
  

vue-cli를 통해 vue 프로젝트 환경을 만들면 webpack을 크게 신경쓰지 않아도 되지만, 그리고 따로 설정할 필요는 없지만, 위와 같은 webpack의 코드를 통해 바벨이 설정되고, 트랜스파일링을 한다는 점, 알아두시는 것이 좋습니다.

hyungju-lee

master