오늘은 Bundler!! 사실 예전에 친한친구가 Bundler와 Webpack에 대해 설명해준적이 있었다.
그런데 그땐 서버에서 js, html 파일이 어떤식으로 전달되는지 잘 몰라서 이해하기 힘들었다..
지금은 어떻게 js파일들이 옮겨지는지 (csr,ssr,http, tcp/ip, network 등을 학습한 결과) Bundler가 왜 필요하고 왜 React의 CRA boilerplate가 좋은지 알 수 있게 되었다!! 오늘은 그 내용을 정리해 보겠다.
번들러(Bundler) ❓
bundle은 묶음이라는 뜻이다. 그럼 bundler는? 묶어주는 무언가 ?
bundler: 여러개의 파일을 하나로 묶어주는 도구
보통은 module bundler라고한다.
필자는 Vanilla Js를 활용해 여러 토이 프로젝트를 실행한 경험이 있다. 이때 모듈화해서 개발을 했었는데 실제 그때 필자가 했던 모듈화 개발은 사실 절반만 성공한 것이다.
왜냐하면 각 js 파일을 불러올 때 각 파일의 개수만큼 통신을 해야하는 웹 페이지 였기 때문이다.
그럼 왜 번들러(Bundler)를 사용할까 ❓
여기에는 크게 2가지 이유가 있다.
1. 중복된 변수명으로 인한 오류
예를 들어 다음과 같은 코드가 있다고 해보자
//html
~~~~~
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
<script>import number "a.js"<script/>
<script>import number "b.js"<script/>
<script>import number "c.js"<script/>
<script>
console.log(a)
<script/>
</head>
<body>
</body>
</html>
// a.js
let number = 10
// b.js
let number =20
// c.js
let number = 30
이렇게 됐을 때 결과값은 ??
=> 30 만 출력이 된다.
이렇게 동일한 변수명이 실수로 섞였을 경우 마지막에 겹쳐진 js파일의 변수명만을 기억하고 출력하게 된다.
2. 파일 전송의 문제(JS)
일단 js파일을 모듈화해서 개발했다고 하더라도 번들러를 사용하지 않으면 서버에 무리가 갈 수 있다.
예를들어 js 파일이 한 100개정도가 있고 이를 번들링하지 않는다면? 100개의 js파일을 브라우저는 불러와야하고 이에 웹 페이지를 로딩하는데 많은 시간이 걸릴 수 있다.
//html
~~~~~
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
<script>import number "a.js"<script/>
<script>import number "b.js"<script/>
<script>import number "c.js"<script/>
<script>
console.log(number_a)
console.log(number_b)
console.log(number_c)
<script/>
</head>
<body>
</body>
</html>
// a.js
let number_a = 10
// b.js
let number_b =20
// c.js
let number_c = 30
위 결과는
10, 20, 30 출력
이 되겠지만 내부 네트워크를 살려보면 다음과 같다.
이를 개선하고 js파일을 가져오는데 시간을 감소시켜주는 것이 bundler이다.
bundler의 종류 ❓
webpack, parcel 등이 있다.
React의 CRA boilerplate가 좋은 이유 추가 ❗️
React는 이러한 Webpack설정을 따로 해주지 않아도 자동으로 해준다. 즉, 번들링을 개발자가 따로 손대지 않아도 알아서 번들링 작업을 처리해 네트워킹의 부담을 줄여준다.
머기업에서는 이러한 webpack설정를 한번 더 건들여서 고도의 최적화를 의도한다고한다!!
(친구찬스로부터 얻은 정보)
이런 경험도 해보고 싶다.. 프로젝트의 규모가 클 수 록 js파일이 늘어날테니 더욱 js파일을 잘 묶어서 network통신을 하는게 맞을 것이다!!
정리
Bundler는 여러개의 파일을 하나로 묶어서 네트워킹을 통한 간단한 파일 교환이 가능하도록 하는 장치이다.
React는 Webpack이라는 번들러를 사용하는데 이는 CRA bolierplate에서 자동 설정을 해주어서 따로 만져주지 않아도 bundling이 가능하다 !
