JS NORMAL | 모듈

chaen·2024년 1월 30일

JS Grammar

목록 보기

26/28

❓ 모듈

자바스크립트 초창기에는 스크립트의 크기가 작고 단순하여 모듈 관련 표준 문법이 없었다. 하지만 개발 규모가 커짐에 따라 파일을 여러 개로 분리하게 되었고, 그 시도가 모듈 시스템으로 이어졌다.
'모듈(module)' 은 특정한 기능을 가진 클래스나 함수로 구성된 라이브러리로 분리된 각각의 파일을 일컫는다.
'모듈 시스템' 은 모듈을 생성하고, 불러오고, 사용하는 드으이 모듈을 다루는 다양한 기능을 제공하는 시스템이다.

💻 모듈의 종류

★ CommonJS

Node.js 서버를 위해 만들어진 모듈 시스템
require()와 module.exports를 사용
동기적으로 동작한다.

module.exports

여러 프로퍼티, 단일 프로퍼티 가능
사용 권장

//내보내기 - func.js
const obj = {
function func1 (param) { ... },
function func2 (param) { ... },
}
                        
// 하나만 선택하여 내보내기                        
module.exports = fun1;
// 배열로 여러 개 내보내기
module.exports = { fun1: func1, fun2: fun2 }
// 키와 벨류가 똑같을 경우 생략 가능
module.exports = { fun1, fun2 }
// 전체를 변수에 담아서 내보내기
module.exports = obj;

// ----------------
//가져오기
const obj = require('./func');
obj.func1(10);
                        
//구조분해할당 이용하기
const {fun1, fun2} = require('./func');
func1(10);

exports

여러 프로퍼티 내보내기 가능

//내보내기 - func.js
function func1 (param) { ... }
function func2 (param) { ... }
exports.fun1 = fun1;
exports.fun2 = fun2;   

//가져오기
const obj = require('./func');
obj.func1(10);
obj.func1(20);

AMD

Asynchronous Module Definition
모듈을 선언하면서 의존하고 있는 모듈을 함께 명시
비동기적으로 의존 모듈을 불러온다.
브라우저에서 사용 가능하다.
require.js라는 라이브러리를 통해 처음 개발되었다.
최근에는 많이 사용되지 않는다.

define(['module'], function(module){
  return function(){ ... }})

UMD

Universal Module Definition
AMD와 CommonJS 두 방식을 모두 지원하기 위해 제작
클라이언트, 서버 어디에서나 작동 가능

(function (root, factory){
  if (typeof exports === 'object' && module.exports){
    //CommonJS
    module.exports = factory(require('module'))
  } else if (typeof define === 'function' && define.amd){
    //AMD
    define(['module'], function(module){ })
  } else { // 전역공간
    root.global = factory(root.module)
  }(this, function (module){ // 실제 모듈 }))

★ ES6-Module

ES6 이후로 브라우저에서 지원하는 모듈 시스템
인터넷 익스플로어, 모바일 등에서 지원 x
import, export 사용
nodeJS 에서 사용할 경우 따로 "type"이 "module"임을 지정해줘야하며, commonJS와 혼용할 수 없다.

export, import

내보내고 싶은 함수, 변수 앞에 export를 붙인다.

//내보내기 - func.js
export function func1 (num) { ... }
const func2 = function (num) { ... }
export { func2 }

//가져오기
// 사용하려는 객체를 선택하여 가져오기
import { func1, fun2 } from './func.ㅓ누  '
func1(10)

// 모든 객체를 가져오되 원하는 이름을 붙여서 사용한다.
import * as obj from './func'

obj.func1(10)
obj.func2(20)

export default, import

중괄호 삭제
내보냈던 쪽에서 사용한 명칭을 그대로 사용할 필요는 없다.

//내보내기 - func.js
export default obj = {
    func1: function (num) { ... },
    func2: function (num) { ... }
}
export function func1 (num) { ... }                        

//가져오기
import testObj, { func1 } from './func'

testObj.func1(10)
testObj.func2(20)

브라우저에서 사용하기

type를 module로 명시
import 하는 파일 뒤에 js 확장자 명시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="func.js"></script>
    <script type="module">
      import { func1, fun2 } from './func.js';
      func1(10)
    </script>
  </head>
  <body></body>
</html>