웹팩 등장 배경 - 1

웹팩이 등장한 이유는 크게 3가지이다.

파일 단위의 자바스크립트 모듈 관리의 필요성
웹 개발 작업 자동화 도구 (Web Task Manager)
웹 애플리케이션의 빠른 로딩 속도와 높은 성능

파일 단위의 자바스크립트 모듈 관리

입문자 관점에서 고안된 자바스크립트는 아래와 같이 편리한 유효 범위를 갖고 있다.

var a = 10;
console.log(a); // 10

function logText() {
   console.log(a); // 10
}

입문자 관점에서 설계되다 보니 어디서든 접근하기 쉽게 변수를 고안하였다.
특히 ES5의 var는 어디서든 접근이 쉽다.

이러한 특징들이 어떠한 결과를 야기할 수 있을까?

이러한 장점으로 여겼던 특징 때문에 아래와 같은 문제점이 발생했다.

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <script src="./app.js"></script>
    <script src="./main.js"></script>
    <script>
        getNum(); // 20
    </script>
</body>
</html>

// app.js
var num = 10;
function getNum() {
    console.log(num);
}

// main.js
var num = 20;
function getNum() {
    console.log(num);
}

변수가 서로 겹쳐버리는 현상이 발생해서 원하는 값을 못갖고 오게되는 문제가 발생한다.
위와 같은 문제를 어떻게 해결할까?
예전에 사용했던 해결방식은 다음과 같다.

// a.js
var a = {
    num: 10
}

// b.js
var b = {
    num: 20
}

각 파일별로 파일이름을 딴 객체를 생성해 객체 안에 값을 넣는 방식으로 해결했다.
이를 네임스페이스라고 한다.
즉, 이렇게 파일이름으로 네임스페이스를 잡아주면 서로 겹치는 일이 없다.
네임스페이스도 개발 패턴 중 하나이다.

여튼 이런 개념을 사용하였고 이를 좀 더 용이하게 사용할 수 있도록 require, 즉 commonJS 문법을 활용하여 모듈 개념을 가져오기 시작했다. 그리고 ES6 문법이 들어서면서 ES6 언어 스펙인 module 문법인 import, export을 사용하게 되었다.

네임스페이스 패턴을 활용하는 것을 좀 더 쉽게 해주고자 들여왔던 것이 commonJS의 require 문법이었고, 그게 더 발전해서 현재의 ES6 module 문법 import/export이 된 것으로 이해하면 될 것 같다.

LHJ

웹팩 등장 배경 - 1