[자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스

* 오늘은 라이브러리를 만드는데 필요한 기본 지식인 모듈과 네임스페이스에 대해서 공부하자.

2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요

2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계

* 배경

: 초창기 웹 개발이 자바스크립트 이루어지기 시작했을 때에는 자바스크립트는 HTML 페이지의 상단 <script> 태그 안에서 간단한 이벤트 처리를 처리하고 이 함수들은 일반적으로 top-to-bottom으로 실행 되는 것이 일반적이었다. 그 당시에 다루던 이벤트라 하면 그저 onclick,onsubmit, onkeydown 등 간단한 기능만을 다루었기 때문에 event-driven 이기는 하지만 일의 처리는 순차적으로 하는 일반적인 언어로 취급되었다.

: 하지만 최근 웹 기술의 발달로 인해 자바스크립트가 담당하는 범위가 넓어지고 있는 실정이고, HTML5와의 연계로 자바스크립트가 담당할 수 있는 범위까지 계속 넓어지고 있다. 이렇게 많아지는 다양한 기능들과 복잡한 기능들을 관리하고 재사용하기 위해 이전에 (있기는 있었지만) 개념이 약했던 자바스크립트 라이브러리가 많이 대두되고 있고, 이를 관리하기 위해 모듈과 네임스페이스를 활용하게 되는 것이다.

* 개요

: 모듈이라 하면 라이브러리의 기본 단위가 될 것이다. 여러 개의 모듈들이 모여서 하나의 라이브러리를 이루는 것이 기본이고 간단한 라이브러리인 경우는 하나의 모듈이 하나의 라이브러리를 이루고 있을 것이다. 예를 들자면, Javascript의 common 라이브러리에서 String이나 Array 이러한 것들이 하나하나의 모듈이 되는 것이다. 모듈을 사용하는 이유는 재사용을 편하게 하기 위해 

: 그리고 네임스페이스는 이러한 모듈을 보관하는 저장소라고 보는 것이 좋다. C언어의 네밍스페이스나 자바의 패키지와 같은 개념으로 보면 된다. 같은 이름의 모듈을 구분해주기 위해 다른 네임스페이스를 사용하면 된다.

: C에서는 namespace 키워드가 있고, 자바에서는 package라는 키워드가 있지만 자바스크립트에는 그러한 키워드가 없다. 기본적으로 모듈이라던가 네임스페이스를 생성하거나 관리하기 위한 기법을 제공하기 않기 때문에, functional 언어인 scope 등을 이용해서 모듈과 네임스페이스를 구성하는 것이다.

* 모듈 초기화하기

: 모듈을 초기화하는 방법은 간단하다. 바로 아래와 같이 초기화하는 것이 일반적이다.

(function(){

//모듈 내용 추가

})();

: 이러한 소스코드는 어느 자바스크립트 라이브러리를 뜯어봐도 다 들어있을 것이다. 가장 유명한 jquery 또한 이러한식으로 초기화를 하고 있다. 진짜 그러한지 직접 확인해보자.

http://code.jquery.com/jquery-1.8.2.js

위의 소스코드 맨 위에 살펴보면,

/* 

 *jquery Javascript 어쩌고저쩌고..

 */

(function(window, undefined){

: 이렇게 시작하고 있다. 위에서 모듈 초기화하는 것과 같은 방법이다. 그런데 다른 점이 있다면, 함수가 인자를 받고 있다는 점이다. 인자는 어떻게 받고 있는지 한번 확인해보자.

})( window );

: 초기화할 때 기본적 오브젝트인 window를 넘겨주고 있다. 이는 외부의 window 객체에 지금 선언한 function() 안의 모듈, 함수나 정보를 매핑을 하고자한다는 것을 의미한다.

* 모듈 전역 노출(expose as global) 

: 모듈의 전역 노출이라함은 모듈을 초기화하고나서 자바스크립트 어디서든 사용하고자 할 때 전역 변수와 같은 식으로 설정을 하는 것이다. 이것은 몇 가지 방법들이 있다. 그 중 대표적으로 사용되는 2가지를 살펴보자.

1. window로 노출시키기

: 이 방법은 jQuery에서도 사용하는 방법이다. 위의 모듈 초기화를 닫는 부분에 보면 현재 브라우저의 기본 window 객체를 인자로 넘기고 있다. 그러면 이 인자를 이용해서 지금 만든 모듈을 노출 시키면 되는 것이다.  jquery에서는 위의 모듈 초기화를 닫는 부분 바로 위에 있다.

// Expose jQuery to the global object 

window.jQuery = window.$ = jQuery;

: 이렇게 설정하면 모듈 외부에서 jQuery 또는 $ 를 이용해서 현재 모듈 내부에 선언한 jQuery를 호출할 수 있는 것이다. 

2. 전경변수에 모듈을 할당

: 이것은 인터넷에 널리퍼져있는 방법이다. 그냥 지나가는 자바스크립트 라이브러리 붙잡고 어떻게 전역으로 노출을 시키는지 살펴보면 이 방법을 쓰는 경우가 상당히 많다. 이 방법은 쉬우면서도 이해하기에도 아주 쉽다.

var myModule;

(function(){

/* ... 내용 */

   myModule = insideDefinedModule;

})();

: 이 외에도 return 값을 활용하는 방법과

var myModule = (function(){ 

    /* insideDefinedModule 정의 내용*/

return insideDefinedModule;

})();

: 함수 내부에 함수를 한번 더 선언해서 활용하는 방법 등 다양하게 응용이 가능하다.

var myModule = (function(){

    /* insideDefinedModule 정의 내용*/

return {

init : function() {

return insideDefinedModule;

}

};

})();

* 왜 모듈을 쓰는가?

: 어떻게 보면 약간 귀찮은 부분이지만, 왜 이런식으로 하는 것일까? 솔직히 아래와 같이 간단하게 전역 함수로 사용할수도 있을 것이다.

function $(selector){

/* do something */

}

: 힘들게 (function(){})(); 와 같이 하는 이유는 흔히들 말하는 encapsulation의 이유에 대해서 생각을 해보면 될 것이다. 위와 같이 정의하고 그 내부에 어떠한 변수를 가지고 있게 된다면 그 변수는 다른 언어에서 흔히 말하는 private의 속성을 가지게 된다. 외부에서는 접근이나 수정이 안되도록 나의 모듈의 정보와 컨텍스트를 보호할 수 있는 것이다.

: 위의 이유를 조금 더 확장해서 설명하자면, 만약에 우연하게 나와 같은 라이브러리 이름을 사용하는 사람이 나타났다면 어떻게 될까? 단순히 overwrite하는데 그치지 않고 그의 함수들은 나의 정보들을 무차별적으로 바꿀 수 있을 것이다. 물론, 이러한 overwrite를 해결하기 위한 것이 바로 네임스페이스이다.

* 네임스페이스 소개

: 아직 네임스페이스를 이용하고 있는 라이브러리는 많이는 없다. 하지만 대형 벤더들은 이미 사용하고 있다. 이들의 서비스는 다른 서비스와 겹쳐지면 서비스의 제공이 불편해지기 때문에 필수적으로 사용하고 있는 것이다. 이를 살펴볼 수 있는 대표적인 라이브러리는 바로 Google의 API들과 Yahoo의 YUI일 것이다. 그들이 사용하고 있는 라이브러리를 한번 보자.

: 아래는 구글 맵의 자바스크립트 API이다. 구글 API의 내용을 가져오는 부분을 살펴보자.

- 참고 : https://developers.google.com/maps/documentation/javascript/tutorial?hl=ko

<script type="text/javascript">

  function initialize() {

    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  }

</script>

: 이번에는 YUI를 한번 보자. 아래는 야후의 유용한 자동완성 위젯의 예를 가져온 것이다.

- 참고 : http://developer.yahoo.com/yui/autocomplete/

var myAutoComp = new YAHOO.widget.AutoComplete("myInput","myContainer", myDataSource);

: 객체를 만드는데 C나 자바에서 처럼 앞에 네임스페이스를 붙여두고 객체를 생성하고 있는 것이다. 이처럼 회사에서 상업적인 다양한 API를 라이브러리로 제공하고 있다면, 네임스페이스를 잘 활용해서 우리 회사에서 내놓은 어떠한 API인지 네임스페이스만 보고도 알수 있다면 훌륭한 네임스페이스가 될 것이다.

* 네임스페이스 사용하기

: namespace나 package가 없는 자바스크립트에서는 도대체 어떻게 이를 생성할까? 힌트는 자바스크립트는 functional language 라는 점이다.

: 다른거 없다. 그냥 객체 안에 객체를 만들어서 네임스페이스'처럼' 사용하면 되는 것이다. 허무..

var com;

if(!com) com = {};

if(!com.unikys) com.unikys = {};

com.unikys.myModule = {};

(function(){

com.unikys.myModule = insideDefinedModule

})();

: 직관적이라 별도의 설명이 필요없을 것 같다. 단지 하위 네임스페이스를 지정하기 전에 현재 존재하는지 여부부터 체크하고 존재하지 않는다면 새로운 객체를 만드는 과정이 있을 뿐이다.

: 이를 활용하여 만약에 이미 라이브러리를 로드했는지 안했는지 판단할수도 있으며, 이전버전과 혼용해서 사용하는 경우 라이브러리 안에 version 등을 넣어두고 활용하는 방법도 있다. 이러한 것들은 좀 더 큰 프로젝트를 만나게 되면 하게 될테니 가능하다는것만 염두해두자. 

* 자바스크립트 라이브러리 만들기 기본 지식 모듈과 네임스페이스 끝.