Javascript의 AMD, CommonJS 모듈화

 

기존 모듈화 방식 : 스크립트 태그 ( <script src = "./**.js" ></script>

<script type="text/javascript" src="./index.js"></script>

기존에는 자바스크립트 파일들을 script 태그를 이용하여 불러오는 방법을 사용하였다. script태그를 통한 방법 외에는 모듈화 시킬 방법이 없있기 때문이다.

 

script태그를 통한 방식에는 크게 두가지의 문제점이 발생할 수 있다.

 

• 각각의 태그로 불러온 js파일들의 전역변수가 공통으로 생성된다. 전역 변수의 값이 바뀌어 에러가 발생할 수 있다.

var alertNum = 10; // index.js
var alertNum = 20; // page.js

<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript" src="./page.js"></script>
<!-- HTML File -->

 

전역변수 alertNum을 index.js와 page.js에서 각각 선언하여 값을 할당한 후, 해당 파일들을 script태그를 통하여 가져오면 값의 변화가 생기게 된다. page.js가 index.js 이후에 불러와지기 때문에 전역변수 alertNum은 20으로 값이 변하게 된다.

이후 자바스크립트 코드에서 alertNum변수를 사용할 경우 변수값은 20으로 통일되어 출력되게 된다.

 

• js파일들을 불러오는 순서가 올바르지 않을 경우 에러가 발생한다.

$(document).ready(function() {
    console.log('READY');
});
// index.js에 정의된 함수

<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- HTML File - script js files -->

 

index.js에 jquery 문법을 활용하여 페이지가 로드된 후, 콘솔에 READY라는 로그를 남기는 코드를 추가하였다.

이를 실행할 경우 에러가 발생한다.

해당 소스코드에는 jquery관련 cdn파일이 먼저 불러와져야 하는데 script태그의 순서가 잘못되어 있다. jquery cdn없이 index.js를 불러왔을 경우, jquery 문법이 정의되어져 있지 않기 때문에 오류가 발생한다.

사소해 보이지만 위에 2가지 사항으로 인해 엄청난 오류가 발생할 수 있다. script태그를 통한 모듈화로 인해 발생할 수 있는 에러를 방지하기 위해 CommonJs와 AMD 방식의 모듈화가 등장하였다.

---

CommonJS

• exports 키워드를 사용하여 모듈화시키고 require 키워드를 사용하여 모듈을 불러오는 방식이다.
• 서버 사이드 플랫폼인 Node.js에서 채택하여 사용하고 있는 모듈화 방식이다.

1. CommonJS 모듈 지정

// common.js
var common = function (text) {
  const commonjs = 10;
  console.log('commonjs : ', commonjs);
  console.log('text : ', text);
}

module.exports = common;
// 모듈화

 

2. CommonJS 모듈 불러오기

const requireCommon = require('./common.js');

requireCommon.common('불러오기');

// require 키워드로 모듈을 불러온 후, common이라는 모듈을 가져오면 아래의 결과가 출력된다.
// 매개 변수에 불러오기  라는 값을 넣었기 때문에 모듈의 text에 불러오기  라는 값이 할당된다.
/*
	commonjs : 10
    text : 불러오기
*/

 

AMD

• define 키워드를 사용하여 모듈화시키고 require 키워드를 사용하여 모듈을 불러오는 방식이다.
• 비동기적인 로딩을 활용할 때 주로 사용되는 모듈화 방식이다.
• Require.js를 필요로 한다.

 

1. require.js 선언

<script 
    type="text/javascript"
    src="http://requirejs.org/docs/release/2.3.2/minified/require.js">
</script>

 

2. define 키워드를 사용하여 amd 모듈 정의

define(['amd_module'], function() {
  // amd_module은 모듈명이다.
  // module명은 배열안에 작성하여야 한다.
  var amdModule = {};
  
  amdModule.first = function() {
    console.log('첫번째 amd 모듈');
  };
  
  amdModule.second = function() {
    console.log('두번째 amd 모듈');
  };
  
  return amdModule;
});

 

3. require 키워드를 사용하여 모듈 가져오기

require(['amd_module'], function(amdModule) {
  // 가져올 모듈명을 배열안에 작성한다.
  // 여러개의 모듈들을 가져올 수 있다.
  // function함수 안에 가져온 모듈들을 매개변수로 받는다.
  
  console.log(amdModule.first); // 첫번째 amd 모듈
  console.log(amdModule.second); // 두번째 amd 모듈
});

 

 

https://requirejs.org/

RequireJS