Webpack #1
Webpack 공부 #1
웹팩은 모듈 번들러(Module Bundler)이다.
그렇다면 **번들러(Bundler)**란 무엇일까??
번들러는 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든 것을 포함하는 패키지이다. 이를 프로그래밍적으로 접근하자면 번들러란 필요한 의존성에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑 해주는 도구라고 할 수 있다.
다시 말해, Webpack 은 공식 사이트 이미지에서 소개하듯이 웹페이지를 동작시키기 위한 서로 연관 관계가 있는 웹 자원(웹앱 애플리케이션의 구성파일)들인 js, css, img, webfont, etc.. 와 같은 구성파일들의 관계들을 Webpack 에서 인식하여 번들링하게 되면 최종적으로 기존의 원본 파일들을 압축, 축소하여 최적화된 스택틱 자원(파일)으로 변환해주는 작업(웹페이지 성능 최적화)을 하게 되는데 이러한 작업을 번들링이라고 한다.
Webpack 사용 이유
최근 프론트엔드 프레임워크는 서버사이드 템플릿 시대를 지나 단일 페이지 애플리케이션(Single Page Application, SPA) 개발이 인기를 얻으면서 나타나게 되었다. 그로 인해 자바스크립트의 코드량이 기하급수적으로 증가하게 되었다.
수천, 수만 줄의 코드에서 특정 코드를 찾아 수정하기란 쉬운 일이 아니다. 그렇기 때문에 개발 초기 단계에 API 기능과 UI 컴포넌트에 맞도록 자바스크립트 코드를 모듈별로 분리하게 되었다. 하지만 분리된 자바스크립트 파일들을 하나씩 따로 로드해 온다면 웹 페이지 로딩시 커다란 속도 저하 문제가 발생한다.
글서 이런 웹팩과 같은 모듈 번들러를 통해 수많은 자바스크립트 파일들을 하나의 JS 파일로 번들링하는 작업이 필요하게 되었고, 프로젝트의 성능 향상과 보다 나은 구조, 개발 라이프 사이클의 중요성이 높아졌다.
웹팩에서의 모듈
웹팩에서 지칭하는 모듈이라는 개념은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. HTML, CSS, Javascript, Images, Font 등 많은 파일 하나하나가 모두 모듈이다. 이렇게 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.
웹팩의 등장 이유
- #1. 파일 단위의 자바 스크립트 모듈 관리의 필요성
- #2. 웹 개발 작업 자동화 도구 (Web Task Manager)
- #3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
#1. 파일 단위의 자바스크립트 모듈 관리
var a = 10;
console.log(a); // 10
function logText() {
console.log(a); // 10
}
자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖습니다. 최대한 넓은 변수 범위를 갖기 떄문에 어디에서도 접근하기가 편리하다.
하지만, 동일한 변수를 각기 다른 스크립트에서 접근하였을 경우 나중에 선언된 자바스크립트에서의 값을 가지게 된다.
이러한 문제점은 실제로 복잡한 애플리케이션을 개발할 때 발생한다.
변수의 이름을 모두 기억하지 않는 이상, 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있다. 이처럼 파일 단위로 변수를 관리하고 싶은 욕구, 자바스크립트 모듈화에 대한 욕구를 예전까진 AMD, Common.js와 같은 라이브러르로 풀어왔다.
#2. 웹 개발 작업 자동화 도구
이전부터 프론트엔드 개발 업무를 할 때 가장 많이 반복하는 작업은 텍스트 편집기에서 코드를 수정하고 저장한 뒤 브라우저에서 새로 고침을 누르는 것이었다. 이외에도 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야했다.
- HTML, CSS, JS 압축
- 이미지 압축
- CSS 전처리기 변환
이러한 일들을 자동화해주는 도구들의 필요성이 대두되었다.
#3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
통계적으로 웹 사이트를 접근할 때 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 떠난다고 한다.
그래서 웹 사이트의 로딩 속도를 높이기 위한 많은 노력들이 있었다. 그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것이다.
Leave a comment