자바스크립트 기본동작과 웹펙 사용 이유

javascript 에서 여러 js에서 선언한 전역함수를 사용하면, 전역함수가 오염될 수 있다.

ex) sum()함수를 전역으로 선언 후, sum = 1 을 선언해버리면 함수 사용이 불가능해진다.

 

 

 

IIFE (Immediately Invoked Function Expression) 즉시 실행 함수

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

 

(function(){ 
    statements; 
})();

> IIFE 함수를 통해서만 접근하도록 해서, 전역함수 오염이 안된다.

 

 

ex)

var math = math || {}; 
(function(){ 
    function sum(a,b){ 
        return a + b; 
    } 
    math.sum = sum; 
})()

> math.sum 객체로 접근 가능.

 

 

---

 

AMD - CommonJS

: exports 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식.

서버사이드 플랫폼인 node.js 에서 사용.

 

ex)

math.js

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

 

app.js

const sum = require('./math.js'); 
sum(1,2);

 

 

AMD(Asynchronous Module Definition)

: 비동기 로딩 환경에서 모듈 사용함. (브라우저 환경)

 

UMD(Universal Module Definition)

: AMD 기반 CommonJS 방식까지 지원하는 통합 형태.

 

 

 

 

ES2015 의 표준 모듈 시스템

ex)

main.js 

exports function sum(a,b) { return a+b; }    //export 구문으로 모듈 생성

app.js

import * as math from './math.js';   //import 로 가져옴. 
math.sum(1,2);

 

 

모듈시스템은 모든 브라우저에서 지원하지 않는다.

chrome 에서 지원하는 경우,

<script type="module" src="src/app.js"></script>

 

 

웹펙 사용 이유

: 모든 브라우저에서 모듈시스템을 사용하고 싶은 경우 Webpack을 사용.