1. 웹팩이란?
웹팩은 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다.
1-1. 자바스크립트에서의 모듈
자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것을 말한다.
date.js
export const getIosStringDate() => new Date().toISOString();
export const getNumberDate() => new Date().valueOf();예를들어 위 date.js는 날짜를 parsing 하는 기능들을 가진 모듈이라고 할 수 있다.
1-2. 웹팩에서의 모듈
웹팩에서의 모듈은 자바스크립트 모듈뿐만이 아니라 HTML, CSS, Javascript, Images, Font 등 웹 애플리케이션을 구성하는 모든 자원들을 모듈이라고 한다.
1-3. 모듈 번들링
위 이미지처럼 여러 모든 모듈을 하나의 파일로 병합하는 행위를 모듈 번들링이라고 한다.
2. 웹팩의 등장 배경
1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
2-1. 파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트의 변수 유효 범위 (스코프)는 기본적으로 전역 범위를 기본으로 가진다. 즉, 어디서든 변수에 접근할 수 있다는 말이다.
파일 단위로 자바스크립트 코드를 관리할 때 모듈화 하지 않으면 어떤 문제가 발생하는지 예를 들어 알아보자.
module1.js
var foo = 10;module2.js
foo = 20;main.html
<body>
<script src="./module1.js"></script>
<script src="./module2.js"></script>
<script>
console.log(foo); // 20
</script>
</body>위 코드에서 foo는 전역 변수이기 때문에 어디서든 접근할 수 있고 값을 변경할 수 있다. 프로젝트가 커지고 이러한 변수가 많아진다면 남이 사용한 변수를 실수로 변경할 수 있는 문제 등이 발생한다.
그리고 script의 순서를 바꾸면 foo의 값도 바뀌게 된다.
<body>
<script src="./module2.js"></script>
<script src="./module1.js"></script>
<script>
console.log(foo); // 10
</script>
</body>이러한 문제를 해결하기 위해 javascript 파일을 모듈로 관리하게 되었고, CommonJS, AMD, ESModule 등의 모듈 시스템이 만들어졌다.
웹팩은 다양한 모듈화 방식 중 ESModule 방식을 사용하고 있다.
2-2. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹페이지에 접속하게 되면 js, image, font 등의 수많은 리소스 파일들이 다운 받아지게 된다.
만약 페이지에서 사용하는 js파일이 5개라면 위와 같이 5개의 js파일을 다운로드하게 되는데 5개가 아니라 수천 개라면?? 그리고 사이즈가 크다면?? 로딩 시간에 지친 사용자들은 페이지를 나갈지도 모른다.
<body>
<script src="./module1.js"></script>
<script src="./module2.js"></script>
<script src="./module3.js"></script>
<script src="./module4.js"></script>
<script src="./module5.js"></script>
...
<script src="./module1000.js"></script>
</body>이러한 문제를 해결하기 위해 웹팩은 여러 파일을 하나로 병합 및 압축하는 기능을 제공하고 있다. 그 결과 서버로의 수많은 요청을 줄이기 때문에 네트워크에 부담을 줄여 더 빠른 서비스를 제공할 수 있다.
예제에서는 js 파일을 위주로 설명했지만 위에서도 말했다시피 웹팩은 js 뿐만이 아니라 모든 리소스를 모듈로 취급하고 그 리소스들을 하나의 파일로 병합 및 압축할 수 있다. 이 작업은 Loader를 통해 할 수 있다.
참고 자료
웹팩이 필요한 이유 | 웹팩 핸드북
웹팩의 등장 배경 웹팩이 등장한 이유는 크게 3가지입니다. 파일 단위의 자바스크립트 모듈 관리의 필요성 웹 개발 작업 자동화 도구 (Web Task Manager) 웹 애플리케이션의 빠른 로딩 속도와 높은 성
joshua1988.github.io
'JavaSctipt' 카테고리의 다른 글
| [Javascript] Object, Map 순서를 보장 하는 순회 (0) | 2022.05.25 |
|---|---|
| [Javascript] 호이스팅(Hoisting) (1) | 2022.01.25 |
| [javascript] V8 Engine (0) | 2022.01.21 |
| [Javascript] 이터레이션, 이터레이터 / 이터러블 (0) | 2021.07.31 |
| [Javascript] 클로저 (Closure) (1) | 2021.07.06 |