requireJs - 1. 시작하기
git : https://github.com/Jorife/requirejs_1
기존의 js는 다른 프로그래밍 언어와 다르게 프로그래밍 언어 자체로가 아닌 html문서에 의존적으로 구동하는 방식으로 동작했습니다. 그런데 단순 js만을 이용한 웹 프로그램에서는 프로그램이 복잡해지면 의존성이 불분명해지며, 이를 해결하기 위한 방법 중 하나가 requirejs입니다.
이를 이용하면 js를 class처럼 이용할 수 있으며, 각각의 HTML 페이지에 의존적인 언어가 아닌, 독자적인 언어처럼 사용할 수 있게 됩니다.
가장 먼저 준비해야 할 것은 require.js 파일이다. 다운로드 후 적당한 곳에 위치시킵니다.
https://requirejs.org/docs/download.html#requirejs
그 후 index.html을 다음과 같이 작성합니다.
<!DOCTYPE>
<HTML>
<!-- index.html -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>SAMPLE</TITLE>
<script type="text/javascript" src="./libs/requirejs/2.1.2/require.js" data-main='./app/main.js'></script>
</HEAD>
<BODY>
<button id="test1">test1</button>
<button id="test2">test2</button>
</BODY>
</HTML>src에는 requirejs를 지정해주고 data-main에는 main역할을 하게 될 js파일을 지정해줍니다.
(function(root){
/* main.js */
requirejs.config({
shim: {
// 선언한 라이브러리가 의존하는 라이브러리를 선언
// "jqueryUi" : ["jquery"]
},
paths: {
// 사용할 js의 라이브러리의 경로를 지정
// 디렉터리 경로도 지정이 가능함.
// "jqueryUi" : "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
"jquery" : "http://code.jquery.com/jquery-latest.min",
}
});
require(['jquery'],function(){
require(['./app'], function(App){
App.initialize();
});
});
})();위의 코드에서는 가장 먼저 paths에서 라이브러리 로드가 먼저 이루어지며,
shim에서 특정 라이브러리에서 의존하는 라이브러리가 있을 경우 해당 라이브러리가 로드가 완료된 후 해당 라이브러리
로드가 이루어집니다.
라이브러리 로드가 모두 이루어진 후 15번 라인에서 필요한 라이브러리를 선언해줍니다.
(의존성에 의해 미리 선언된 라이브러리의 경우 추가적으로 선언이 필요하지 않습니다.)
[e.x] 위의 코드에서 jqueryUi에 대한 주석을 풀 경우에는 15번 라인에서 jqueryUi만 선언해주면 jquery는 선언이 필요하지 않습니다.)
그 후 대괄호 내부에 로드할 js파일의 경로를 지정하고 function()의 괄호 내부에 로드한 js파일을 사용하기 위한 명칭을 지정해줍니다.
define([
// 선언할 js파일의 경로를 지정
'./work'
],
// 선언할 js파일의 명칭을 지정
function(
Work
){
'use strict';
/* app.js */
// 변수를 하나 만들어 그 안에 필요한 function을 선언
var Control = {
initialize: function(){
this.btnListener1();
this.btnListener2();
},
btnListener1: function(){
$('#test1').on('click', function(){
console.log('btn1 clicked');
});
},
btnListener2: function(){
$('#test2').on('click', function(){
Work.work(); // 현재 폴더의 work.js 파일 내에 있는 work function을 사용
alert('btn2 clicked');
});
}
};
// 해당 변수를 return 해주지 않으면 다른 js파일에서 사용이 불가능
return Control;
})app.js 파일에서는 위의 소스와 같이 대괄호 내부에는 선언할 js파일의 경로를 지정하고, function()의 괄호 내부에는
호출한 js파일의 명칭을 지정하여 마치 자바에서 다른 클래스의 메소드를 불러오는 것처럼 사용이 가능합니다.
해당 js파일에서 사용할 다른 js파일 선언까지 완료한 후에는 변수를 하나 만들어 내부에 필요한 function을 선언해 줍니다.
해당 작업까지 완료할 경우에는 해당 변수를 return해줘야 다른 js파일에서 해당 js파일의 function을 사용할 수 있습니다.
define([], function(){
'use strict';
/* work.js */
var Control = {
work: function(){
console.log('This message from work.js!!')
}
};
return Control;
})
실행 화면은 아래와 같습니다
'개발관련 > ㅤJavaScript' 카테고리의 다른 글
| 간단한 map 함수 사용법 (2) | 2022.04.11 |
|---|---|
| 배열 내의 데이터를 좀 더 직관적 선언하기 (0) | 2022.04.06 |
| 오늘과 내일의 millisecond 구하기 (0) | 2020.05.30 |
| requireJs - 2. html 로드하기 (0) | 2020.05.15 |
이 글을 공유합시다
