•번들링이란 여러 가지 제품을 묶어 최종 하나의 제품을 만들어 판매하는 전략 • 프론트엔드에서의 번들링이란 여러 기술과 리소스의 묶음(조합)으로 어플리케이션을 개발하고 번들링(빌드) 과정을 통해 최종 어플리케이션 산출물을 만들어내는 방식
• 파일을 압축하여 최종 산출물 사이즈를 줄여 실행속도,로딩속도 향상시킴 • 애플리케이션 실행성능을 향상시킴 • 번들링 결과물을 사용자가 조작이 불가능하게 하여 안전한 실행 담보 • 변수선언 및 사용에 있어 번들링과정을 통해 중복선언등의 에러방지 가능
• 번들링 도구인 Webpack을 이용해 번들링 실행 • javascript 애플리케이션 모듈 번들러
한줄로 정의하자면 모듈은 파일 하나하나 특정 기능을 갖는 작은 코드 단위를 의미합니다.
우리가 개발을 하면서 규모가 커지면 언젠가 파일을 여러 개로 분리해야 하는 시점이 오는데 이때 분리된 파일 각각을 모듈이라고 부릅니다.
목적에 따라 기능별로 여러 개의 파일로 분리해서 관리할 수 있으며 모듈로 분리하는 과정을 모듈화라고 합니다.
브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역(window)을 공유한다. 그래서 어떤 파일을 먼저 실행할지가 중요해집니다.
//app.js
let title = 'Hello';
function print(value) {
console.log(value);
}
//main.js
let title = 'Hi';
function print(value) {
console.log(value);
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module Practice</title>
</head>
<body>
<script src="app.js"></script>
<script src="main.js"></script>
</body>
</html>
이렇게 app.js와 main.js로 파일을 나눴지만, 같은 변수가 선언된다면 app.js를 불러올 때는 Hello지만 main,js가 호출되면 title은 hi가 됩니다.