TIL | 웹팩 등장 이전 모듈의 사용

웹팩 등장 이전 모듈의 사용

모듈: 분리된 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

• webpack 공식문서

• 프론트엔드 개발환경의 이해(기본)