Destructing in ES6 and Babel소개

ES6, ECMAScript6, ES2015+ 모두 같은 말이다.

ECMAScript는 JavaScript이다.->모호한 표현

 

JavaScript와 ECMAScript에는 차이가 있다. 

JavaScript는 ECAMScript의 표준을 따르는 범용 스크립트 언어이고, 다르게 표현하면 ECMA Script는 Javascript의 표준이다. 

 

스크립트 언어는 독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어이다. 

스크립트 언어의 개념을 설명하는 이유는 ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공하기 때문이다. 

 

구형 브라우저와는 호환이 안된다는 단점이 있다. 아직도 윈도우 7을 쓰는 컴퓨터가 많기 때문에 IE 점유율이 상당하다. ES2015+ 문법을 구형 브라우저에서 사용하고 싶으면 ES5 JS 코드를 바꿔주는 도구가 

Babel은 ES6코드를 변환(transpile)해주는 도구이다.

 

 

 undefined라는 것을 JS로 코딩하다 보면 많이 접할 수 있다. 해당 값이 없을 때 나오는 컴파일 에러이다. 

 원인은 다음과 같다.

 objDestructureAlpha라는 key값이 요구되었던 것이 아니고 'alpha'라는 key값에 대한 value를 assign해야 했는데 이상한 key에 값을 넣으려고 하니 에러가 난 것이다.  

 

Babel

 

nodejs-with-babel이란 키워드로 검색하다 보니, ECMAScript6의 문법을 ECMAScript5에서

package.json의 "scripts" 부분에 바벨로 컴파일하는 커맨드 babel ~ 를 기재한다. .babelrc파일을 읽어서 옵션을 적용

 

Babel-polyfill

바벨을 사용하면 새로운 문법을 구형 자바스크립트 문법으로만 바꿔준다. 하지만 ES2015에서 새롭게 등장한

객체(Promise,Map,Set)와 메서드(Array,find, Object.assign)등을 사용할 수 없다. 

npm을 통해 babel-polyfill 패키지를 설치하면 된다.

 

npm install @babel/polyfill 

 

@babel/preset-env

 실행 환경에 대한 정보를 설정해주면 자동으로 필요한 기능을 주입해준다.

 적당한 번들 파일 크기를 유지하면서 폴리필을 빼먹는 실수를 막기 위해 @babel/preset-env 사용이 가장 합리적인 선택이 될 수 있다.