bundleTranspiler.md

Bundle

• 영어사전에서는 묶음이라는 뜻으로, 여러개의 제품을 묶어 하나의 꾸러미로 만들어진 제품을 가리킨다.
• 컴퓨터를 구입할 때 많이 듣게 되는데, 이때는 기계장치인 하드웨어를 구입할 때 함께 제공되는 소프트웨어, 즉 번들 소프트웨어를 뜻함

Bundling

• 번들링이란 기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 한다.
• 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업

Q. 모듈끼리 import하고 export하면 되지 번들링을 해야해?

• 여러 개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다.

• 모듈 간의 변수 충돌 등의 위험성이 존재합니다.

• 프로젝트가 커져가면서 JavaScript 파일들을 여러 개로 나누어 관리하게 되었고, 웹에서 파일을 다운받을 때 여러 개로 나누어서 다운받는 속도보다 하나로 뭉쳐서 다운받는 것이 훨씬 빠르기 때문에, 작업 할 때는 여러개로 나누어서 작업하고 최종적으로 웹서버에 올릴 때는 하나의 파일로 압축하여 올리게 된 것이 시초.

• 점점 발전하면서 단순히 파일만 합치는 과정 뿐만이 아니라 CSS Processing과 이미지 최적화 등 다양하게 확장.

Webpack

• 제일 많이 사용하는 번들링 도구

Tree Shaking

• 번들링과정에서 실제로 사용하지 않는 함수들이나 모듈들까지 같이 팩킹되는데, 팩킹 전에 사용하지 않는 함수와 모듈들을 떨쳐내어 최종 결과물을 컴팩트하게 만드는 것.

---

TransPiler

트렌스파일(Transpile)

• 언어 대 언어로 최신 문법을 레거시 문법으로 다시 써주어 구형 디바이스나 브라우저에서도 작동을 할 수 있게끔 해주는 역할.

• 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것

  ES6+ => ES5

트렌스파일 vs 컴파일

컴파일

• 컴파일의 경우, 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것

• 컴파일의 범주안에 트랜스파일이 있음

  Java -> bytecode

  c -> assembly