웹팩 뜻과 개념에 대해서 알아봅시다.
웹팩의 뜻과 개념 알기
웹팩(Webpack)은 자바스크립트와 같은 여러 파일들을 정리하는 툴입니다.
웹팩은 자바스크립트(JavaScript) 파일들을 하나로 묶어주는 소프트웨어를 의미합니다. 웹 앱에서는 여러 자바스크립트 파일로 분할되는 경우가 있지만 오래된 웹 브라우저에서도 읽을 수 있도록 해야 합니다. 이에 따라 순서 등을 자동으로 검출하여 의존 관계가 변경되었을 경우에도 최소한의 변경으로 대응할 수 있습니다. 자바스크립트 뿐만 아니라 CSS나 화상에서도 채울 수 있습니다.
웹 팩을 사용하면 서버의 부담을 줄일 수 있어 효율적입니다.
Webpack은 최신 자바스크립트 애플레케이션을 위한 정적 모듈 번들러입니다. 웹 애플리케이션을 구성하는 HTM, CSS, 자바스크립트, 이미지와 같은 자원들을 각각의 모듈로 보고 모듈들을 조합하여 하나의 병합된 결과물로 만드는 툴입니다. Webpack은 여러 파일을 하나의 파일로 합쳐주는 개념의 자바스크립트 번들러 입니다.
Webpack은 필요한 자원을 사전에 미리 로딩하는 방식이라기 보다 그때마다 요청하는 개념입니다.
Webpack과 관련된 개념으로 태스크러너(Task Runner)가 있습니다. 태스크 러너는 웹사이트 구축에 필요한 파일의 저장과 변환에 대한 처리를 자동화하는 프로그램으로 npm-scripts, gulp, grunt가 있습니다.
웹팩의 뜻과 개념 이해
웹팩(Webpack)은 웹에서 사용하는 모든 자원들을 번들링해주는 도구입니다.
번들링을 통해서 파일을 하나로 합치게 되고 네트워크와 관련된 요청 횟수와 비용은 줄일 수 있습니다. 중복된 소스코드는 최소화할 수 이고 모듈 개념을 사용할 수 있습니다. 여기서 모듈은 프로그래밍 분야에서 특정 기능을 가지고 있는 작은 코드 단위를 뜻합니다. 웹 애플리케이션을 구성하는 모든 자원을 의미하는데 HTML, CSS, 자바스크립트, 이미지, 폰트와 같은 파일들이 모두 모듈입니다.
웹 팩은 4가지 구성요소가 있습니다.
웹 팩의 4가지 구성요소는 Entry, Output, Loader, Plugin입니다.
사용자가 웹사이트에 접속했을 때 파일이 굉장히 많으면 다운로드하는데 시간이 많이 걸리고 서버의 자원이 많이 소모되며 결과적으로 웹사이트가 느리게 로딩 되는데 Webpack 번들러를 통해서 이러한 문제점을 해결할 수 있게 되었습니다. 인터넷이 발전하면서 웹 애플리케이션의 복잡도는 크게 증가하였고 JavaScript 코드의 양도 어마어마해졌기 때문에 이러한 코드들을 쉽게 유지 보수하기 위해서도 반드시 필요합니다.
웹 팩을 통해서 자바스크립틔 변수 유효 범위 문제와 브라우저별 HTTP 요청 숫자의 제약, 사용하지 않는 코드들에 대한 관리, Dynamic loading이나 Lazy loading에 대해서 지원되지 않는 문제에 대한 해결을 위해서 사용됩니다.
Webpack과 관련된 개념으로 미니파이와 롤업이 있습니다.
미니파이(Minify)는 자바스크립트나 CSS에서 불필요한 줄 바꾸기나 들여쓰기가 있을 경우 삭제해주어 파일의 용량을 줄이는 개념입니다. 가독성은 조금 떨어질 수 있지만 네트워크 통신량을 줄일 수 있어서 빠르게 화면을 표시할 수 있습니다. 롤업(Rollup)은 웹팩처럼 자바스크립트의 여러 소스코드를 묶어서 하나의 파일로 만들어주는 도구입니다. 롤업은 React나 Vue.js와 같은 라이브러리에서 사용됩니다.
[Concept of Webpack]
