웹팩(Webpack)이란?
웹팩(Webpack)은 프런트엔드 프레임워크 중 가장 많이 사용되는 모듈 번들러(Module Bundler)이다.
모듈 번들러 : 위의 이미지와 같이 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS,jpg 등..)을 하나의 파일로 병합, 압축 해주는 것을 말하며, 이러한 동작을 모듈 번들링이라고도 부른다.
++ 빌드랑 번들링은 같은 의미이지만, 엄밀히 말하자면 빌드가 번들링을 포함한다고 볼 수 있다.
모듈(Module)
모듈(Module)이란 프로그램을 구성하는 구성 요소로, 특정 기능을 갖는 작은 코드 단위를 의미한다. (간단하게 모듈은 파일 하나라고 생각해도 된다)
예를 들어 웹 애플리케이션을 개발할 때, 코드의 재사용, 유지보수를 위해 파일을 여러개로 분리해서 개발을 하는데, 이렇게 분리된 파일을 모듈이라 부른다.
웹팩을 왜 사용하는가?
1. 파일 단위의 자바스크립트 모듈 관리의 필요성
자바스크립트 변수의 유효 범위(스코프)는 기본적으로 전역 범위를 가지고있어, 서로 다른 모듈에서 같은 이름의 변수를 사용한다면 의도치 않은 영향을 줄 수 있다.
이러한 문제를 해결하기 위해 js 파일을 모듈로 관리하게 된 것이다.
2. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹 애플리케이션을 완성하여 웹 서버에 배포까지 했다고 가정하자.
사용자들이 웹 사이트를 이용할 때, 브라우저로 접근을 하면 사용자에게 UI를 제공하기 위해 웹 서버에 자원 (JS , HTML , CSS , Font 등)을 요청한다.
개발자도구 > Network 탭에 들어가면 볼 수 있는 리소스 파일들
그러면 웹 서버는 요청받은 자원을 브라우저에게 응답하게 되면서 사용자가 UI를 볼 수 있게 된다.
여기서 개발 편의성을 위해 모듈의 개수를 늘리다보면 브라우저에서 웹 서버로 요청하는 자원의 수도 많아질 것이며, 이로 인해 응답 시간이 길어지며 페이지 로딩을 유발하게 된다.
위의 이미지를 보면 로딩이 완료되는데 1초 ~ 3초가 걸리는 페이지는 32%의 이탈률을, 1초 ~ 5초는 90%의 이탈률로 로딩 속도가 느려지면 사용량도 줄어드는 것을 알 수 있다.
이를 해결하기 위해 모듈 번들러를 사용하여 모듈들을 번들링 하면, 브라우저에서 서버로 요청하는 HTTP의 개수를 줄일 수 있으며, UX를 향상시킬 수 있다.
