Section 9. 모듈

Udemy - JavaScript: The Advanced Concepts

Section 9. Modules

모듈

의존하고있는 것들을 import
다른곳에서도 쓸수있게 export

구분짓는것도 필요하고,
서로 소통할 길도 있어야한다

모듈이 없던 시절

<script src=... /> 로 여러개 파일을 불러와도
모두 하나로 퉁쳤고
모두 글로벌 scope에 속했음

Module Pattern : IIFE

JS의 첫번째 모듈(컨셉)
jQuery가 이런식으로 되어있음

//IIFE
var myModule = (function(globalVar){
   /*
    * 여기에서는 global변수도 쓸수있고
    * 나만의 변수도 가질수있고
    * return해서 공개할수도있어 <-- export
    */
})(globalVar) <-- import

• 그러나 여전히 글로벌 namespace를 하나는 쓰고있고 (오염될수있고)
• 의존하고있는(import) 변수가 이 모듈보다 앞에 있어야함 (script 선언 순서 신경써야함)

CommonJS

nodejs에서 도입했고 여전히 사용중
(브라우저보다도 먼저 모듈시스템을 적용)

npm : node package manager
사용자들 사이에 module을 쉽게 공유할 수 있었음
(nodejs가 유명해진 이유이기도 함)

var module = require('module1')	<-- import

function foo () {}

module.exports = {	
	foo: foo
};

2) CommonJS에서는 import를 synchronous 하게 가져오다보니
import가 끝나야 실제 코드가 작동하는데
이건 브라우저에서는 적용이 어려움 (nodejs는 서버전용이라 무리가없음)

번들링

browserify script.js > bundle.js
실행중 import 하던걸 모두 합쳐
하나의 거대한 파일로 만들어 (browserfy, 웹팩의 역할)
브라우저 사용시에도 문제가 없게 됨

AMD

CommonJS와 함께하려했으나 합의하지 못하고 탄생
(언어의 표준이 없을 경우 생기는 문제임...)

require.js라는 모듈 로더 라이브러리를 주로 이용
브라우저임에도 모듈을 aync하게 로딩함

define(['module1'], 
    function (module1) {
        
        var a = module.hahah;
        function foo(){};
        
        return {
        	foo: foo,
        }
    }
);

파일스코프는 없지만, define으로 네임스페이스 역할

UMD

CommonJS, AMD 모두와 소통하고자 사용했던 모듈방식
지금은 if문으로 둘중 뭘 쓰는지 체크해서, 그에 맞는 방식으로 로드하는 정도임

ES6 Module

드디어 JS native Module 탄생!
import, export, export default
html에서 script태그를 쓸 때는 <script type='module'> 로 인식시켜줘야함

import, export 구문 예제
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

읽기목록

https://d2.naver.com/helloworld/12864