번들러(Bundler)란?
- 대표적으로 Webpack, Rollup, Parcel 등이 있습니다.
- React 프로젝트 생성을 위해 CRA(Create-React-App)를 사용하면 Webpack과 Babel같은 설정들이 세팅되어져 있습니다.
- 웹 애플리케이션을 구성하는 여러개의 자원들을 하나로 병합, 압축해주는(번들링) 도구입니다.
번들러가 필요한 이유
초기 웹서비스는 규모가 크지 않아 이를 구성하는 파일(HTML, CSS, JS등)의 크기도 지금에 비해 작아 번들러 없이도 서비스를 유지 하는데 무리가 없었습니다.
하지만 웹서비스의 복잡도가 증가하면서 수십 수백개의 JS 파일을 다루면서 문제들이 발생했습니다.
문제들은 다음과 같습니다.
중복된 이름으로 인한 에러
자바스크립트의 변수는 기본적으로 전역 범위를 갖습니다.
// --- app.js
var num = 10;
function getNum() {
console.log(num);}
}
// --- main.js
var num = 20;
// --- index.html
<html>
...
<script src="./app.js"></script>
<script src="./main.js"></script>
<script>
getNum(); // 20
</script>
...
</html>
app.js에서 선언한 변수 num은 main.js에서 재할당 됩니다. 복잡한 애플리케이션 개발 시 변수 또는 함수명이 중복되면 의도치 않은 결과를 만들어낼 수 있습니다.
위와 같은 문제를 해결하기 위해 파일 단위로 관리할 수 있게 하는 모듈을 이용합니다.
"그러면 모듈을 이용하면 그만이지, 번들러를 사용해야 하는 이유가 있나요?" 라고 생각한다면,
이에 대한 의문은 아래에서 해결 할 수 있습니다.
파일 전송 문제
유저가 페이지를 요청하면 해당 파일을 서버로부터 가져옵니다.
이 때 웹 애플리케이션을 구성하는 파일의 양이 많다면 사용자의 요청에 응답하는 시간이 길어집니다.
*만약 1개의 파일을 요청하고 응답하는데 1초가 걸린다면, 1000개의 파일은 1000초가 걸리겠네요.
그래서 파일을 나누어 요청받지 않고 하나로 합쳐 전송하기 위해 ‘번들러’가 등장했습니다.
번들러의 기능
- 애플리케이션에 필요한 모든 종류의 파일들을 최소한의 파일 묶음(번들)으로 만들어줍니다.
- 여러 파일을 최적화 해서 하나의 파일로 묶어주기 때문에 네트워크 병목 현상을 줄여줄 수 있습니다.
- 자바스크립트 파일을 외부에서 알아보기 힘들게 코드를 변환하는 작업(Uglyfy: 난독화)을 합니다.
- 최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있게 ES5 문법으로 변환(Transpile)합니다.
- 다양한 서드파티 기능 이용이 가능합니다.
- Webpack의 경우 Babel-loader와 같은 다양한 로더를 이용해서 모던자바스크립트나, SASS등을 사용할 수 있습니다.
[참고자료]
'Javascript' 카테고리의 다른 글
| 이벤트 전파 제어 (0) | 2024.04.12 |
|---|---|
| 함수형프로그래밍 (0) | 2024.04.11 |
| 프로미스와 Async / await (0) | 2024.04.11 |
| 프로토타입 (1) | 2024.04.11 |
| 원시 / 참조 타입 (0) | 2024.04.11 |