번들러(Bundler)

Webpack: Module Bundler

번들러를 써야하는 이유

웹사이트의 규모가 커짐에 따라 파일 하나에 담기는 코드의 양과 웹을 구성하는 파일의 수가 늘어나게 되고, 이에 따라 전역 스코프에서 선언 및 할당된 함수, 변수 등이 충돌되는 상황이 발생하거나, 데이터를 전송하는 속도가 오래 걸려 사용자의 불편이 가중되었다.

모듈 번들러(Module Bundler)

최근의 웹사이트는 모듈 번들러를 이용하여 위와 같은 문제를 해결하고 있다. 여러개의 파일을 하나로 묶어주는 번들러로는 webpack parcel rollup 등이 있으며, 가장 많이 사용되는 번들러는 웹팩webpack이다.

Webpack이란?

• 현대 자바스크립트 어플리케이션의 Static Module Bundler로, Dependencies Graph를 통해 필요한 형태의 Bundle을 생성해준다.
  Bundle: 소프트웨어 및 일부 하드웨어와 작동하는데 필요한 모든 것을 포함하는 Package

Webpack의 번들링 Flow

• export 및 import 를 통해 의존관계를 활용하여 코드를 작성하면, 번들러가 해당 코드를 분석하여 각각의 모듈로 통합하여 더욱 빠르고 효율적인 실행이 가능한 형태로 변환을 해준다.

Webpack, Bundler를 사용했을 때의 장점

1. 네트워크 병목현상 개선

• 개별 파일마다 서버에 요청하여 에셋을 요청해왔던 방식에서 나아가 같은 타입(html, css, js, img)의 파일들을 묶어서 요청/응답할 수 있게 되어 네트워크 리소스 절감이 가능하다.

2. 미사용 코드 제거

• 여러 개의 파일을 묶어 하나의 번들로 만들 때 파일끼리의 연관관계를 번들러가 자체적으로 확인하여 빌드하므로, 사용하지 않은 파일들은 자동으로 제거되어 보다 효율적인 소스 관리가 가능하다.

3. 모듈 단위 코딩

• 번들러를 사용하면 모듈 단위 코딩이 가능하다. 각 모듈별로 독립된 스코프를 가지므로, 앞서 번들러를 사용해야하는 이유로 꼽았던 문제점인 중복 네이밍으로 인한 변수, 함수 등의 충돌 현상을 방지할 수 있으며, 코드의 가독성을 높이고 유지보수가 용이한 형태로 작업할 수 있어 개발경험 측면에서도 장점을 가진다.

4. ES6 버전 이상의 문법 활용 가능

• Webpack은 babel-loader를 통해서 일부 브라우저에서 지원하지 않는 ES6 문법의 자바스크립트 코드를 ES5버전의 코드로 트랜스파일하여 더많은 브라우저에서 ES6 문법으로 작성된 코드가 동작하도록 도와준다.

5. SASS, SCSS 등의 CSS 전처리기 활용 가능

• 바벨로더 외에도 style-loader sass-loader css-loader 등의 로더 사용이 가능하기 때문에, SASS를 CSS로 컴파일하여 사용할 수 있게 된다.

Babel : Transpiler, Compiler

• ES6 -> ES5 문법으로의 컴파일 진행
• 일부 브라우저에서 지원하지않는 ES6 문법을 ES5 문법으로 함수를 재작성하여 트랜스파일한다. 이때 미지원 문법으로 작성된 코드를 제거하고 대신 새롭게 ES5 문법으로 작성된 코드들을 Polyfill이라고 한다.