• 코딩

    Webpack 개념 정리

    2021. 10. 3.

    by. 문익점

    반응형

    등장 배경

    프론트엔드 프로젝트가 커지면서 자바스크립트 코드가 많아지면 코드를 관리해야합니다.. 하지만 자바스크립트에서 무분별하게 파일로만 분리하게 되면 전역 스코프에 겹치게되어 함수와 변수가 겹치는 현상이 발생합니다. 충돌 현상이 발생하게 되는 것입니다. 예를 들어서 math.js라는 파일에 아래와 같이 함수들이 정의 되어 있다고 하겠습니다.

    // math.js
function sum(a, b) {
    return a + b;
}

// sum.js
function sum(a, b) {
    return a + b;
}

// app.js
sum(1, 2);
    <html>
...
<script src="math.js"></script>
...
<script src="sum.js"></script>
<script src="app.js"></script> // sum 함수 충돌!!
...
</html>

    위 코드는 모두 하나의 HTML 파일 안에서 로딩해서 실행합니다. sum() 함수는 전역 스코프에서 2번 노출되며 충돌하게되고 결국 코드관리는 실패하게 됩니다.

    이를 방지하기 위해 함수 스코프를 사용하는 자바스크립트는 즉시호출함수(IIFE)를 사용해 모듈을 만들 수도 있습니다. CommonJS나 AMD 스타일의 모듈 시스템을 사용하면 파일별로 모듈을 관리할 수도 있습니다.

    하지만 이러한 파일이 수백개라고 생각을 한다면 코드관리도 어려워지며 사용자가 웹을 사용할 때 수백개의 파일을 로드한다면 네트워크 자원이 낭비됩니다. 그래서 여러가지 파일을 겹치지지 않게 하나로 묶어서 제공하고 배포하고 싶었습니다. 그래서 나온 개념이 번들러입니다.

    즉 전역 스코프에서 발생 할수 있는 변수, 함수 중복 현상과 여러가지의 파일을 로드하게 되면 발생 할 수 있는 속도 저하를 보완하기위해서 사용되게 됩니다.

    Webpack

    Webpack은 자바스크립트 모듈 번들러입니다. 주로 자바스크립트를 위한 번들러이지만 떄때로 HTML, CSS, resource파일 등 프론트엔드에서 사용하는 리소스들을 하나의 파일로 변환 할수 있습니다. 즉 프론트엔드를 구성하는 리소스들은 각각 모듈로 볼 수 있으며 이 모듈들을 하나로 조합하는 도구입니다.

    모듈 번들링

    https://webpack.js.org/

    위 이미지는 웹팩 공식사이트에서 웹팩을 설명하는 이미지입니다. 여러가지 자원으로로 이루어진 것(왼쪽)을 하나로 번들링하는 모습(오른쪽)을 이미지로 표현하고 있습니다. 즉 여러가지의 자원들을 하나의 파일(Static)로 압축, 병합, 조합하는 동작을 모듈 번들링이라고 합니다.

    반응형
    저작자표시

    '코딩' 카테고리의 다른 글

    Vscode Prettier 설치 후 적용 안될 때  (0) 2021.10.05
    웹팩의 Entry, Output, Loader, Plugin  (0) 2021.10.04
    Node.js와 npm(node package manager)  (0) 2021.10.03
    callback function 아주 간단 정리  (0) 2021.09.29
    OOP - 다형성  (0) 2021.09.28
    이 글을 본 사람들도 관심있게 본 글

티스토리툴바