안녕하세요. 김용성입니다.
이전부터 포스팅하고 싶었던 주제가 있었는데요.
바로 webpack입니다. webpack이라는 것에 대해 익숙하지 않은 분들이 많으실거예요. 저 또한 익숙치 않지만, 포스팅을 하며 더 정확하게 알아보고, 많은 분들에게 공부한 내용들을 공유하고 싶어서 webpack 개론 시리즈를 시작할까 합니다.
webpack 시리즈는 총 몇개의 포스팅으로 구성될지에 대해서는 아직 미정입니다. 오늘은 **webpack이 무엇인지, module이란 무엇인지 살펴본 후 webpack과 같은 Bundler가 탄생하게 된 배경에 대해 알아보는 시간을 갖도록 하겠습니다:)
참고로 webpack 시리즈는 생활코딩-webpack을 참고하였습니다.
링크: https://youtu.be/cp_MeXO2fLg
webpack이란?
아마 webpack에 대해 알아보실 분들이라면 어느정도 JavaScript에 익숙해지신 분들일 것이라고 생각합니다.
어느정도 프로젝트 경험도 있으실거고, 심지어 웹이나 앱 서비스를 배포하신 분들도 종종 있으실겁니다.
webpack은 저러한 경험이 있으신 분들이 알아두면 더 좋다고 생각합니다!
그렇다면 webpack이란 무엇일까요? 아래 그림을 보고 가겠습니다.
해당 그림은 webpack 공식 페이지에서 제가 가져온 그림입니다. 이 그림 속에는 우리가 webpack을 사용하는 이유들이 잘 담겨져 있습니다.
우리가 프로젝트를 진행하다보면 Js, Css, Img 등의 수많은 파일들이 생성이 되고, 우리가 만든 website를 로딩해보면, 정말 많은 프로그램들이 다운로드 된다는 것을 알 수 있습니다.
다운로드 되는 프로그램들이 많을수록 당연히 해당 site에 접속하는 속도는 어떻게 될까요? 아마도 느려질겁니다. 여러 개의 파일을 브라우져에서 로딩하는 것은 네트워크 비용을 그만큼 사용한다는 의미이기 때문이죠.
또한 이렇게 많은 JavaScript 패키지 속에서 각각의 패키지들이 서로 같은 이름의 변수 등을 사용하며 패키지 간의 충돌이 일어날 수 있습니다.
바로 이러한 상황 속에서 등장한 것이 바로 Bundler입니다. Bundler의 종류에는 여러가지가 있지만 그중 대표적으로 많은 이들이 사용하는 것이 바로 webpack입니다. webpack을 사용하는 이유는 다른 module bundler들보다 성능이 뛰어나기 때문이죠.
webpack을 사용하면 하나의 JavaScript 파일에 JavaScript 파일 뿐만 아니라 위에서 언급한 Css 등의 다른 파일들도 담을 수가 있고 필요에 의해 다시 분리할수도 있는 등 방대한 생태계 덕에 아주 많은 작업을 할 수 있습니다.
webpack 없이 사이트를 만든다면?
우선 다음과 같은 디렉토리 구조를 만들도록 하겠습니다.
그 후, 2개의 JavaScript 파일에 이런식의 코드를 넣도록 하겠습니다.
//yongseong.js
var name = "Yongseong"
//kim.js
var name = "Kim"
index.html파일에서 제가 생성한 두개의 JavaScript파일을 참조할 수 있도록 내부에 이렇게 기본적인 html 코드를 작성하도록 하겠습니다.
<!-- index.html -->
<html>
<head>
<script src="./source/kim.js"></script>
<script src="./source/yongseong.js"></script>
</head>
<body>
<h1>Webpack practice</h1>
<div id='root'></div>
<script>
document.querySelector('#root').innerHTML=name;
</script>
</body>
</html>그 후 해당 html 파일을 열어보면 다음과 같은 페이지를 볼 수 있을겁니다.
어? 왜 'Yongseong'만 출력이 되나요? name이라는 이름을 가진 변수는 kim.js 파일에도 존재하지 않나요?
네 맞습니다. 이 경우가 바로 충돌이 발생했다고 볼 수 있습니다. 똑같은 이름의 변수를 가지고 있는 두개의 JavaScript 파일이 충돌하면서 뒤에 선언된 yongseong.js파일의 name만이 innerHtml 된 것이죠.
누가 저렇게 바보같은 실수를 하나요??
지금은 JavaScript 파일이 2개뿐이라 이러한 생각을 가진 분들이 있을겁니다. 그렇지만 우리는 2개의 JavaScript 만을 가진 프로젝트를 하지 않을 겁니다. 하나의 root 파일 안에 어마어마하게 많은 JavaScript파일이 만들어질 수 있고, 이러한 경우에는 일일이 컨트롤하기 굉장히 힘들겠죠?
모듈
오랜시간 web은 이러한 문제로부터 자유롭지 못해 신음해왔습니다. 그러던 도중 생긴 것이 바로 module 입니다.
module을 사용하는 것을 보여드리도록 하겠습니다. 여러분들이 아마 많이 사용해보셨을거예요.
//yongseong.js
var name = "Yongseong"
export default name;//kim.js
var name = "Kim"
export default name;
각각의 Js 파일에서 변수를 export 해준 뒤
<!-- index.html -->
<html>
<head>
</head>
<body>
<h1>Webpack practice</h1>
<div id='root'></div>
<script type="module">
import lastName from "./source/kim.js";
import firstName from "./source/yongseong.js";
document.querySelector('#root').innerHTML=lastName+''+firstName;
</script>
</body>
</html>index.html 파일에서 lastName과 firstName이라는 변수로 JavaScript 파일에서 export 된 변수들을 선언해준 뒤 사용해줍니다.
그 뒤 다시한번 페이지를 확인해보겠습니다.
어떤가요. 중복되는 변수라도 이렇게 가져올 수 있는 것 보이시죠? 이것이 바로 module의 힘입니다.
그렇지만 module 역시 문제점이 존재합니다.
아래의 사진을 볼까요?
사이트 inspector을 열어 network 창에서 확인해보면 알겠지만 JavaScript파일 하나하나를 다운로드 받는 것을 볼 수 있습니다. 지금은 단지 2개의 파일 뿐이지만 저 곳에는 Css 파일이 다운로드 받아질 수도 있고, 그 외 수많은 파일들이 다운로드 받아질 수 있죠. 제가 webpack파트에서 이야기했다시피 이것은 문제가 됩니다. 네트워크 connection에 과부하가 올 수도 있고, 속도가 느려지는 현상을 야기하죠. 또한 서비스를 제공하는 입장에서도 네트워크 자원을 많이 사용하게 되기에 비용의 증가가 불가피한 상황을 직면하게 됩니다.
이러한 문제점들로부터 탈피하기 위해 많은 사람들이 여러 module들을 묶는 방안에 대해 고민하게 되고 그렇게 만들어진 것이 바로 bundler입니다. 우리가 다룰 Webpack은 그러한 bundler 중 가장 많은 기능을 가지고 있고 가장 큰 생태계를 가지고 있는 것이지요.
마무리
이번 포스팅에서는 아주 간단히 Webpack 그리고 module의 탄생 과정에 대해 살펴보았습니다.
다음 webpack시리즈 포스팅에서부터 본격적으로 webpack을 사용환경을 구축하고 사용해보는 시간을 가져보도록 하겠습니다.
감사합니다 :)
