JQuery Plug-In (플러그인) 을 만드는 일련의 과정을 소개하면서, 실습을 통해 여러 사람들과 함께
내가 쌓은 지식을 공유해 보도록 하겠다.
우선!!! 알아야할 사항은 Plug-In(한국말: 플러그인) 이란 무엇이냐???
[1] Plug-In(플러그 인) 이란?
: 흔히들 가정에서 사용하는 가전제품을 예로 들어보자, 전기를 통하게 하기 위해서 우리의 어머니들은
가정용 콘덴서에 전기 플러그 라고 하는 놈을 꽃게 된다. 그렇게 하면 전기가 통하면서 가전제품이 작동
하게 된다. 다만, 전기 뿐만 아니라, 다양한 모양의 플러그를 통해 기기장비들끼리 연결또한 가능하다.
그렇게 연결함으로써 여러 기기 들을 하나의 기계처럼 함께 호환성을 이루는 구성도 가능하다 .
아래 그림을 한번 볼까???
|
[출처 : 구글 이미지 검색] |
|
- 왼쪽의 그림을 보면 이해가 쉬울 것이다. 저렇게 생긴놈이 실생활의 플러그 인이다. 그렇다면,!! 컴퓨터 업계에서 이야기 하는 플러그 인이란 무엇인가?
- Plug-In이란, "웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다."
- 즉, 왼쪽의 그림처럼 Web Application을 개발 할때, 플러그를 꽃았다 뻈다 하는 방식으로, 주변의 부수적인 프로그램들을 연동을 하는 방식을 말한다.
- 이때, 플러그를 꽃는 것을 Plug In(꽃다) , 빼는 것을 Plug out(빼다) 라고 명칭하는 것이 맞는 것 같다.
|
[Plug -in의 이해를 돕기 위한 그림]
이제 이정도면 Plug-in이 뭐다~~ 라는 정도는 감을 잡았을 것이다. 다음으로 jQuery에서 Plug-in
방식을 사용하는 예제를 보면서, 과연 Plug-in은 이렇게 쓰는 구나~ 하고 생각해 보기 바란다.
[2] 기존 Function 과 Plug - in의 차이점
Plug-in을 처음 사용하는 사람들은 Function 과 Plug-in의 차이점에 대해 혼돈을 하는 경향이 있다.
따라서, 이부분에 대해서 한번쯤 정리를 하고 넘어가는 것이 좋을 듯 하다. 우선 Function 과 PlugIn
방식을사용한 예제를 한번 보도록 하자.
(Function 을 사용 한 예제)
<script language="javascript">
$(document).ready(function(e){
alertFunction("This is function test");
});
alertFunction = function(msg){
alert(msg);
};
</script>
위 코드는 전형적인 jquery function을 선언한 것이다. alertFunction 이라는 Function을 선언하여
호출한 예제이다. 03번 라인을 보면 호출부가 특정 엘리먼트를 가지고 호출하는 것이 아닌 Function명
을 통해서 바로 호출하도록 되어있다.
(Plug-in 을 사용한 예제)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready({
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
위 예제를 보도록 하자. 13번 Line의 $( "#dialog" ).dialog(); 부분을 유심히 볼 필요가 있다.
전자의 Function에 비해서 특정 엘리먼트에서 chain 방식으로 dialog() Function을 호출하고 있다.
지금쯤이면, 뭔가 차이점을 느꼈을 것이다. 즉!!!
Plug-in은 외부에 만들어 놓은 Function을 자신이 원래 가지고 있더 내장 함수인 마냥 착각을 일으키기
때문에, jQuery 내부에 있는 Function을 호출하는 것 처럼 해당 엘리먼트에 chain방식으로 호출이 가능하다.
즉,!! Dialog 라는 외부 Plug-in 모듈을 가져와 script tag로 모듈을 in(내부에 콘덴서에 연결)한 후,
내장 Function인 마냥 사용을 하게 되는 것이다.!!
Are You Understand???
휴~ 많이 썼더니 골이 아프네~~~ ㅋㅋ
오늘은 여기까지 다음시간에는 jQuery 작성시 주의해야할 주의사항에 대해 작성해 보도록 하겠다.
주의 사항에 대해 훑고 나서, 본격적인 플러그인 제작에 들어가도록 하겠당!!!
본 자료는 대학내 연구실 연구원들의 교육용 자료로 활용될 예정이오니 불법 펌을 금합니다.
- 2013.02.05 랑이 씀 -
