모듈화?

• 모듈화의 사전적 정의는 다음과 같습니다.
  • 어떤 큰 문제를 해결하려고 할 때 그대로 놓고 해결하는 것은 매우 어려운 일이다. 따라서 일반적으로 큰 문제를 작은 단위로 쪼개어 그것을 하나씩 해결한다. 소프트웨어 개발에서도 마찬가지이다. 가장 먼저 하는 작업이 실제로 개발할 수 있는 작은 단위로 나누는 것이다. 이렇게 **작은 단위로 나누는 것을 '모듈화'**라고 한다. [참고]
• 즉 모듈화는 코드의 가독성과 관리의 효율성을 위해 단위 별로 기능을 쪼개어 개별 파일로 만들어 관리하는 것을 의미합니다.
  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
• 모듈화는 파일 스코프를 따른다. 즉 변수와 함수가 파일 내부에서만 유효하다. 따라서 이러한 파일에 접근하는 방법을 export, 불러오는 방법을 import라고 한다.

자바스크립트의 모듈?

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 용도로 만들어진 언어이다. 본래는 import와 export를 지원하지 않는다. script로 여러 JS 파일들을 하나의 HTML에서 로드 하면, 모두 하나의 전역 객체를 공유한다. 즉 하나의 파일 내에 있는 것처럼 동작한다. 따라서 전역변수가 중복 될 수 있는 문제가 발생한다. 즉 자바스크립트에서는 표준 모듈 시스템을 제공하지 않았다.

// 모듈화 가 없을 때에는 모두 객체로서 처리
// 각 파일 별로 전역 공간을 지정하는 객체를 설정.
var NAMESPACE = NAMESPACE || {};
NAMESPACE.plus = funvtion(){}

• 따라서 모듈화의 필요성에 따라서 제안 된 것이 CommonJS와 AMD다.

CommonoJS

• Javascript Everywhere를 목적으로 한 자발적 워킹 그룹(Node.Js 이전)

  // 파일을 분리하고 필요한 파일을 주입 받아 활용할 수 있게 한다. 
  // math.js
  module.exports = {
  	sum: function (a, b) { return a + b; }
  };
  
  // sub1.js
  const sum = require('./math.js').sum;
  module.exports = {
  	plusTwo: function (a) { return sum(a, 2); }
  }
  
  // main.js
  const plusTwo = require('./sub1.js').plusTwo;
  console.log(plusTwo(10));  // 12
  // main.js <- sub1.js <- math.js
  

• 장점

  1. 단순하고 직관적이다.
  2. 파일을 비동기적으로 로딩 가능한 서버환경에 적합(Node.js).

• 단점

  1. script 파일 로딩시 blocking이 발생하는 브라우저 환경에서는 성능저하 발생.

  2. 이를 극복하기 위해 script 태그 동적 삽입 방식을 활용하나, 깔끔한 해결책이 될 수는 없다.

     var myScript = document.createElement('script');
     myScript.setAttribute('src', 'script.js');
     myScript.setAttribute('crossorigin', 'anonymous');
     myScript.setAttribute('async', '');
     
     myScript.onload = function() {
     }
     
     document.getElementById('root').appendChild(myScript);
     

• 노드 JS에서는 파일 비동기 접근이 되어 그 순간에 바로 변수에 할당한다. 하지만 브라우저 환경에서는 그렇지 않다. 요청은 하지만 동기적으로 이루어지기에 해당 변수에는 undefined가 담기고 넘어간다. 이후 다운로드가 완료되면, 그때 추가 동작이 없기에 변수는 영원히 undefined이다.

AMD (Asynchronous Module Definition. RequireJS는 AMD 명세의 구현체. )

• CommonJS가 브라우저환경에서의 비동기 모듈 로드에 대한 관심이 저조한 것에 대한 반감으로 분리되어 나온 집단.

// math.js 배열안에 필요한 의존성이 들어온다.
define([], function () {
	function sum (a, b) { return a + b; }
	return {
		sum: sum
	}
});

// sub1.js math는 math.js 에서 return한 sum 객체가 된다.
define(['math'], function (math) {
	function plusTwo (a) {
		return math.sum(a, 2);
	}
	return {
		plusTwo: plusTwo
	}
});

// main.js
require(['sub1'], function (sub) {
	console.log(sub.plusTwo(10)); // 12
});

• 현재는 클라이언트 사이드 자바스크립트에서 동작하는 ES6 모듈을 사용가능하다. (export, import)
  • 장점
    1. browser 환경에서 비동기 네트워크 로딩 처리가 가능.
  • 단점
    1. 존성 주입 개념을 이해하기에 난이도가 다소 높음.
    2. 코드가 복잡하며, 주입 소스의 순서를 지켜야 하므로 오류 발생 가능성이 높음

결론