웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요?
오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다.
자바스크립트는 웹브라우저에서 작동하는 스크립트입니다.
서버 사이드가 아닌 클라이언트 기술이지요.
오래전부터 널리 사용되어 왔고 지금도 지속적으로 사용되고 있으며,
기능성 홈페이지 99% 이상이 이 기술을 사용하고 있다고 해도 과언이 아닐 겁니다.
그렇다면 jQuery 는 무슨 기술일까요? jQuery 역시 자바스크립트입니다.
다만 자바스크립트로 빈번하게 사용되는 기능들을 약간 다른 형식으로 사용하게 만든
라이브러리입니다. 프로그램 언어에서 '라이브러리'란 '도서관'의 의미보다는 '기능덩어리'라고 이해하시면 됩니다.
아래 샘플 웹페이지를 잠깐 보실까요?
<html>
<body>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<input type=text class='craytext' value='1'/><br/>
<input type=text class='craytext' value='2'/><br/>
<input type=text class='craytext' value='3'/><br/>
<input type=button onclick="$('.craytext').css('border-color', 'red')" value="변환1">
<input type=button onclick="cvt()" value="변환2">
<script>
function cvt()
{
var obj = document.querySelectorAll('.craytext');
obj.forEach(function(element){
element.style.borderColor='red';
});
}
</script>
</body>
</html>이 웹페이지의 실행결과는 아래와 같습니다.
변환1 버튼을 누르든 변환2 버튼을 누르면 결과는 같습니다만,
변환1 버튼을 누를 때는 jQuery 가 실행되고,
변환2 버튼을 누를 때는 자바스크립트가 실행됩니다.
2가지 기능 모두 3개의 동일한 클래스의 경계선 색상을 똑같이 빨강색으로 바꾸지요.
jQuery 의 작동코드는 아주 간결합니다.
$('.craytext').css('border-color', 'red')그 반면 자바스크립트는 함수를 하나 만들어 놓아야 할 정도로 코드가 약간 더 길어지지요.
<script>
function cvt()
{
var obj = document.querySelectorAll('.craytext');
obj.forEach(function(element){
element.style.borderColor='red';
});
}
</script>
만약 jQuery 의 사용법들을 많이 알고 있다면, 개발속도가 매우 빨라집니다.
위의 예시는 간단한 예이기 때문에 소스량이 적지만, jQuery의 한줄에 해당하는 기능은
자바스크립트로는 수십~수백라인을 작성해야 합니다.
이미 만들어진 jQuery 기능들의 사용법을 익혀서 쓰느냐
자바스크립트로 개발하느냐는 개발 속도에서 천지차이입니다.
하지만 jQuery 가 항상 자바스크립트보다 우월한 것은 아닙니다.
jQuery는 어디까지나 자바스크립트를 이용해서 만든 것이기 때문에,
개발 속도가 아닌 처리 속도 부분에서 성능이 떨어집니다.
몇단계를 거쳐서 실행하기 때문인데, 다만 속도 빠른 컴퓨터가 그 점을 보완해 주는 것이지요.
한 예로 id값이 'cray'인 항목의 값을 'ok'로 변경한다고 칩시다.
앞의 실례와 비슷한 사례가 아래 소스에 들어있습니다.
<html>
<head>
<title> New Document </title>
</head>
<body>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<input id='cray' value='' />
<input type=button value="변환1" onclick="$('#cray').val('ok')" />
<input type=button value="변환2" onclick="document.getElementById('cray').value='ok'" />
</body>
</html>
변환1 버튼을 누르든, 변환2버튼을 누르면 id 가 'cray' 값인 입력상자에 'ok'값이 입력이 됩니다만 사실 이 기능의 작동 성능은 근본부터 다릅니다.
결론을 말씀드리면 변환2의 자바스크립트쪽이 훨씬 빠릅니다.
위 예처럼 문서가 작은 경우 전혀 실감나지는 않겠지만,
문서 구조가 복잡하고 길수록, 특히 여러항목의 값을 동시에 처리할 때, jQuery 는 속도가 느린게 실감나는데, 자바스크립트는 매우 빠른 속도를 자랑합니다.
이는 실무에서 실례로 겪은 사례입니다.
그렇다면 어떤게 더 좋은 것일까요?
크레이는 가능하다면 둘 다 적절히 사용할 것을 추천합니다.
평상시에는 jQuery 를 익혀 사용하다가도, 빠른 속도를 요하는 부분에서는 자바스크립트를 사용하는 것이 좋습니다.
특히나 반복되는 작업에서 아주 탁월한 속도가 필요한 경우 아예,
getElementById 함수로 얻은 DOM 객체의 오브젝트를 변수에 담아놓고 해당 변수만을 제어하는 것이 베스트입니다.
값을 대입하는 작동당시 오브젝트를 찾는 일을 하지 않기 때문에 가장 빠르게 작동됩니다.
var crayInput = document.getElementById('cray'); // 항목오브젝트 요소를 변수에 담아두었다가,
:
crayInput.value='ok'; // 필요할 때 오브젝트를 참조해 변수를 대입합니다.
오늘은 잠깐 웹 분야에 대해 다루어 보았습니다 :)
아무쪼록 필요한 정보로 여겨지는 분에게 도움이 되셨기를 바라며 글을 마칩니다.
읽어주셔서 감사합니다.
'자바스크립트와 캔버스' 카테고리의 다른 글
| 자바스크립트 일반메소드 vs 프로토타입 (0) | 2019.08.24 |
|---|---|
| 제이쿼리 ( jQuery ) 의 세련된 다이얼로그 (2) | 2019.08.07 |
| 3차원 웹, 클론? 복제! - 28번째 시간 (3) | 2019.07.26 |
| 3차원 웹, 오우~ 돌핀! - 27번째 시간 (2) | 2019.07.23 |
| 3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간 (3) | 2019.07.21 |
