기타 포스팅입니다.

• Firebase DB에서 값을 불러올 수 없는 문제 해결
• 브라우저 동작 원리
• DOM이란?
• 이벤트 버블링과 캡처링
• 번들링이 뭔데?
• 프로세스와 쓰레드의 차이점
• CSR, SSR, SSG의 차이
• 라이브러리와 프레임워크
• 쿠키와 웹스토리지에 대해
• 크로스 브라우징이란?
• 알면 유용한 vscode 단축키들
• HTTP와 HTTPS의 차이점, HTTPS의 과정 및 장점
• GET과 POST의 특징
• LOL 전적검색 개발 - personal key 발급 승인받기
• 서버와 클라이언트, 그리고 소켓주소 간단정리
• URL의 구조에 대해

오늘은 번들링이 무엇인지, 번들링을 하는 이유가 뭔지 간단히 알아보겠습니다.

번들링에 대해

우리가 웹사이트를 만들다보면 자바스크립트, CSS, 이미지와 같은 정말 많은 파일들이 생겨나게 됩니다. 그래서 웹사이트를 로딩해보면 그 수많은 파일들이 다운로드되는 것을 확인할 수 있는데, 이는 서버와의 접속이 많아지게 되고 어플리케이션이 느려지게 됩니다.
또한 여러 많은 JS패키지를 사용하다보면 각각의 패키지들이 서로 같은 변수명, 함수명을 사용하여 예상치 못한 충돌이 발생할 수도 있습니다.

이러한 문제를 해결할 수 있는 것이 “번들러”입니다. 어플리케이션을 구성하는 여러 파일들을 하나의 파일로 병합해주는 과정을 번들링이라고 하고 그걸을 하는 것이 번들러입니다. 대표적으로 Webpack이 있습니다.

번들링의 장점

1. 번들링하지 않은 경우는 각 파일마다 서버에 요청해서 자원을 얻어와야했는데, 번들링하면 하나의 파일로 만들어지기 때문에 페이지 로딩이 빨라지고 네트워크 접속의 부담을 줄일 수 있습니다.

2. Webpack에서는 로더(Loader)를 통해 바벨이라는 ES6+ 문법을 ES5로 변환할 수 있도록하는 트랜스파일러를 사용할 수 있습니다. 오래된 브라우저에서도 동작할 수 있도록 해주는 장점이 있습니다.

3. 번들러는 자바스크립트 파일을 기능 단위로 모듈화 하고 이것을 묶어 관리할 수 있게 합니다. 번들러를 사용함으로써 소스 코드를 모듈별로 작성할 수 있고 모듈간 혹은 외부 라이브러리의 의존성을 쉽게 관리 할 수 있습니다.
   
   이외에도 많은 장점이 있을 수 있지만 3가지 정도만 정리해봤습니다.
   

End.