웹팩 등장 배경 - 2

두 번째와 세 번째 등장 배경에 대해 살펴보도록 하겠다.

웹 개발 작업 자동화 도구 (웹 테스크 매니저)

웹 개발 작업 자동화 도구는 웹 테스크 매니저라고 해서 gulp나 grunt가 이에 속합니다.

이전부터 프론트앤드 개발 업무를 할 때 가장 많이 반복하는 작업은

1. 텍스트 편집기에서 코드를 수정하고 저장한 뒤
2. 브라우저에서 새로 고침을 누르는 것

이었다.
그래야 화면에 변경된 내용을 볼 수 있다.

이외에도 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 했어야 했다.

1. html, css, js 압축
2. 이미지 압축
3. css 전처리기 변환

이러한 일들을 자동화해주는 도구들이 필요했다.
그래서 grunt 와 gulp 같은 도구들이 등장한 것이다.

이런 도구들의 기능에 + 모듈관리(모듈번들러)까지 해주는 것이 웹팩이다.

웹 애플리케이션의 빠른 로딩 속도와 높은 성능

• 모던 웹앱의 특징 : 빠른 로딩속도는 필수 + 높은 UX 소화

기본적으로 5초 이내로 웹사이트가 표시되도록 하지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 된다.
5초 이내로 접속하게하기 위해 최적화를 많이 해야된다.
그래서 웹 사이트의 로딩 속도를 높이기 위해 많은 노력들이 있었다.
그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것이었다.
이를 위해 그동안 개발자들은 앞에서 살펴본 웹 테스크 매니저를 이용해 파일들을 압축하고 병합하는 작업들을 진행해왔다.

하지만 실질적으로 병합하는 작업에서 필요 없는 라이브러리를 제거한다던가, 이런 라이브러리 의존성 관리까지 필요하게 되면서 웹 테스크 매니저로는 한계가 발생하게 된다.

이러한 이유 때문에 웹팩으로 모듈 관리뿐만 아니라, 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지로딩이 등장하게 되었다.
웹팩은 기본적으로 필요한 자원은 미리 로딩하는 것이 아니라 그때그때 요청하자는 철학을 갖고 있다.