1. 웹팩이란?
Webpack(웹팩)은 Vue, React, Angular와 같은 프레임워크에서 사용되는 모듈 번들러로 코드 단위들을 조합하여 하나의 결과물로 만들어주는 역할을 한다.
코드 단위는 웹 어플리케이션 개발에 필요한 모든 자원(예: HTML, CSS, Javascript, Font...)을 의미하고 각각을 모듈이라고 칭하며
더 정확히 말하자면, 특정 기능을 갖는 작은 코드 단위를 의미한다. 아래 예시 코드를 살펴보도록 하자.
mport Api from '@/http'
class MdmShippingFrom {
getList = async params =>
await Api.get('standard/shipment-locations', { params })
getDetail = async shipmentLocationId =>
await Api.get(`standard/shipment-locations/${shipmentLocationId}`)
regist = async params =>
await Api.post('standard/shipment-locations', params)
modify = async params =>
await Api.put('standard/shipment-locations', params)
}
export default new MdmShippingFrom()이 js파일은 getList(), getDetail(), regist(), modify() 총4개의 함수로 이루어진 모듈로 이와 같이 성격이 비슷하거나 정해진 규칙 별로 기능들을 분리하여 관리하면 된다.
💡 이렇게 분리되어 있는 수많은 모듈들을 단 하나의 파일로 압축해주는 동작을 모듈 번들링이라고 한다. 흔히 실행하는 npm run build 명령어는 개발자들이 작성한 개별 파일들을 한 개의 파일로 만들어주는 역할을 수행하며 **빌드 = 번들링 = 변환** 모두 같은 의미로 사용된다.2. 웹팩의 장점
웹팩을 사용함으로써 얻을 수 있는 이점은 크게 3가지로 설명할 수 있다.
첫째, 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
작업한 파일의 수와 페이지 로딩속도는 반비례한다. 즉, 작업파일의 양이 많을수록 초기 페이지를 로딩하는 시간이 느려진다는 의미이다.
왜 그럴까? 소스 코드가 DOM에 영향을 미치면 객체를 다시 만들고 이는 DOM Tree와 Render Tree를 재 생성하는 결과를 초래한다. 이렇게 재생성된 DOM영역이 레이아웃에 영향을 주기 때문이다.
쉽게 말해, 개발자가 의도한 화면 변화는 일부분이었으나 정적인 영역도 계산이 다시 되어 속도를 지연 시키는 것이다.
따라서 이 로딩 속도를 줄이기 위해
- 당장 필요하지 않은 자원(모듈)들은 나중에 요청하는 레이지 로딩(Lazy Loading)과
- 서버로 요청하는 파일의 숫자를 줄이는 노력들이 있었고
웹팩을 사용함으로써 필요한 자원은 그 시점에 요청하게 되어 로딩 속도가 줄어들며, 이를 통해 사용자들이 사이트를 벗어나거나 집중력을 잃지 않도록 한다.
둘째, 웹 개발 작업 자동화 도구
- HTML, CSS, JS, Image 압축
- CSS 전처리기 변환
배포 시, 해당 작업들을 자동으로 빌드하고 가져오거나 내보낸 항목들을 기반으로 디펜던시 그래프를 추론한다.
따라서, 개발자들이 수동으로 처리해야 할 업무가 줄어 더 나은 개발환경이 구축되었다.
셋째, 파일 단위관리를 통한 유효범위 문제 해결
모든 프로젝트에서 하나의 .js 파일을 만들어 사용한다면 어떻게 될까?
코드의 수가 거대해지고 가독성이 떨어지며, 유지보수에도 어려움이 있을 것이다.
더욱이 동일한 변수명이나 함수명을 사용했을 때, 데이터의 유효범위 문제도 물론 존재할 것이다. 왜냐하면 Javascript 는 변수의 유효범위를 전역적으로 갖고, 이 때문에 어디에서도 접근하기가 쉽기 때문이다. 개발자가 모든 변수명을 다 기억할 수 없다는 전제 하에 변수이름을 중복선언하거나 때로는 의도치 않은 값을 할당할 수도 있다.
예전에 사용했던 AMD, Common.js로 풀어왔던 모듈화에 대한 욕구를 번들러를 통해 해결한 셈이라고 볼 수 있다.
