웹팩 등장 이전 모듈의 사용
모듈: 분리된 jS 파일 조각들이다. script 파일이 커지며 기능 또한 복잡해지면서 기능별로 파일을 분리하고 재사용성을 높이고자 도입하게 된 개념이다.
-
import/export가 없던 과거에는 관련 모듈을index.html에 직접 import하여 사용하였다. -
문제점은, 전역 스코프의 오염이다. 즉,
window객체에sum이라는 함수가 추가되는데, 이때sum에 다른 값을 할당할 수도 있기 때문에 애플리케이션의 예측 불가와 더불어 런타임 에러가 발생한다.
런타임 에러: 프로그램이 실행되는 환경에서 발생하는 에러
// math.js function sum(a, b) { return a + b; } // // app.js sum(1, 2); // sum = 1; // console.log(sum); // // sum(1, 2); // Uncaught TypeError: sum is not a function
스코프 오염을 방지하기 위한 방법
IIFE(Immediately Invoked Function Expression)방식을 통한 모듈
-
위처럼, 전역 스코프의 오염을 방지하기 위해 사용되는 방법
-
즉시 함수 실행 표현이다. 즉, 정의하자마자 실행되는 함수이다.
-
IIFE 방식은, 함수 안에 독립적인 스코프 생기므로 오염이 방지된다.
// math.js var math = math || {}; // (function () { function sum(a, b) { return a + b; } // math.sum = sum; })(); // // app.js console.log(math.sum(1, 2)); // 3
다양한 모듈 스펙
-
자바스크립트 모듈 구현의 대표적인 2가지는, AMD와 Common JS
-
Common Js: 자바스크립트를 사용하는, 모든 환경에서 모듈을 하는 것이 목표이며 Nodejs에서 사용하고 있다.
-
AMD(Asynchronous Module Definition): 주로 비동기 환경에서 사용되는 스펙이다. 브라우저 환경이다.
// math.js exports function sum(a,b){return a + b;} // app.js const sum = require('./math.js'); sum(1,2) // 3
- ES2015(ES6)에서 표준 모듈 시스템인
import/export를 내놓았다.
// math.js export function sum(a, b) { return a + b; } // // app.js import { sum } from "./math"; sum(1, 2);
-
import * as exampleContainer from './경로':exampleContainer라는 객체를 통해서 해당 경로에 있는export된 모든 항목을 가져올 수 있다. -
import {example1, example2} from './경로':{}를 통해 해당 경로에 있는, 원하는 항목만을 불러올 수 있다. -
import example from './경로':export defalut된 항목을 불러올 수 있다.
브라우저의 모듈 지원
- 브라우저에서는,
script태그를 통해 다음과 같이 모듈을 사용한다.
<script type="module" src="app.js"></script>
-
app.js파일 안에, 원하는 모듈의 항목을import하여 사용하나, 이는 모든 브라우저에서 적용이 되지 않는다. -
브라우저에 무관하게 모듈을 사용하고자 할때, 웹팩으로 이를 가능하게 할 수 있다.
Reference
