이전부터 Front-end 개발 업무를 할 때 코드를 수정하고 저장한 뒤 브라우저를 새로고침해서 확인하거나,
웹 서버에 배포할 때 HTML, CSS, JS 및 이미지 압축, CSS 전처리기 반환 등의 작업을 해야 했다.
이는 너무 불편했기에 자동화해주는 도구가 필요해졌고, 그래서 Webpack과 Gulp가 생겨나게 되었다...
들어가기 전에...
Webpack에 들어가기 전 간략하게 짚고 넘어갈 사항이 있는데, 바로 npm install 에 대한 내용이다.
(사실 많이 봤는데도 헷갈려서 적어놓았다.)
// package.json - dependencies
// Application에 직접적인 연관이 있을때 사용, Build 시 자동으로 설치됨
npm i eslint
// package.json -devDependencies
// Application에 직접적인 연관이 없을때 사용, Build 시 자동으로 설치되지 않음
npm i -D eslintWebpack의 경우, devDependencies에 설치해놓아야 한다.
그래서 그게 뭔데?
Webpack이란, 모듈 번들러로서 많은 Front-end 프레임워크에서 사용되고 있다.
모듈 번들러? "모듈"은 뭐야?
모듈이란, 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 하지만, Webpack에서의 모듈은 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. (HTML, CSS, Javascript 등)
- 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript 등)을 조합하여 병합된 하나의 결과물을 만드는 도구.
- 모듈 번들링: 웹 애플리케이션을 구성하는 자원들을 하나의 파일로 병합 및 압축해주는 것.
사용하면 뭐가 좋아?
Webpack을 사용하면 라이브러리 등의 파일을 하나로 합치고, 해당 파일만 요청하면 되기 때문에 줄일 수 있기 때문에 페이지 로딩 시간, 요청 수를 줄일 수 있다. (속도 향상)
Webpack vs GULP
Gulp란, 웹 자동화 도구 (Task manager)를 의미하며 빌드 시스템으로 불린다.
Gulp는 일을 자동화시켜서, 작업 효율을 높이는 툴이라고 할 수 있는데, Javascript 라이브러리, 서브파티 앱 등을 모으고 축소/압축을 진행하거나 단위 테스트, Less/CSS 컴파일링, 브라우저 refresh에 도움을 주는 역할을 한다.
Webpack
Package.json의 script를 기반으로 동작하며, Javascript bundle 및 종속성을 가진 어플리케이션 모듈을 정적인 소스들로 생성하기 위한 Package bundler다.
Gulp
gulpfile 파일을 기반으로 실행하며, Work flow를 자동화 및 성능을 향상할 수 있는 Task runner다.
Webpack, Gulp 둘 중 어느 하나가 좋다고 말할 수는 없지만, 제작하는 프로젝트에 어울리는 tool을 찾아야 할 것 같다.
Webpack을 적용함으로서 얻는 이득
웹 사이트를 접근할 때 5초를 넘어가면 대부분의 사용자가 집중력을 잃게된다고 한다.
따라서, 로딩 속도를 높이기 위해 많은 노력이 있었는데 그중 대표적인 것이 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것이였다.
추가로, 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원은 나중에 요청하는 레이지 로딩(Lazy loading)도 사용하게 된다.
Webpack은 기본적으로 필요한 자원을 미리 로딩하여 사용하는 것이 아니라, 필요할 때마다 요청하자는 철학을 가지고 있다.
Webpack을 적용하면, 다음과 같은 문제를 해결할 수 있다는 이점이 있다.
- Javascript 변수 유효 범위 문제
ㄴ HTML에서 Javascript 파일을 2개 이상 가져올 경우, 변수가 중첩될 가능성이 있다. - 브라우저별 HTTP 요청 숫자의 제약 문제
ㄴTCP 스펙에 따라 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있다. (Chrome의 경우, 최대 연결 횟수는 6회) - Dynamic loading & Lazy loading 미지원으로 생기는 문제
ㄴ 이전에는 Require.js 등의 라이브러리로 해결이 가능했다. - 사용하지 않는 코드의 관리
