[Javascript] 모듈

youngseo·2022년 2월 21일

Javascript

목록 보기

29/46

모듈

1. 모듈이란?

프로그래밍 언어 관점에서 모듈이란 독립적인 특성을 가진 기능 단위의 부품이라고 할 수 있습니다.

개발하는 애플리케이션의 크기가 커지면 확장성과 유지보수 측면에서 파일을 여러 개로 분리하는 시점이 오게 됩니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

2. 자바스크립트에서의 모듈

자바스크립트는 원래 웹페이지 내 보조 작업을 처리하기 위한 언어였다. 때문에 다른 프로그래밍 언어와 달리 초기 모듈 시스템이 고려되지 않았습니다.

그렇기 때문에 자바스크립트를 사용하는 많은 개발자들이 이 모듈을 흉내내기 위해서 IIFE 또는 클로저 같은 패턴을 사용해 스코프를 정의하고 전역공간에서 겹치지 않도록 노력해왔습니다.

하지만 자바스크립트가 발전하면서 ES2015+부터는 모듈을 지원을 하며 보다 효율적으로 코드를 관리를 할 수 있게 되었습니다. 이번 포스팅에서는 이 모듈에 대해 공부를 해보도록 하겠습니다.

3. CommonJS

Javascript not jus for browers any more!

CommonJS는 자바스크립트의 하나의 모듈 시스템이며, 자바스크립트에서 문법적으로 지원하는 시스템은 아닙니다. 즉, 자바스크립트의 커뮤니티에서 만든 모듈시스템입니다.

CommonJS홈페이지 상단에 Javascript not jus for browers any more!라고 안내가 되어 있습니다.

수많은 자바스크립트 개발자분들이 자바스크립트를 브라우저 위에서만 동작시키는 것에 대해 안타깝게 생각을 해 자바스크립트라는 언어를 어디에서나 동작할 수 있는 언어를 만들기 위해 많은 노력을 해왔습니다. 그 덕분에 자바스크립트를 node.js기반 혹은 다른 시스템을 기반으로 해 다양한 환경에서 개발할 수 있는 형태로 사용할 수 있게 되었습니다.

그렇게 해 Node.js까지 나타나게 됩니다. Node.js는 v8 자바스크립트 엔진을 활용한 자바스크립트 런타임입니다. 런타임이란 이제 자바스크립트를 실행시킬 수 있다는 것입니다.

이 Node.js모듈도 CommonJS로 이루어져 있습니다. Node.js에서 CommonJS를 활용기 때문에 이렇게 모듈들을 사용할 수 있는 것입니다.

더이상 자바스크립트 하나의 파일에서 혹은 즉시실행함수로 감싸서 사용하는 것이 아니라 이렇게 수많은 파일들 및 라이브러리를 모듈 단위로 가져와 사용할 수 있게 된 것입니다.

3-2 Export & Import

function Person(name, age, location) {
	this.name = name;
	this.age = age;
	this.location = location;

	this.getName = function () {
		return this.name + '입니다';
	};
}

module.exports = Person; //Person함수를 내보냄

const Person = require('가져올 경로'); // Person변수에 할당.

const me = new Person('jang', 10, 'Korea');
const you = new Person('kim', 20, 'China');

console.log(me.getName());
console.log(you.getName());

다양한 파일을 가져올 수도 있으며, 다양한 함수나 객체, 변수를 내보낼 수 있습니다. 더이상 즉시실행함수나 클로저 패턴을 이용해 스코프를 정의하고 전역공간에서 겹치지 않도록 노력할 필요가 없습니다.

CommonJS와 require키워드는 주로 Node.js를 활용한 서버측 개발을 할 때 많이 사용할 수 있습니다.

4. AMD

Asynchronous Module Definition

AMD는 모듈을 선언하면서 의존하고 있는 모듈을 함께 명시함으로써 비동기적으로 의존 모듈을 불러옵니다.

CommonJS의 경우 서버 위에서 동기적으로 동작을 했습니다. 서버가 아닌 브라우저에서 동기적이지 않고 비동기적으로 동작하기 위한 욕구로 AMD라는 모듈 시스템이 탄생을 하게 되었습니다.

commonJS(서버, 동기적특성)

const module = require('module')

module.exports = module

AMD(브라우저, 비동기적특성)

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

기본적으로 모듈로더를 require를 사용했다는 점은 비슷하지만 define으로 모듈을 가져오고 함수로 받아서 사용을 하며 사용구문이 다릅니다.

5. UMD

Universal Moudule Definition

Universal 양쪽 모두 지원한다는 뜻을 가지고 있습니다. 이렇게 단어에 뜻과 같게 USMD는 AMD와 CommonJS 두 방식 모두 지원을 하며 클라이언트, 서버 어디에서나 작동을 합니다.

내가 작성한 코드를 모듈 형태로 배포하는 경우 클라이언트, 서버 모두 동작을 하게 만들어야 하는 경우는 흔치 않을 수 있을 수도 있으며 필연적을 그래야하는 경우가 있을 수 있는데 이경우 UMD를 고려할 수 있습니다.

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