JavaScript - 모듈

모듈이란?

모듈은 자바스크립트 파일 하나를 말한다. 모듈이 무엇인지보다는 왜 '모듈'이라는 개념으로 사용하게 되었는지가 중요할 것 같다.
sum과 같은 비교적 간단한 동작 내용만을 갖는 웹 프로그램/서비스의 경우에는 모듈을 적용하지 않아도 될 것이다. 하지만 우리가 사용하는 대부분의 서비스는 다양한 기능을 갖는데, 이런 경우 모든 기능을 하나의 파일에 작성하게 되면, 파일의 크기도 커지고 가독성에도 좋지 않게 된다. 그리하여 클래스 하나 또는 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나를 '모듈'이라는 파일로 분리하여 사용하게 되었다.

CommonJS

CommonJS란?

• - 공통 JS 모듈
• - Node.js 환경의 모듈 시스템
• - module.exports와 require 이용
• - 동기적으로 불러옴
• - Backe-End용으로 개발됨

CommonJS 사용법

• 내보내기 (export)
  : 변수 또는 내보내고자 하는 객체를 지정한다.

  module.exports = 'test';
   module.exports = { myAge: 30, myName: '홍길동' }

• 가져오기 (require)
  : 반환값(예_ module.exports 객체) 객체를 가져와 사용한다.

  const req = require('./exportTest.js');

AMD (Asynchronous Module Definition)

AMD란?

• - 비동기적 모듈 선언
• - 가장 오래된 모듈 시스템 중 하나이다.
• - Require.js
• - define과 require 사용
• - Front-End용으로 개발됨

AMD 사용법

AMD의 경우에는 별도의 설치가 필요하다.

• 내보내기 (define)
  : 내보내고자 하는 객체를 지정한다.

  define(['./require.js'], function(req) {
    function sum(num1, num2) {
      return num1+num2;
    }
  
    return { sum: sum }
  });

• 가져오기 (require)
  : 반환값 객체를 가져와 사용하며, 경로를 명확히 지정해야 한다.

  require(['./amdCalc.js'], function(fn) {
    console.log(fn.sum(10, 20));
  });

UMD (Universal Module Definition)

UMD란?

• - 여러 모듈 시스템 동작 가능
• - AMD와 CommonJS를 통합하기 위해 만들어짐
• - AMD의 define 사용
• - CommonJS의 module.exports 사용

ES6

ES6란?

• - 코드 유지관리가 쉬워졌다.
• - 클린코드
• - 모듈 내 필요한 것만 가져올 수 있다.

ES6 사용방법

• 내보내기 (export)
  : 내보내고자 하는 객체를 지정한다.
  • 기본 내보내기
    -- export
  • 단일 객체 내보내기
    -- export default
    -- 하나의 모듈에서 하나의 객체만 보낸다.
    -- 중요하거나 필수 대상을 내보낼 때 사용한다.
• 가져오기 (import)
  : 반환값 객체를 가져와 사용하며, 경로를 명확히 지정해야 한다. 경로 미지정시, 오류가 발생된다.
  • 명시
  예) import { sum } from "./exportTest.js";
  • default 명시, 나머지
  예) import default, * as Name from "./exportTest.js";
  • default 명시, 각각 명시
  예) import default, { sum } from "./exportTest.js";
  • 전체
  예) import * from "./exportTest.js";
  
  

참고한 글
📚 JS 모듈 소개