Javascript 동적으로 Import 하기

발생일: 2009.08.27

문제:
픽셀드로우 개편 작업 중이다.
페이지에 필요한 스크립트를 원하는 것만 쉽게 넣어 관리할 수 있는 방법을 생각하고 있다.

예를 들어, pixeldraw.js, pixeldraw.canvas.js, pixeldraw.colorspecturm.js, pixeldraw.list.js 와 같이
여러 개의 js 파일이 그룹별로 나뉘어져 있다고 가정해보자.

매 페이지마다 스크립트 태그를 넣어주자니 코드가 지저분해지고,
jsp 의 include 등을 써서 처리하자니 페이지별로 구분하기가 쉽지 않다.

그리고 무엇보다, 깔끔하게 가볍게 한 줄로 표시하고 싶단 말이지...

어떤 좋은 방법이 있을까?

해결책:
기존에 js import 에 대해서 많은 이슈가 있었나보다. 검색해보니 유용한 정보가 많이 있다.

이 주제가 이슈화되기 시작한 것은,
AJAX가 유행하면서 기존에 비해 Javascript 코드량이 많아졌기 때문이었다.
클라이언트에서 다운로드 받아야 하는 스크립트의 양이 많아지다 보니,
해당 코드가 필요할 때에 동적으로 로드하자... 이런 아이디어가 나왔던 것.

이를 Ajax Pattern 중에 On-Demand Javascript 라고 한다.
위 링크를 읽어보면 전체적인 흐름과 상세 내용, 응용 사례 등을 알 수 있다.

모든 내용이 위 링크의 패턴 정의에서 설명되어 있지만,
그 외, 우리말로 된 알아보기 쉬운 링크들로 정리해보면.^^ㅎ

일단 가장 기본적으로 document.write 를 이용해서 import 하는 방법이 있다.

헌데 이럴 경우, XHTML에서 정상적으로 작동하지 않는 등의 문제가 있어
document.write 없이 스크립트 import 하는 방법을 제안한다. (Insert in place without document.write 참고 : 영문)

더 나아가 위 방법의 경우,
스크립트 호출 순서를 정할 수 없기 때문에 xmlhttprequest를 이용해서 import하는 방법에 대한 아이디어도 있다.
누가 먼저인지는 모르겠지만, 이런 아이디어를 기반으로 패턴에 정의된 xmlhttprequest 방식의 import 방식이 발전된 것 같다.

dojo 프레임웍에서 사용하는 dojo.require 방식과 관련하여 블로깅 해 둔 것도 읽어보면 좋다.


음... 나는 일단 깔끔하고 간단한 게 좋으니까,...
아래와 같이 만들어보려고 한다. 이미 jQuery를 사용하고 있으니까 jQuery selector를 사용해서 깔끔하게 구현해보자.

-- pixeldraw.js 파일
/**
 * 해당 파일명으로 js 파일을 로드한다.
 * @param jsName 파일명, 파일명, 파일명 과 같은 형태
 */
var PixelDraw = {
    /**
     * 로드된 스크립트
     */
    loaded: [],

    /**
     * 스크립트를 동적으로 로드한다.
     * 패러미터는 , 로 구분된 String 형태이며,
     * 각 파일은 pixeldraw.{1}.js 형태로 호출된다.
     */
    load: function() {
        var sc = $('script[src *= "/js/pixeldraw.js"]'); // pixeldraw.js 스크립트 Element 를 가져온다
   
        // 마지막 것부터 넣는다.
        var idx = arguments.length;
        while (idx-- > 0) {
            if ($.inArray(arguments[idx], this.loaded) == -1) { // 중복처리
                this.loaded.push(arguments[idx]);
                sc.after('<script type="text/javascript" src="/js/pixeldraw.' + arguments[idx] + '.js"></script>');
            }
        }  
    }
}


-- 페이지 부분
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/pixeldraw.js"></script>
<script type="text/javascript">
    PixelDraw.load('canvas', 'colorspectrum', 'list');
</script>


import 구문이 두 번 나뉘어 호출될 경우 순서대로 import 되진 않겠지만,
페이지 초기화 이외에서 호출하지는 않을 테니 이 정도면 괜찮을 것 같다.

이걸 알아보다가 알게 된 AJAX Pattern 을 좀 공부해봐야겠다.