JQuery 맛보기

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

비얌

JQuery 맛보기 본문

Study

JQuery 맛보기

비얌 2008. 2. 11. 11:43

invalid-file

사내 발표용 자료로 기록 삼아 남깁니다.

목차

1. jQuery란?

- JavaScript Library

- JavaScript Library 종류

- jQuery

2. jQuery Example

- jQuery Simple Example 1

- jQuery Simple Example 2

3. jQuery 고찰

- jQuery 도입 가능성?

- 맺음말

1. jQuery란?

l JavaScript Library

Web 2.0, 사용자 중심의 Web 제공… 등등의 얘기를 듣다 보면 어떻게 제공을 해야 할 지 어떤 부분을 고려해야 할 지에 대해 고민을 할 때가 많습니다. 하지만 개발하다 보면 최종적으로 사용자에게 제공되는 페이지는 Web browser입니다. 보다 다양하면서 Dynamic(?)한 화면을 제공하기 위해서 보통 선택하는 것이 JavaScript인데요. 하지만 맨땅에 헤딩(?)하듯이 JavaScript를 작성하다 보면 불편한 점이 이것저것이 아닙니다. 게다가 Ajax라는 것을 쓰기 위해서라면 JavaScript를 모르더라도 공부하기를 강요당합니다. 허나 저와 같은 개발자는 게으름이 몸에 베어 있어, 누군가는 만들어 놓지 않았을까 구글링을 돌려보기도 합니다. 그러다 찾게 된 것이 JavaScript Library입니다.

사실 JavaScript Library는 정의를 별도로 내리기에는 좀 거시기한 부분이 있습니다. 하지만 굳이 어떤 넘이냐로 구분지으면, 그간 중구난방으로 작성되던 JavaScript 코드를 보다 편하게 보다 규격화 시켜서 더 이상의 혼란을 없애는 것이라고 보면 좋을 듯 싶습니다.(예전의 C Library와 비슷한 것이라고 생각하면 되시나, 같은 건 아니겠죠?)

l JavaScript Library의 종류

이번에 jQuery를 공부하다 보니 생각보다 훨씬 많은 JavaScript Library가 있다는 것을 알 수 있었습니다. 문제는 각각의 특징과 문법이 존재하여 서로 공통적으로 쓸 수가 없다는 것입니다. 현재 유명하다 싶은 JavaScript Library와 해당 Library들의 지원 여부와 비교 Table은 아래와 같습니다.

(from http://www.sitepoint.com/article/javascript-library)

위의 표에 나온 것이 그나마 주목받고 있는 녀석들입니다. 익숙하게 보던 녀석도 있고 처음 보는 녀석도 있습니다. 하지만 다 해볼 능력은 없고 그나마 쓰기 편하고 나름 괜찮다고 평가하는 jQuery를 이번에 공부해 보았습니다.

(보다 더 많은 자료는 아래에서 찾아볼 수 있습니다. – 기준은 Ajax 지원하는 것 입니다.

http://chandlerproject.org/bin/view/Projects/AjaxLibraries )

l jQuery

제가 조사한 바에 따르면 2006년 1월에 Released 됐다고 합니다. 개발 시, 관점은 DOM Traversal이 가능해야 하며, Event와 Ajax, Animations 기능이 제공되고 코드는 가볍고 해당 File의 Size가 최대한 작게 만들기였습니다. 실제로 prototype.js 와 비교 했을 때 file size면에서는 성공한 것 같습니다. 이 Library의 가장 큰 특징은 css selector나 XPATH로 HTML DOM객체 참조를 쉽게 할 수 있다는 것입니다. 가령,

$(“#mypoint”) 와 같은 표현은 id가 mypoint인 객체가 됩니다.

$(“#mypoint input”).val() 와 같은 표현은 id가 mypoint인 객체 안에 input 객체의 값을 얻어오는 것이 됩니다.

현재 jQuery에 대한 내용은 naver 검색을 해보기만 해도 많은 정보를 얻을 수 있고, google에서도 많은 내용이 나오지만 해당 부분에 대해 깔끔하게 정의된 내용을 찾기는 어렵습니다. 그래서 여기저기서 내용을 수집하여 아래의 예를 구성해 봤습니다. 참고하시기 바랍니다.

2. jQuery Example

l jQuery Simple Example 1

일단 jQuery를 사용하기 위해서는 Download를 받아야 합니다.

jQuery 공식 Site : http://jquery.com

jQuery Download Site : http://docs.jquery.com/Downloading_jQuery

다운 받으시면 아시겠지만, 허무하게 달랑 파일 하나입니다. 사용법은 간단합니다. 쓰고 싶은 페이지에

식으로 넣어놓기만 하면 됩니다.

이제 예제를 보도록 하겠습니다.

<html>

<head>

$(document).ready(function(){

//alert("this page is loading");

//이미지 숨기는 Animation 효과

$("img")

.click(function(){

$(".stuff").hide('slow');

return false;

})

.end()

;

//링크의 Action 제어

$("a")

.filter(".clickme")

.click(function(){

alert("You are now leaving the site.");

})

.end()

.filter(".hideme")

.click(function(){

$(this).hide();

return false;

})

.end()

;

//이미지를 다시 나타나게 하는 Action

$("a")

.filter(".myimg")

.click(function(){

$(".stuff").show('fast');

return false;

})

.end()

});

</script>

</head>

<body>

<a href="http://google.com/" class="clickme">I give a message when you leave</a><br/>

<a href="http://yahoo.com/" class="hideme">Click me to hide!</a><br/>

<a href="#" class="myimg">show Image</a>

</body>

</html>

위의 소스를 보시면 총 네가지 부분으로 나눌 수 있습니다.

1. 페이지 로딩 시 Alert을 찍는 부분

2. 이미지를 지우는 Animation 효과 부분

3. 링크를 Control 하는 부분

4. 이미지를 다시 나오게 하는 Animation 효과 부분

페이지 로딩 시 Alert을 찍는 부분에서 재미있는 효과를 볼 수 있는데, 해당 이미지가 로딩이 다되지 않을 때 Alert 문구를 찍고 나서도 이미지가 다 불러오는 것을 볼 수 있습니다. 보통 body tag에서 onload function을 쓰게 되면 해당 이미지가 다 불러오기 전에는 해당 alert이 뜨지 않게 되는데 jQuery는 이미지를 불러오기 전에 처리하는 것을 볼 수 있습니다. 즉 사용자에게 불러오는 중 이미지를 이런 식으로 붙여 놓는 것도 가능하다는 것입니다.(조급한 사용자들에게는 좋은 효과를 보여줄 수 있을 듯 합니다.

이미지를 지우는 Animation 효과 부분에서는 몇가지 조건을 주지 않았으나, div를 만들어 JavaScript 효과를 주는 방식과 비슷하게 제공할 수 있는 것을 볼 수 있습니다.

링크를 Control하는 부분을 보면 “a”라는 tag를 전체를 찾되 classname이 다른 각각의 녀석들을 찾아 별도의 Action을 주고 있습니다. 가령, 페이지 이동 전에 alert 문구를 찍거나 해당 링크로 이동이 안되면서 문구를 지우는 작업을 하게 됩니다.

이미지를 다시 나오게 하는 Animation 효과 부분에서는 위의 두 경우를 그냥 mix해놓았습니다.

한가지 더 재미있는 것은 class=”myimg” 인 녀석에 CSS를 입혀도 동일하게 동작한다는 것입니다. 즉 jQuery 처리와 CSS 처리를 같이 사용해도 된다는 것이죠. 만약 UI에서 동일한 Style을 가진 부분에는 같은 효과를 낼 수 있게 처리할 때도 유용하게 쓸 수 있을 것 같습니다.

l jQuery Simple Example 2

<index.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Hello JSP</title>

</head>

<body>

hello <%="JSP"%>~!!!<br/>

</body>

</html>

<data.txt>

aaa1|bbb1|ccc1

aaa2|bbb2|ccc2

aaa3|bbb3|ccc3

<lecture2.html>

<html>

<head>

$(document).ready(function(){

//data file 읽어 오기

$("#data").load("data.txt",function(data){

var rows=data.split("\n");

var str="";

str+="<table border=1>";

for(var i=0;i<rows.length;i++)

{

var cel;

cel=rows[i].split("|");

str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";

}

str+="</table>";

$("#output").html(str);

});

//외부 페이지 가져오기

$("#data2").load("index.jsp");

});

</script>

</head>

<body>

<br/>

</body>

</html>

위 예제를 보면 jQuery를 쓰면서 외부의 파일을 읽어 오는 것이나 외부 페이지를 넣기 위해서 frame을 선언하지는 않습니다. 단지 몇가지 설정으로 간단히 불러 오는 것이지요. 해당 부분은 워낙 간단하기에 별도로 설명하지는 않겠습니다.

3. jQuery 고찰

l jQuery 도입 가능성

제가 쓰면서 느꼈던 내용은 ‘만약 새로운 Site가 만들거나 공통적으로 적용하는 JavaScript가 별다른 문제가 없다면 되도록이면 도입하여 적용해보고 싶다’ 였습니다. 아무래도 가벼운 js 파일 Size에 반했다고 할까요? 게다가 xPath와 CSS 공통 적용은 꽤 매력적으로 보입니다.

하지만 현재 ‘위즐’에 보면 jQuery에 대한 도입을 하려고 했던 흔적을 찾을 수 있습니다. 그러나 한게임쪽 common.js에 대한 충돌이 있어 도입을 할 수 없었다고 나와있는데 정확한 언급은 없어 어떤 부분이 어떻게 충돌이 났는지는 찾을 수가 없었습니다. 이 부분에 대한 내용을 추가적으로 찾아봐야겠습니다.

l 맺음말

위에서 언급한 예를 봤을 때에는 상당히 재미있는 기능이기는 하나 ‘얼마나 쓸만할까?’라는 생각이 들 수 있습니다. 하지만 페이지에 이식하기에 가볍고 생각보다 직관적으로 보이는 문법은 상당히 땡깁니다.(^^;)

현재 JavaScript Library 계열에서도 표준화 움직임이 있는 것 같습니다. 미리미리 한번 유명한 Library를 사용해 보는 것도 나쁘지 않다고 생각합니다. 생각보다는 써보는데 시간이 많이 걸리지는 않을 것 같습니다. 심심풀이로 한 번 해보는 정도로 접근해보는 것이 좋을 듯 싶습니다.

공유하기 링크

페이스북
카카오스토리
트위터

'Study' Related Articles

Comments

비얌

JQuery 맛보기 본문

JQuery 맛보기

티스토리툴바