모듈 번들러의 필요성과 기본 개념
모듈 번들러는 "왜" 쓰는 걸까요?
모듈 번들러가 하는 일, 그리고 모듈 번들러를 사용하는 이유
웹사이트를 만들기 위해선 HTML, CSS, JavaScript 이렇게 단 3가지의 재료만 있어도 가능하기는 합니다. 하지만 이렇게 순수하게 3가지 재료만 가지고 웹사이트를 만드는 경우는 거의 없죠?
HTML은 React나 Vue.js 등의 프레임워크로 대체되고, CSS는 Sass 같은 전처리기로 대체되곤 합니다. 그리고 JavaScript 대신 TypeScript를 사용하기도 하죠. 이뿐만이 아닙니다. 우리는 여기에 Firebase, Lodash 등 다양한 써드 파티 모듈(3rd party modules)까지 추가해서 사용합니다.
대부분의 디펜던시(dependency)들이 CommonJS 방식을 사용할텐데, 이는 ES6 모듈 문법과 맞지 않아 에러가 발생할 것입니다. 만약 이런 고비들을 넘기고 파일이 동작하도록 어찌저찌 만들더라도, 자바스크립트 파일이 엄청나게 거대해져서 로딩 시간도 오래 걸릴 것입니다. 로딩 시간을 합리적인 수준(통상 3초라고 하네요...)으로 줄이기 위해 코드 파일을 chunk로 쪼개어야 할테고, 구형 브라우저(legacy browser)에서도 코드가 돌아가도록 하기 위해 폴리필(polypill)도 추가해야 할 것입니다.
폴리필
웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.
https://velog.io/@katanazero86/polyfill%ED%8F%B4%EB%A6%AC%ED%95%84-%EC%9D%B4%EB%9E%80
다행스럽게도 모듈 번들러가 이러한 번거로운 과정을 훨씬 덜 번거롭게 해줍니다. 모듈 번들러가 근본적으로 하는 일은 다수의 자바스크립트 파일과 그 밖의 써드 파티 모듈들을 가지고 브라우저에서 로드되는 하나의 커다란 자바스크립트 파일(즉 자바스크립트 번들)로 만드는 것입니다. 이 과정에서 Webpack과 같은 번들러들은 의존성을 분석하여(즉 모듈들 각자의 dependency들까지 고려해서) 이 모든 것을 어떻게 하나의 파일로 만들지에 대한 dependency 그래프를 생성합니다. 우리는 그저 진입점(entry point)만 지정해놓으면 됩니다. 그러면 Webpack은 이 진입점부터 시작해서 파일들을 하나의 번들 파일로 만들어냅니다.
결국 우리가 모듈 번들러를 사용하는 이유는 모듈 시스템을 편리하게 구성하고 관리하기 위함이라고 할 수 있겠네요. 그리고 ES6+ 코드에 대한 구형 브라우저 호환성 문제에 있어서는 트랜스컴파일러인 Babel을 사용하면 직접 폴리필을 작성할 필요 없이 코드를 변환할 수 있습니다.
Parcel과 Webpack의 비교
Parcel 번들러
npm : parcel plugin static files copy
staticFiles 옵션 넣는 이유
"static"이라는 이름의 폴더를 parcel패키지가 dist폴더로 복붙한다.
*개발서버에서는 dist폴더 내에 있는 index.html이 작동한다.
favicon과 같은 파일은 dist폴더 내에 index.html파일 근처에
있어야 하기 때문에 파일 이동이 불가피한데
이때 dist폴더에 그냥 넣으면 dist파일은 언제든지 삭제될 수 있으며
gitignore대상이 될 수 있어 리스크가 크다.
static files copy 플러그인은 말그대로 이미지와 같은 정적 파일들을
복사 붙여넣기 해주는 기능이다.
옵션에서 지정한 폴더(여기서는 static)에 해당 파일을 옮겨 담으면
원본은 static폴더 안에서 보존되면서 dist파일에는 자동 붙여넣기가 된다.
엔진
웹브라우저가 구동하기 위해 사용하는 것(자동차 엔진이랑 똑같은 개념)
문제는 이 엔진(=브라우저)가 새로운 문법이 나올때마다 바로바로 반영X
그래서 자바스크립트는 계속발전하는 언어임에도 엔진에서 새로운 문법을 반영해주지 않으면
사용자체를 못하게 되는 불상사가 일어남
(ex: 크롬에서 잘 돌아가던게 IE에서는 에러.. IE엔진에도 맞도록
중간에 어떤 역할을 할 수 있는 걸 넣어주어야 함 -> 바벨
컴파일
한 언어로 작성된 코드를 다른 언어로 변환
트랜스파일 : 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환
https://ideveloper2.tistory.com/166
Babel
트랜스파일러+폴리필 역할
- 프레임워크를 사용하다보면 Webpack, Parcel, Gulp와 같은 빌드 시스템을 이용하게 됨.
웹팩과 같은 빌드 시스템은 코드가 수정될때마다 자동으로 트랜스파일러를 동작시켜줌
그런 빌드시스템이 없으면 개발을 다 마치고 나서 코드들을 통합하는데 어려움이 있음 - 새로운 문법이 추가되면 트랜스파일러는 새로운 문법을 구 버전에 맞는 코드로
변경해주는데, 이때 기존 함수를 수정하거나 완전 새로 생긴 스크립트를 폴리필이라고 함
정말로 새로운 기능을 추개해주는 fill in 역할
출처
https://t1.daumcdn.net/cfile/tistory/2443153B57635FC01F
https://ahnanne.tistory.com/7
https://siot0.tistory.com/71
https://velog.io/@hanei100/Parcel-%EC%A0%95%EC%A0%81-%ED%8C%8C%EC%9D%BC-%EC%97%B0%EA%B2%B0
https://code-anthropoid.tistory.com/217
https://msko.tistory.com/23
https://siot0.tistory.com/28?category=1040756
https://www.npmjs.com/package/parcel-plugin-static-files-copy
https://blog.leehov.in/24
