Javascript 를 더 잘 다루기 위한 기술이다.
이 그림은 웹팩이 무엇임을 잘 보여주는 그림이다.
웹사이트를 만들다 보면 js, css, 등등 여러 수많은 파일들이 생겨난다. 때문에 웹을 로딩해보면 정말많은 파일들이 로딩되는 것을 볼 수 있다. 이는 서버와의 통신이 그만큼 늘어나 좋지 않은 결과가 생기며 서로 독립적인 js 파일이 동일한 의미의 식별자를 사용하게 되어 원치 않은 결과가 생기기도 한다.
이를 위해 등장한 도구를 Bundler 라고 한다. 묶는 다는 뜻의 도구이다. Webpack, Broserify, Parcel 등등 여러가지 종류가 잇는데 이 중 가장 인기있는 도구인 Webpack 에 대해 알아보자.
이 번들러를 이용해 웹 개발하며 다양한 확장 파일들과 이것들을 쉽게 관리할 수 있게 되어 큰 이점을 가져갈 수 있다. 이는 계속 검색해보자.
일단 배우기 전에 웹팩 없이 웹 사이트를 만들어 보고 이 떄의 단점을 알아보는 것이 이해하기 좋다.
이 과정에서 특히 집중해서 봐야할 것이 모듈이다.
// index.html
<html>
<head>
<script src='src/hello.js'></script>
<script src='src/world.js'></script>
</head>
<body>
<h1>Hellow, Webpack</h1>
<div id='root'></div>
<script>
document.querySelector('div#root').innerHTML = word;
</script>
</body>
</html>// src/hello.js var word = 'Hello'; // src/world.js var word = 'World';
다음과 같이 3개의 파일이 있다고 생각해보자. 이렇게 실행시키면 word 는 World 로 설정되어
이런식으로 페이지가 뜨게 된다. js 파일이 충돌되어 뒤에 호출된 파일이 값을 덮었기 때문이다.
이 처럼 큰 프로젝트에서는 여러 js 파일이 있게 되고 이 과정에서 이 충돌 과정이 필연적으로 생길 수밖에 없다. 때문에 이 충돌을 잘 다뤄야하는 기술 스텍이 필요해졌고 이렇게 나온 개념이 모듈 개념이다.
html 에서 모듈 사용법은 다음과 같다.
<html>
<head>
<!--
<script src='/src/hello.js'></script>
<script src='/src/world.js'></script>
-->
</head>
<body>
<h1>Hellow, Webpack</h1>
<div id='root'></div>
<script type='module'>
import hello_word from './src/hello.js';
import world_word from './src/world.js';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;
</script>
</body>
</html>// World.js var word = 'World'; export default word;// Hello.js var word = 'Hello'; export default word;
이런식으로 type='module' 선언해주고 js 파일을 import 하여 사용해주면 충돌이 나지 않게 된다. 또한 이런식으로 선언시 콘솔창에서 word 에 접근하려고 하면 에러가 생기게 된다.
export default word; 으로 word 를 선언해주게 되면 해당 식별자는 해당 파일 내에서 사용할 수 있기 때문이다.
허나 이런식으로 모든 js 파일을 일일이 불러오게 된다면 오만가지 파일들을 다운받게 되어 connection 이 엄청나게 많아지게 된다. 이러면 사용자나 서비스제공자 입장에서 더 많은 컴퓨팅 파워를 사용함이 필요해진다. 즉, 서비스 속도가 느려지게 되어 그만큼의 경쟁력이 사라지게 되는 것이다.
그래서 많은 사람들이 예전부터 웹에서도 모듈의 개념을 사용하고 싶다는 생각과 여러개 파일을 하나로 묶어서 제공하고 싶다는 생각을 한 사람들이 만든 도구가 번들러 라는 도구이다.
이 번들러 중 Webpack 에 대한 사용법, 장점 등을 알아보자.
