'번들링'이란 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다.
개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.
번들링의 의미
프로그래밍을 하다보면 자주 마주치는 단어 중에 번들링이란 단어가 있습니다. 번들이라는 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 걸 이름에서 유추할 수가 있죠. 그렇다면 이게 당연히 파일을 묶는 것일테고 어째서 파일을 묶는 작업이 필요한걸까 생각해 볼 수 있습니다.
정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈(module)이란 분리된 파일입니다. 즉, 분리된 파일들을 하나로 합쳐주는 작업라고 할 수 있습니다.
번들링을 왜 사용하는 걸까?
그렇다면 왜 파일을 모듈 별로 분리했던 걸까요? 그건 '작업의 효율성'을 위해서입니다.
스크립트의 크기가 점점 커지고 복잡해지면서 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡성이 너무 높기 때문입니다.
그렇기 때문에 하나의 파일을 별도의 파일들로 분리하여 모듈로서 작업을 할 필요성을 가지게 되었습니다.
이때, 다른 모듈들과의 연계성을 당연히 띄어야하기 때문에 모듈 내부에는 import로 외부 모듈의 기능을 가져오고 export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보냅니다.
Q. 그렇다면 번들링이라는 과정 없이 모듈간에 import와 export만 하면 되지 않나요? 🤔
A1. 여러 개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다.
A2. 모듈 간의 변수 충돌 등의 위험성이 존재합니다.
이러한 이유 때문에 각각의 분리된 자바스크립트(꼭 자바스크립트에 한정되지는 않습니다)를 모아서 묶어주는 작업을 하는 게 번들링입니다.
이 외에 번들링을 하는 이유는 다음과 같이 정리할 수 있습니다.
- 파일 크기 문제 해결 : 코드를 '번들링'한다는 것은 단순히 묶기만 하는 것이 아니라 컴퓨터 파일을 '압축'하는 개념과 비슷하다.
번들 파일은 번들링을 거치지 않은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다. - 애플리케이션 임의 조작 방지 : 압축한 파일을 받아와 압축해제 전까지는 파일을 조작할 수 없는 것처럼, 번들링된 웹 애플리케이션도 사용자가 임의로 조작할 수 없다. 번들링되지 않은 원본 코드에 사용자가 접근할 수 있다면, 컴퓨터를 잘 아는 사용자가 이를 원하는 대로 조작할 위험이 생긴다.
- 파일 단위의 Js 모듈 관리의 필요성 : Javascript에서 변수는 기본적으로 '전역 범위'를 가지기 때문에 하나의 프로젝프 폴더에서 여러 개의 .js 파일이 있더라도 서로 변수를 공유하게 된다. 근데 여기서 변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러를 번들링 도구인 Webpack에서는 모듈 번들링으로 해결한다.
번들링 도구의 종류
번들링 도구들은 RequireJS, Browserify, Rollup, Parcel 등이 있습니다. 하지만 가장 많이 쓰이는 건 역시 Webpack입니다.
번들링 도구라고해서 하는 작업은 다 비슷할 텐데 왜 Webpack이 인기를 끄는 걸까요? 그건 웹팩의 우수한 성능 때문입니다.
모듈화 작업을 하는 방식에는 CommonJS, AMD, UMD, ES6 모듈 등같은 모듈 명세들이 다양하게 존재합니다. 웹팩은 이 모두를 지원해주죠. 그리고 파일 분할 기능이 있어서 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다. 뿐만 아니라 CSS 로더의 기능과 리액트의 JSX 변환 작업도 해주기 때문에 모던 자바스크립트 개발을 할 때 상당히 유용합니다.
이런 장점 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에는 웹 팩을 사용하는 것이 좋습니다.
참고 :
[Web] 🗂프론트엔드에서 번들링이란? / 🛠Webpack
↑ 위 사진은 초등학교 입학을 위한 제품 번들이다. 이런식으로 어떤 제품을 묶음으로 판매하는 것을 '번들링'한다고 한다.그럼 웹 개발을 할 때 '번들링'을 한다고 하면 무슨 의미일까?(참고로
velog.io
번들링(Bundling)이란?
번들링(Bundling) 프로그래밍을 하다보면 자주 마주치는 단어 중에 번들링이란 단어가 있습니다. 번들이라는 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 걸 이름에서 유추할 수가 있죠. 그렇다
lihano.tistory.com
'HTML&CSS&Javascript > JS' 카테고리의 다른 글
| [JS Deep Dive] 42. 비동기 프로그래밍 (0) | 2023.04.29 |
|---|---|
| [JS Deep Dive] 41. 타이머 (0) | 2023.04.25 |
| [Javascript] 변수의 Type(원시형과 참조형) (0) | 2023.03.22 |
| [JS] 자바스크립트 배열의 slice()와 splice() 함수 (0) | 2023.03.13 |
| [JS Deep Dive] 40. Event Part 2 (0) | 2023.03.06 |