웹팩이 필요한 이유

배경

모듈을 지원한 시기는 ES2015부터 모듈을 지원하기 시작했다.
ES2015 이전에는 흔히 사용하는 import/export 구문이 없다.

그럼 어떻게 import 했을까?

다음 두 파일을 만들고 index.html 안에서 스크립트를 로딩해야만 실행 할 수 있다.
math.js 가 로딩이 되었으면 app.js 는 sum 을 찾은뒤 실행한다.

이는 무슨말이냐? sum 이 전역으로 사용된다는 것!

다른 파일에서 sum 함수를 만들었다면? 같은 이름을 사용중이므로 런타임에러를 뱉는다.

math.js

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

app.js

sum(1, 2) // 3

IIFE 방식

위와 같은 문제를 해결하기 위해서 스코프를 사용한다.
함수 스코프를 만들고 외부에서 접근하지 못하게 공간을 분리하는 것이다.
스코프 안에서는 자신의 이름 공간이 존재하므로 스코프 외부에서 같은 이름이 있어도 런타임에러가 발생하지 않는다.

math.js

var math = math || {}

// 즉시 실행 함수 
// 외부에서 접근하지 못하도록 독립된 스코프를 만드는 역할
// 외부에서 사용하게 하고 싶다면? 전역으로 작성한 변수에에 sum 함수를 할당해준다.
(function() {
	function sum(a, b) {
      return a + b;
	}
    
    math.sum = sum;
})()

// 화살표 함수로도 사용이 가능
(() => {
  function sum(a, b) {
      return a + b;
	}
    
    math.sum = sum;
})()

이렇게 작성해주면 외부 파일에서 젼역으로 등록한 변수 math를 활용한다.
math.sum(1, 2) 를 통해 가져올 수 있다.
즉시실행함수를 사용하여 독립된 공간을 만들어 외부에서 주는 것이 IIFE 방법이다.

즉시실행함수
정의되자마자 즉시 실행되는 함수를 말한다.

아래 글을 확인해보자
https://jongminfire.dev/java-script-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-iife

다양한 모듈 스펙

CommonJS

자바스크립트를 사용하는 모든 환경에서 모듈을 사용하는 것이 목표
exports 를 사용하고 require()로 함수를 불러오는 방식
node.js에서 이를 사용한다.

math.js

exports function sum(a, b) { return a + b; }

app.js:

const math = require("./math.js")
math.sum(1, 2) // 3

AMD Asynchronous Module Definition

비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표
타켓 : 브라우저 환경 (크롬, 사파리, 엣지 등)

UMD Universal Module Definition

AMD기반으로 CommonJS 방식까지 지원

ES2015

우리가 아는 그 방식

import / export 형태

math.js

exports function sum(a, b) { return a + b; }

app.js:

import * as math from './math.js';
import { math } from './math.js';
math.sum(1, 2) // 3

브라우저의 모듈 지원

대부분의 브라우저에서는 모듈을 지원하는데 안타깝게도... IE 와 같은 몇몇 브라우저는 제공하지 않는다.. ㅜ_ㅜ

정리

ECMAScript2015 이전에는 모듈을 만들기 위해 즉시실행함수와 네임스페이스 패턴을 사용하여 모듈의 기능을 만들었다.
그 이후 여러 커뮤에서 모듈 시스템 스펙이 나오게 되었고,
ECMAScript2015 모듈시스템을 쉽게 사용하도록 돕는 역할을 하고 있다.