Webpack과 Babel
웹팩
“웹팩은 번들러다”
번들 Bundle… 개발을 하다보면 많이 들어봤을 단어다. 우선 웹팩이 번들링을 해주는 번들러라고 하니, 번들링이 무엇인지부터 알아보도록 하자.
번들링
번들링은 위의 사진에서도 확인할 수 있듯, 하나로 묶어준다는 뜻을 갖는다.
그렇다면 무엇을 묶어준다는 것일까?
우리는 개발을 하다보면 자바스크립트 파일을 여러개로 나눠서 작업을 한다던지, 리액트에서 여러개의 컴포넌트를 만들어 관리 및 사용한다던지 하는 경우가 많다(모듈화). 이럴 때, 분리된 컴포넌트 또는 자바스크립트 파일들, css파일 등을 하나로 묶어주는 행위를 우리는 “번들링”이라고 한다.
즉, 모듈화 되어 분산된 파일들을 하나로 묶어주는 것이 번들링인 것이다.
번들링은 왜 필요할까?
번들링이 필요한 이유는 결국 효율성과 성능 향상 때문이다. 만약 JS 파일들이 여러개로 분리된 상태로 배포를 하게 된다면, 클라이언트는 서버에 분산된 각기 각각의 파일들에 대한 요청을 해줘야 할 것이다. 하지만, 필요한 묶음 단위로 파일들을 번들링 해둔다면, 우리는 비효율적인 서버 요청을 지양할 수 있다.
뿐만 아니라, 파일이 분산되어 있을 때에는 같은 이름의 변수나 함수가 사용됐더라도 곧바로 오류가 발생하지 않아 이를 발견하지 못할 수도 있다. 따라서 번들링을 통해 배포 전에 이러한 에러 가능성을 잡아낼 수도 있는 것이다.
결국 다시, 웹팩은 이러한 번들링을 수행해주는 매우 강력한 하나의 툴이다.
바벨
바벨은 “트랜스파일러”다.
트랜스파일러?
트랜스파일링이란, 타입스크립트 → 자바스크립트 코드로 변환되듯이, 완전히 다른 언어가 어떤 특정 언어로 변환되는 것이 아닌, 비슷한 언어로 변환되는 것을 의미한다.
트랜스파일링이 필요한 이유는, 결국 호환성 때문이다. 세상 사람들은 다양한 브라우저와 다양한 버전의 브라우저를 사용한다. 이 때문에 특정 유저는 ES6가 호환되는 브라우저를 사용하고 있을 수 있지만, 어떤 유저는 ES5도 호환되지 않는 구형 브라우저를 사용하고 있을 수도 있다.
이러한 이유 때문에 우리는 우리가 작성한 코드가 다양한 브라우저에서 호환될 수 있도록 버전을 낮춰줘야 한다. 즉, 개발을 할 때는 최신 버전의 코드로 작성을 하되, 배포 단계에서는 내가 작성한 코드의 버전을 낮춰줘야 한다는 것이다.
그런데… 이를 사람이 하나하나 고쳐나가는 것은 거의 불가능에 가깝고 굉장히 비효율적이다. 따라서, 이 때문에 바벨이라는 트랜스파일러가 등장하게 된 것이다!
바벨은 위의 사진과 같이, 최신 버전의 자바스크립트로 작성된 코드를
호환성이 높은 하위 버전의 코드로 변환해준다.
우리는 바벨의 강력한 트랜스파일링 기능을 통해, 브라우저 호환성을 높여줄 수 있는 것이다.
참조한 자료
[webpack] 2) 번들링(Bundling) 개념 및 사용 이유