티스토리 뷰

Web/javascript & jQuery

javascript module require()

구글링쟁이 k9e4h 2016.08.16 11:09

자바스크립트 코드가 실행되려면 다른 스크립트가 먼저 로딩되어야 한다거나 하는 경우가 있는데, 자칫 스크립트 로딩의 순서가 꼬일 경우 에러를 뱉어내며 동작하지 않을 수 있다.



JavaScript에게 모듈이란

먼저 모듈에 대해 간단히 짚고 넘어가보자. 

모듈의 개념은 Divide and Conquer 로 설명되는 각 기능(알고리즘)의 분할과 그 분할의 결합으로 생각해볼 수 있다. 

보통의 성숙된 언어에서는 이러한 모듈화를 언어 차원에서 지원하고 있는데, 예를 들어  java의 경우에는 모듈이 instance로 생성되어지며 모듈끼리의 구분은 package로 구분된다. 

그리고 모듈의 구현은 접근 제어자(private, public 등)의 사용으로 캡슐화를 보장하며, 필요한 것만 공개해서 그 모듈을 사용하려는 사용자가 쓸데없이 많은 지식을 가질 필요 없이 부담없이 사용할 수 있다.

JavaScript는 이러한 모듈화나 접근 제어를 언어레벨에서 명시적인 지원을 하지 않으며 package 등의 구분도 없기에... 파일간의 변수 충돌이나 전역공간 변수 난립(global scope pollution)등의 문제가 발생할 요지가 많다. 

보통 이러한 경우를 고려한 JavaScript의 일반적인 모듈 구현은 다음과 같다
(function(exports) {
  "use strict";

  // private 변수
  var name = "I'am a module";

  // 외부에 공개할 public 객체
  var pub = {};

  pub.getName() {
    return name;
  }

  // 외부 공개
  exports.aModule = pub;

})(exports || global);

(exports || global).aModule.getName(); // I'm a module
이러한 구현은 변수를 private 화 할 수 있으며 그로 인한 캡슐화로 모듈 사용이 쉬운 장점이 있지만, 여러개의 모듈을 선언하면서 exports 객체에 프로퍼티가 겹칠 경우 앞서 선언된 공개 속성은 덮어써지는 문제가 있고,  모듈간 의존성이 있을때 의존성을 정의하기가 매우 어렵다. 



모듈은 그 모양과 크기가 여러 가지 있는데, 일반적인 목적은 하나같이 작업 환경에 불러오기만 하면 알아서 원래 가지고 있는 기능을 잘 수행하는 데 있습니다. 보통 모듈은 기본적으로 각각의 개발자 문서와 설치 과정 그리고 브라우저나 서버와 같은 실행 환경의 정보를 제공하고 있습니다.

이러한 모듈은 프로젝트에 필요한 기능을 메꿔주면서 나중에 추가와 제거와 같은 의존성 관리가 훨씬 간편해지는 효과가 있습니다. 모듈이 제공하는 장점과 유연성을 생각해보면, 이젠 어떤 덩치 큰 라이브러리를 단순하게 추가하는 일은 점점 줄어들 것입니다.


1
var module = require('./mymodule');

만약 위처럼 확장자를 입력하지 않으면 어떻게 될까요?

  1. 먼저 mymodule.js 파일을 찾습니다. 있다면 그 파일을 추출합니다.
  2. mymodule.js 파일이 없다면 mymodule 이라는 폴더를 찾습니다. 그리고 그 폴더의 index.js 파일을 찾아 추출합니다.



'Web > javascript & jQuery' 카테고리의 다른 글

javascript 참고 사이트  (0) 2016.08.16
javascript this self 차이점  (1) 2016.08.16
javascript module require()  (0) 2016.08.16
javascript와 jquery의 차이  (0) 2016.08.11
[javascript] null / undefined / empty  (0) 2016.08.11
javascript array의 function들  (0) 2016.08.11
댓글
댓글쓰기 폼