자바스크립트 CommonJS, 모듈을 사용한 웹개발

Last Modified : 2017-08-16 / Created : 2017-07-05

3,599
View Count

주소 복사하기

컴포넌트 단위의 모듈을 개발하여 사용하기 위한 자바스크립트 방법으로 CommonJS가 많이 사용됩니다. CommonJS는 AMD와 함께 모듈화를 가능하게 합니다.

각 모듈은 Scope, Definition, Usage의 세 가지로 구분되어 사용됩니다. 그럼 아래는 간단한 모듈 선언 및 사용의 예제입니다.

# 모듈의 사용, require() 함수

먼저 모듈을 사용하기 위해서는 require() 함수를 사용합니다. require()는 현재 스코프에 원하는 모듈을 import하여 사용할 수 있도록 해줍니다.

var yourModule = require('./yoursomething');

변수 yourModule에는 사용할 모듈 yoursomething.js 파일이 선언되었습니다. yourModule을 통하여 모듈 내부의 프로퍼티에 접근이 가능합니다.

참고로 require() 함수의 인자로 넘겨진 ./yoursomething은 경로와 파일이름과 일치합니다. 이런 이유로 모듈을 추가하거나 얻기 위해 불필요한 변수를 또 다시 사용하지 않아도 되고 파일과 경로만 확실히 안다면 쉽게 사용할 수 있다는 장점이 있습니다. 또한 넘겨준 값은 확장자가 없지만 yoursomething.js를 가리키며 전체 이름이 아니라 확장자를 제외한 부분이 사용된 이유는 자바스크립트의 파일 단위가 하나의 모듈로 사용되기 때문입니다.즉, 하나의 파일에 하나의 모듈이라는 원칙이 정해집니다. 그럼 위와 같은 모듈은 어떻게 설정될까요? 이제 모듈을 추가하는 방법을 알아봅니다.

# 모듈의 추가, module 객체

전역변수 module 객체는 exports() 메소드를 사용하여 현재 스코프의 모듈을 export, 추가할 수 있습니다. 추가된 모듈은 다른 모듈에서 위와 같이 require() 함수로 사용되게 됩니다. 아래는 새로운 모듈을 만들고 추가하는 코드입니다. mysomething.js라는 파일을 만들고 그 안에 코드를 추가합니다.

* mysomething.js 파일

exports.showLog = function(text) {
  console.log(text);
}

/* 모듈 Exports */
module.exports = mysomething;

만약 yoursomething에서 mysomething 모듈을 사용하여 showLog() 메소드를 호출하려면 어떻게할까요?

* yoursomething.js 파일

var mysomething = require('./mysomething');

mysomething.showLog('Works');

위와 같이 각각의 모듈들은 필요한 스코프 영역 내에서만 선택적으로 사용이 가능합니다.

module 모듈 commonjs

아래의 글도 찾고 계시지 않나요?

객체 내부의 프로퍼티 값을 if문으로 비교하는 방법

ECMA Script 2015, ES6에서 class를 사용하여 클래스 선언하기