이 글은 webpack과 babel의 세팅 방법에 대해 적은 글이 아니다.
webpack과 bebel을 왜 사용하는지 목적에 대해서 이해하기 위한 글이다.
왜 webpack과 bebel을 사용할까?
일단 시작하기 전에 위에 사이트를 들어가서 확인해보자 ECMAScript 버전 별로 지원하는 문법을 브라우저별로 정리한 사이트이다.
자세히보면 ES6를 대부분 브라우저에서 지원하지만 100%는 아니다.
그리고 당연하게 서비스가 종료된 IE 브라우저는 대부분의 ES6를 지원하지 않는다.
그러므로 나는 최신 문법을 사용해서 편하고 빠르게 개발을 하고 싶은데 예전 버전의 브라우저까지는 최신 문법이 지원되지 않는 경우가 발생할 수 있다.
이 방법을 해결하기 위해서 최신 문법을 포기하고 예전에 사용하던 문법으로 작성을 하면 작업 속도도 느려지고 직접 해당 문법이 몇 버전 브라우저까지 동작하는지 확인해야 하므로 효율적인 방법이 아니다.
이런 문제를 해결하기 위해서 Babel이 나오게 됐다.
Babel 이란?
그럼 이번엔 babel이 먼지를 얘기해보자.
Babel is a JavaScript compiler
babel 공식 홈페이지에 나와있는 babel에 대한 설명이다.
즉 최신 문법으로 작성한 javascript 코드를 미리 설정한 설정대로 예전 버전의 javascript 코드로 컴파일 해주는 아이이기 때문이다.
이 작업은 우리가 작성한 코드를 배포하기 위해서 build할 때 자동으로 예전 버전의 브라우저까지 모두 호환이 가능한 javascript로 변환이 이루어진다.
추가적으로 babel은 ES6말고도 ES7, JSX, Polyfill, TypeScript등의 컴파일이 지원된다.
추가적으로 ES6 문법인 Promise, async, Arrow Function, class, set, map 등의 문법들은 바벨에 의해서 컴파일이 되거나 되지 않는게 존재한다.
Polyfill이란 머지?
모든 문법을 컴파일 해주지 않기 때문에 해결방법으로 사용되는게 Polyfill이다.
그럼 polyfill은 무엇일까?
polyfill은 기본적으로 지원하지 않는 코드를 제공하는 js 코드 뭉치라고 이해하면 쉽다.
즉 지원하지 않는 코드를 사용가능한 코드 조각이나 추가기능을 지원해서 예전 버전에서 지원하지 않는 문법의 코드를 제공 해줘서 정상적으로 ES6 문법을 컴파일한 결과인 ES5가 동작하도록 도와주는 코드이다.
Webpack 이란?
webpack에 대해서 설명하기 전에 일단 모듈에 대해서 얘기하면 좋을꺼 같다.
보통 우리는 js 파일을 작성할때 하나의 파일에서 모든 코드를 작성하는게 아닌 개발을 편리하게 하기 위해서 파일을 여러개 만들어서 개발을 한다.
하지만 이 방법은 서버에서 js를 받아올때 파일 별로 받아오기 때문에 네트워크의 비용도 증가하고 사용자가 웹 어플리케이션을 사용할때 로딩시간도 길어져서 사용자의 경험부분에도 매우 부정적일 수 있다.
그럼 개발의 편의성을 위해 모듈로 분리해서 개발이 가능하고 위와 같은 네트워크 비용을 줄이는 방법은 멀까?
결론부터 말하면 webpack이 가능하다. webpack은 개발할때는 모듈로 분리해서 개발을 진행하고 배포할때 즉 build를 할때 모든 js 파일들을 하나의 bundle.js 파일로 번들링을 시켜 배포시키는 모듈 번들러다.
이를 통해서 서버에서 js 파일을 받아올때 하나의 bundle.js 파일만 받아오기 때문에 네트워크 비용측면에서 매우 효율적으로 서비스를 운영할 수 있게 됐다.
추가적으로 webpack에서 지원하는 플러그인들을 다운받으면 html,css,font,image들을 마찬가지로 번들링 할 수도 있다.
마무리
기존에는 React로 프로젝트를 진행할 때는 babel과 webpack이 자동으로 세팅이 되어져 있는 상태로 만들어졌기 때문에 왜 필요한지에 대한 이해없이 사용하고 있었다.
이번에 직접 babel과 webpack을 세팅 해보면서 각각의 플러그인이 어떤 이유에서 사용되는지 그리고 babel이 webpack의 사용이유와 목적이 어떤건지에 대해서 깊게 공부할 수 있는 시간이였다.
