말 그대로 현대적인 Javascript 다.
대개 ES2015 버전 이후의 Javascript를 이야기한다.
개인적으로는 ES2015의 모듈시스템 지원 이 현대적인 Javascript 라고 불리게 된 가장 큰 이유같다.
프론트엔드환경이 복잡해진 이유
javascript는 UI 간단한 조작을위해 만들어진 언어였기에 다양한 기능을 만들 수 있는 준비가 되어있지않았다. 대표적인 예로 앞서 말한것처럼 ES2015 전에는 모듈이라는 스펙이 없었다.
그러나 웹 앱의 런타임인 브라우저의 성능이 좋아지면서 자연스레 웹이 다양한 기능을 처리하게되고 규모가 커져갔다. 자연스레 코드의 양은 많아졌고 웹앱은 복잡해져갔다.
많아진 코드의 양을 분리하기위해 모듈화가 필요해졌고, 이와 동시에 새로운 런타임인 nodejs와 npm 으로 이루어지는 생태계의 등장과 맞물리면서 복잡도는 더 높아졌다.
모듈이란?
파일과 파일간 서로의 기능을 사용하기위해 불러서 사용하는 기능이다.
이것도 모듈 아닌가요?
<script src="a.js" />
<script src="b.js" />script태그와 헷갈리지말자.
script태그는 Javascript 시스템이 아닌 HTML에서 지원해주는 기능이다.
ES2015 이전에는 Javascript 파일에서 또다른 Javascript파일을 불러드리는건 불가능했다.
그러나 ES2015의 모듈시스템(import/export)을 바로 웹 앱에 적용하기엔 무리가있다.
런타임인 브라우저마다 호환하는 javascript의 스펙이 다르기때문이다.
번들러의 등장
Javascript의 브라우저 호환이라는 문제를 해결하기 위해 등장한 프로그램이다.
nodejs가 등장하면서, 일반 OS위에서 Javascript의 실행이 가능해졌다.
개발자들은 javascript를 이용해 다양한 툴들을 쉽게 개발, 배포할 수 있게됐다.
이렇게 개발된 다양한 툴 중 하나가 "번들러"다.
번들러가 하는 가장 큰 일은 모듈스펙을 사용하는 Javascript의 구문들을 해석해서 하나의 파일로 합쳐준다.
번들러를 이용하면 모듈을 사용해 개발한 웹 애플리케이션을 모듈스펙을 지원하지않는 브라우저에서 동작시킬 수 있게된다.
