ES6란 무엇인가

ES6란

a version of JavaScript

ECMAScript

1. JS를 ECMA International로 표준화를 위해 제출했고 이는 ECMAScript라는 새로운 언어 표준을 탄생시켰다.
2. ECMAScript라는 언어 표준을 활용한 것들 중에 JS가 가장 유명한 구현인 것이다.

그럼 ES란?

	1. **E**CMA**S**CRIPT
    2. ES1 1997 6 
    3. ES2 1998 6 
    4. ES3 1999 12 
    5. ES4 Abandoned
    6. ES5 2009 12
    7. ES6/ ES2015 2015 6
        1. ECMA를 담당하는 committee가 annual update로 하기로 하고 이름을 ES2015로 바꿈.
    8. ES2016 (ES7)
    9. ES2017
    10. ES.Next

Babel transiler

1. 오래된 브라우저는 새로운 feature들을 적응하지 못하는 경우가 많은데 이때 사용되는게 Babel이라는 transpiler이다.

2. webpack configuration에 babel-loader쓰면 바로 사용가능
    1. https://github.com/babel/babel-loader 
    
3. 이게 뭐지 ? 에 대한 대답  https://blog.jakoblind.no/babel-preset-env/

    ```json
    {
      "presets": ["@babel/preset-env"]
    }
    ```

3. babel은 근본적으로 plugin이나 preset위에서 동작하고 그게 없으면 근본적으로 아무것도 하지 않는다.

4. 모든 plugin은 npm에 존재하고 필요할때마다 install해줘야 한다. 예를 들어 arrow function이면

    ```jsx
    npm install --save-dev @babel/plugin-transform-arrow-functions
    ```

    1. 너무 힘들다. 그래서 preset이 필요한 것
    
5. preset
    1. plugin들을 모아서 만들어놓은 것들
    2. 공식적, 비공식적 여러가지 것들이 존재한다.
        1. 공식적인 preset
            1. @babel/preset-env
            2. @babel/preset-flow
            3. @babel/preset-react
            4. @babel/preset-typescript
    3. 각 preset은 NPM dependency가 존재해서 우리가 설치하고 고쳐야됨.
        1. `npm install --save-dev @babel/preset-env`
        
6. 그래서 결론적으로 babel-preset-env란
    1. plugin들이 모여있을 뿐만 아니라 어떤 plugin이 설치되어야 하는지에 대한 controll들도 갖고 있다.
    2. `.browserlistrc` 을 수정해서 Babel에게 어떤 browser를 app이 사용할 것인지를 최적화할 수 있다. 해당 browser를 확실히 알고 있어야 한다.
        1. `not ie all` < internet explorer 지원 끉기
        2. `>0.25%` < 0.25% 점유율보다 높아야 지원
    3. browserslist라는 npm package를 통해서 모든 브라우저 리스트를 가져올 수 있다. https://github.com/browserslist/browserslist