Update 2024-05-01-Bundler.md

_posts/2024-05-01-Bundler.md

@@ -17,6 +17,7 @@ published: true
 
 그러나 번들러의 개념과 동작 원리를 이해하는 것은, 프레임워크나 빌드 도구를 사용할 때 발생할 수 있는 문제를 해결하고, 더 나은 성능과 효율성을 갖춘 애플리케이션을 개발하는 데 중요한 밑바탕이 되므로, 이 글에서 번들러의 기본 개념과 함께 동작 원리를 이해하기 위한 간단한 예제를 살펴보고, 추가로 빌드 도구에 대해서도 알아보자.
 
+<!--
 ## 번들러
 
 웹 개발 초창기, 지금보다 웹의 규모가 작았기에 JS 파일을 단순히 HTML <script> 태그로 연결하는 방식을 사용했다.
@@ -25,7 +26,21 @@ published: true
 > 중복된 파일 이름으로 인한 충돌. <br>
 > 페이지를 구성하는 파일이 많을 수록 네트워크 요청이 많아져 성능 저하.
 
+모듈이란 개념이 등장하였다. 모듈은 코드를 기능 단위로 나누어 재사용성과 유지보수성을 높이는 방식이다. CommonJS와 AMD(Asynchronous Module Definition)와 같은 모듈 시스템이 등장하여 코드의 구조화와 관리가 용이해졌다. 하지만 모듈 시스템을 사용하면 파일이 늘어나고, 이를 브라우저에서 효율적으로 로드하는 것이 문제가 되었다.
+
 이를 해결하기 위해 탄생한 번들러는 JavaScript, CSS 등 여러 개의 파일을 하나의 파일로 묶는 도구로, 코드의 모듈성을 유지하면서도 최적화된 형태로 배포할 수 있게 해준다.
+-->
+
+## 번들러의 이해
+웹 개발 초기에는 웹의 규모가 작았기 때문에, JavaScript 파일을 단순히 HTML의 <script> 태그로 연결하는 방식이 주로 사용되었다. 그러나 시간이 지나면서 각 JavaScript 파일을 개별적으로 로드해야 하는 문제가 발생했으며, 이로 인해 성능 저하, 전역 오염, 의존성 관리의 복잡함 등 여러 어려움이 생겼다.
+
+### 문제점
+* 중복된 파일 이름으로 인한 충돌
+* 페이지를 구성하는 파일 수 증가에 따른 네트워크 요청 증가로 인한 성능 저하
+
+이러한 문제를 해결하기 위해 모듈이라는 개념이 등장했다. 모듈은 코드를 기능 단위로 나누어 재사용성과 유지보수성을 높이는 방식이다. CommonJS와 AMD(Asynchronous Module Definition)와 같은 모듈 시스템은 코드 구조화와 관리의 용이성을 제공하였다. 하지만 모듈 시스템을 사용하면 파일이 늘어나고, 이를 브라우저에서 효율적으로 로드하는 것이 또 다른 문제가 되었다.
+
+이 문제를 해결하기 위해 번들러가 탄생했다. 번들러는 JavaScript, CSS 등 여러 개의 파일을 하나의 파일로 묶어주는 도구로, 코드의 모듈성을 유지하면서도 최적화된 형태로 배포할 수 있게 해준다. 번들러를 사용하면 파일 수를 줄여 네트워크 요청을 최소화하고, 성능을 향상시킬 수 있다.
 
 > bundle - 묶다.