번들링과 웹팩

번들링(Bundling)

번들이란 묶는다는 뜻으로 뭔가를 묶는 작업이라는 것을 이름에서 유추할 수 있습니다. 

번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈이란 분리된 파일입니다.

 

그렇다면 파일을 모듈로 분리한 이유는 무엇일까요? 그것은 작업의 효율성을 위해서입니다. 스크립트의 크기가 점점 커지고 복잡해지면서 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡하기 때문입니다. 그렇기 때문에 머리, 가슴, 팔, 다리를 따로 떼어서 모듈로서 작업을 할 필요가 생겼습니다.

 

분리된 모듈들은 연계성을 띄어야하기 때문에 모듈 내부에는 import로 외부 모듈의 기능을 가져오고 export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보냅니다.

 

모듈 import와 export 외에도 번들링이 필요한 이유는 여러개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하 될 수 있고 모듈 간의 변수 충돌 등의 위험성이 존재하기 때문입니다.

 

번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는 도구를 의미합니다.

번들러를 사용하게 되면, 아래와 같은 장점등을 얻습니다.

1. 모듈 단위의 코드 작성

2. 네트워크 병목 완화 (최적화)

3. 웹 개발 작업 자동화

 

번들러에는 우리가 아는 웹팩(Webpack)부터 Rollup, Parcel, Browserify 등이 있습니다.

 

웹팩(Webpack)

웹팩은 프론트엔드 프레임워크에서 가장 대중적인 모듈 번들러입니다. 웹팩이 가장 유명한 이유는 우수한 성능 때문입니다. 모듈화 작업을 하는 방식에는 CommonJS, AMD, UMD, ES6 모듈 등같은 모듈 명세들이 다양하게 존재하는데 웹팩은 이 모두를 지원합니다. 또한 파일 분할 기능이 있어서 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다. 뿐만 아니라 CSS 로더의 기능과 리액트의 JSX 변환 작업도 해주기 때문에 모던 자바스크립트 개발을 할 때 상당히 유용합니다.

 

이러한 장점 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에는 웹팩을 사용하는 것이 좋습니다. 

transpile

자바스크립트는 ES5, ES6, ES7 등 매번 새로운 스펙이 등장합니다. 그러나 어떤 브라우저는 호환성의 문제로 자바스크립트의 업데이트에 빠르게 발맞춰 진행할 수 없습니다. 그렇기에 최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시키는 과정이 필요합니다. 이 과정을 transpile이라고 합니다.

웹팩은 이러한 에버그린(Evergreen) 브라우저(최신 스펙의 자바스크립트 코드가 호환이 가능한 브라우저)가 될 수 있도록 돕습니다. 웹팩 안의 babel이라는 transpiler가 이에 해당합니다.

compile과 다릅니다: compile은 한 언어로 작성된 코드를 다른 언어로 변환합니다.