번들러(The Bundler)

The Bundler

번들러란

• 번들러란 웹개발자가 하위 툴 그룹을 관리하는 데 도움을 주는 도구. 플러그인을 사용하여 하위 툴을 관리하는 meta-tool이라고 생각할 수 있다.

• 번들러가 필요한 이유는 자바스크립트 모듈의 특성때문이다. 원래 브라우저에서는 모듈을 지원하지 않는다. (2017년부터 브라우저에서도 Import를 사용할 수 있지만 단순히 다른 경로의 자바스크립트를 불러오는 기능만 한다) 흔히 import, export 구문으로 모듈 시스템을 활용하는 것은 브라우저가 아닌 자바스크립트 런타임 Node.js 위에서 가능한 일이다.

• 이러한 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용해야 하는데, 번들러는 이 모듈들을 하나의 파일로 묶어(bundle) 브라우저에서 돌아가도록 한다.

  예를 들어 리액트에서는 index.js로부터 시작해서 많은 모듈을 사용하여 연결된 복잡한 구조를 단 하나의 파일로 만들어서 bundle.js와 같은 하나의 자바스크립트 파일을 내놓고, 이를 html에서 스크립트 태그로 불러오는 것이다.

• 번들러를 사용하면 웹개발과 관련해서 특히 아래의 3가지 장점이 있다.

  1. 높은 수준의 언어를 HTML, CSS, JS로 트랜스파일
  2. ad-hoc HTTP 서버에 실시간 reloading과 함께 파일을 서브
  3. 어플리케이션 프로덕션 환경 최적화

번들러의 장점

높은 수준의 언어를 트랜스파일

• 웹 브라우저는 원래 HTML, CSS, 자바스크립트 3가지 언어만 해석할 수 있다. 이 언어들은 W3C, ECMA와 같은 기관에 의해서 스탠다드가 빠르게 진화한다. 그러나 보안과 안정성이 중요한 브라우저는 이 언어들의 스탠다드가 진화하는 만큼 빠르게 바뀔 수 는 없다. 하지만 개발자들은 더 생산적으로 코드를 짜기 위해 새로운 스탠다드를 이용하고자 한다.
• 또한 개발자들은 위 3가지 언어를 더 쉽고 간결하게 하기 위한 언어들을 만들었다. HMTL의 경우 Pug나 Haml, CSS의 경우 Sass, Less가 그렇다. 자바스크립트는 ES6(ECMAScript 2015), TypeScript, CoffeeScript 등이 있다.
• 이렇게 새로운 언어와 기준을 받아들이기 위해서는 브라우저의 직접적 지원이 필수적일까? 아니다. 브라우저가 이해할 수 있는 언어로 변환해주면 된다. (=트랜스파일) 번들러는 이런 일들을 자동적으로 해준다.

ad-hoc HTTP server에 파일을 실시간 리로딩으로 서빙

• 로컬호스트를 사용하여 웹 어플리케이션을 개발하고 있다고 하자. HTML 파일을 수정한 뒤 결과를 브라우저 화면에서 확인하고 싶으면 파일을 저장하고 브라우저를 리로딩해야 한다. 이는 아주 귀찮은 일이므로 누군가 소스파일이 수정되면 자동으로 브라우저를 리로딩해주면 좋겠다.
• 또한 소스파일이 조금씩 수정될 때마다 브라우저가 전체 페이지를 리로딩하는 건 비효율적이다. 수정된 부분 일부만 리렌더링하여 보여주면 좋겠다.
• 자바스크립트 모듈을 사용할 때에 모든 페이지에 모든 모듈이 필요한 건 아니다. 그렇기 때문에 스크린마다 필요한 모듈만 로드된다. 만약 현재 스크린에 필요한 모듈이 수정된다면, 그 때마다 페이지가 리로딩되는 것을 원하지 않는다. 일부 모듈이 변경되었을 때 그 일부 모듈만 리로딩되면 좋겠다.
• 위에 언급된 부분을 번들러가 해결할 수 있다. 인기 있는 번들러는 HTTP Server 플러그인을 가지고 있다. 번들러는 소스파일의 변경사항을 watch 지켜본다. 그래서 파일이 변경되면 전체 페이지를 로딩하거나, 페이지를 리렌더링하거나, 특정 자바스크립트 모듈을 리로딩한다.
• 또한 TypeScript와 같이 높은 수준 언어로 쓰인 파일이 수정되면 브라우저가 리프레쉬되기 전에 트랜스파일이 먼저 진행되어야 하는데, 번들러의 플러그인은 이런 절차가 꼬이지 않게 도와준다.

어플리케이션 프로덕션 환경 최적화

• 우리가 코드를 작성할 때에는 보기 좋게 많은 빈 공간을 사용하며, 긴 변수명과 함수명을 사용한다. 이 형식화는 코드를 작성할 때에는 좋지만 브라우저가 해석할 때는 완전히 불필요한 것이다. 그러므로 브라우저에게 필요하지 않은 부분을 제거할 필요가 있다.(minify)
• 또한 복잡하고 큰 파일을 작성할 때에는 많은 파일과 폴더로 쪼개지기 마련이다. 그러나 프로덕션 환경에서는 여러 개의 작은 파일보다 몇 개의 큰 파일을 다운로드하고 파싱하는 것이 빠르다. 그렇기 때문에 관련된 파일을 몇 개의 파일로 결합하는 과정이 필요하다. (concatenate)
• C++이나 Swift 같은 컴파일 언어는 소스코드 대신 컴파일된 머신코드로 퍼블리싱된다. 그렇기 때문에 다른 사람들이 이 머신코드를 다시 소스코드로 변환하는 작업을 쉽게 할 수 없고, 베낄 수 있는 가능성이 적다. 이와 달리 자바스크립트는 인터프리팅 언어이고 이 소스코드 그대로 유저들의 브라우저에 전송되므로 다른 사람들이 쉽게 볼 수 있고 복사할 수 있다. 이를 방지하기 위해 앱 게시 전에 코드를 일부러 변형 및 암호화하는 것이 필요하다. (uglify)
• 위에 언급된 문제점들을 번들러가 해결해준다. 파일을 축소(minify)하고, 결합(concatenate)하고, 해독이 어렵도록 변형(uglify)해준다.

인기 있는 번들러

• 가장 보편적이고 인기있는 웹 번들러에는 Wepack, Grunt, Gulp 등이 있다.

Ref

• <Beginner’s Guide to Web Development: Supercharge your Productivity with a Bundler> From Medium