requireJS 사용해보기

요즘은 웹사이트에서 자바스크립트의 비중이 커져서 로딩시간이 길어진다든지, 저사양PC에서 웹사이트 실행속도가 늦다든지 하는 문제가 발생하는경우가 많습니다.

뭐 단적인 예로 회사(제가 다니는..)에서 운영하는 홈페이지의 서버가 외국에 있고, 수십가지 라이브러리를 웹페이지에 로드해야할 경우 JS가 동적으로 로딩 될수 있도록 고려해보는 것도 좋지 않을까요….

동적으로 JS파일을 모듈형식으로 로드할수 있는데 이것을 AMD 방식이라고 하는것 같습니다.

자세한 내용은 다음 링크를 보시면 도움 될 것입니다.

https://github.com/amdjs/amdjs-api/blob/master/AMD.md

그래서 찾아보던 도중 requireJS라는 녀석이 이 기능을 하고 웹페이지 node.js 등에서 많이 사용 된다고 해서 사용해보기로 했습니다.

requireJS의 기능은 동적로딩, 의존성 적용, 템플릿로드 … 정도 인것 같습니다.

공식사이트 : http://requirejs.org/docs/start.html

requireJS를 실제로 적용하기위해서 디럭토리 구조가 중요합니다.

다음은  실제로 사용하는 폴더 입니다.  -ㅅ-);;

requirejs_folder

여기서 중요하게 보실 것이 common.js 파일과 lib 폴더 입니다.

common.js는 웹페이지에서 사용할 스크립트들을 정의하는 역할을 합니다. (그리고 의존성도 관리합니다.)

lib폴더에는 jquery, undercore 등 JS라이브러리들입니다. (흔히들 많이 사용하는…)

 

구동 테스트를 위한 샘플에서는 위와 같은 폴더구조를 만들고 common.js 파일을 다음과 같이 작성하였습니다.

requirejs.config({
	baseUrl: 'js',  //js폴더 
	//스크립트 정의
	paths: {
		underscore : "lib/underscore",
		jquery : "lib/jquery"
	},
	//의존성정의
	shim: {
		underscore: {
			exports: '_'
		},
		jquery : {
			exports: '$'
		}
	}
});

baseUrl은 javascript가 저장될 폴더 path에는 사용할 자바스크립트를 모두 적어줍니다.
(모드 안적어도 상관은 없지만 js폴더(baseUrl) 기준으로 로드 되게 됩니다. 가능하면 적어두고 로드 하는것이 실제로 사용할 때 편리합니다. )
shim에서는 의존성을 정의( [‘패키지’,’패키지’] 이런식으로 정의 ) 할수 있고 export를 통해서 jquery객체를 $으로 사용할수있게 합니다.
(paths에서 정의해두면 버전이 다른 jquery를 사용할수도 있습니다.)

그리고 이제 HTML페이지에서 requriejs를 호출해 봅시다.

<!DOCTYPE html>
<html>
    <head>
        <title>requirejs TEST</title>
        <script src="js/lib/require.js" data-main="js/common"></script>
		<!-- config 로드가 data-main으로 되지 않을때 -->
		<script src="js/common.js"></script>
        <script>
            requirejs(['jquery','underscore'],function(){
				 $('body')
  				    .append('<div>jquery version: ' + $.fn.jquery + '</div>')
					.append('<div>underscore version: ' + _.VERSION + '</div>')
					.append(new Date() + "")
					;
			});
        </script>
    </head>
    <body>
		require js 테스트 테스트 테스트 테스트
    </body>
</html>

라이브러리를 로드하고나서 data-main=”js/common”를 통해서 config를 로드할수 있다고 하던데 실제로 해보니 작동하지 않아
별도로 다시 로드 시켜 보았습니다.

이 게시글 처음에 언급한 AMD방식으로 JS를 로드하는 방식과 유사하게 로드합니다.
requriejs에서 로드할 lib들의 이름을 지정하고(config기준) 그속에 JS를 코딩하게 됩니다.
물론 requriejs속에서는 $든, _를 사용할 수 있씁니다만, 밖에서는 사용할 수 없습니다. 그리고 속에서 선언된 함수선언
function을 HTML에서 onclick, onsubmit등으로 직접 호출 할 수 없음으로 $(객체).on(“click”,function(){}); 과 같이 사용해야 합니다.

위의 구동 예제로 구현된 샘플입니다.

http://jusun.org/example/requirejs/

실제로 사용하는 common.js 파일입니다. ^^ 의존성관리, 초기화가 필요한 스크립트의 처리 등을 확인해보세요.


/**
 * Created by jusun on 2016-08-04.
 */
requirejs.config({
    baseUrl: '/js',
    paths: {
        underscore : "lib/underscore",
        jquery : "lib/jquery-1.12.4.min",
        jqueryui : "lib/jquery-ui.min",
        post : "lib/tr.post",
        ckeditor : "lib/ckeditor/ckeditor",


        mathjax : "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML",
        google : "//apis.google.com/js/client:plusone.js",


        design : "kor/design",
        korcommon : "kor/kor.common",
        sns : "kor/sns",
        snsdev : "kor/sns.dev"
    },
    shim: {
        underscore: {
            exports: '_'
        },
        jquery : {
            exports: '$'
        },
        post : ['jquery'],
        korcommon:['jquery','jqueryui'],
        design:['jquery','jqueryui'],
        mathjax: {
            exports: "MathJax",
            init: function () {
                MathJax.Hub.Config({
                    showProcessingMessages: false,
                    messageStyle: "none",
                    config: ["MMLorHTML.js"],
                    jax: ["input/TeX","output/HTML-CSS","output/SVG"],
                    extensions: ["tex2jax.js"],
                    TeX: {
                        extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
                    },
                    tex2jax: {
                        inlineMath: [ ['\\(','\\)'] ],
                        displayMath: [ ["\\[","\\]"] ],
                        processEscapes: true
                    },
                    SVG:{
                        scale: 96
                    },
                    "HTML-CSS": { availableFonts: ["STIX","TeX"] }
                });
                MathJax.Hub.Startup.onload();
                return MathJax;
            }
        }
    }
});

(오늘은 정말 여기까지.. ㅋㅋ )

Leave a Reply

Your email address will not be published. Required fields are marked *