오늘은 제이쿼리를 공부해보았습니다. 제이쿼리를 시작하기 전에 아직 글을 전부 올리진 못했지만 HTML과 JavaScript에 대해서 공부했었습니다. 공부하기 전에 개인적으로 자바스크립트와 제이쿼리를 비교하고 둘 중 뭐가 더 우위에 있는 것인가에 대해서 검색을 좀 해보았는데 jQuery에 대한 좋지 않은 평가가 3~4년전의 글들에서 많이 나타났습니다.
그러나 올해 글이나 최근 1년전 글들에서는 jQuery에 대해 좋게 평가한 글들이 보였습니다. 아직 저는 jQuery를 시작한지 얼마 되지 않았고 배우는 단계이지만 간단한 예시들을 살펴보아도 jQuery의 1줄로 자바스크립트의 몇개의 줄을 대신할 수 있다는 것을 알 수 있었습니다.
그래서 저는 jQuery의 기능들을 깊게 배우고 싶은 것은 아니지만 배우기로 마음먹었습니다. 저는 제이쿼리와 자바스크립트 모두 공부하여 상황에 맞게 사용할 것입니다.
하지만 그렇다고해서 jQuery가 JavaScript 보다 뛰어나고 우월하다는 생각은 없습니다.
jQuery 또한 JavaScript를 이용해서 만든 것이고 개발 속도가 아니라 처리 속도 부분에서는 성능이 뒤쳐지기 때문입니다. 간단하게 아래의 예시로 처리 속도 부분이 뒤처진다는 것을 볼 수 있습니다.
★ 먼저 jQuery로 id를 변경한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
//jQuery로 클래스 추가 후 배경색 주기
$(document).ready(function(){
$('h1').css('color','blue');
$('#kobal').attr('id','kobalja');
$('h1#kobalja').css('backgroundColor','skyblue');
});
</script>
</head>
<body>
<h1>JavaScript</h1>
<h1>jQuery</h1>
<h1 id="kobal">kobalja</h1>
</body>
</html>
★ jQuery 실행결과입니다.
★ javaScript로 id를 변경한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function changeid(){
var change=document.getElementById("change");
change.id="kobalja2020";
}
</script>
</head>
<body>
<h1 id="change" onclick="changeid()">kobalja</h1>
</body>
</html>
★ javaScript 실행결과입니다.
위 예처럼 문서가 작은 경우 전혀 실감나지는 않겠지만, 문서 구조가 복잡하고 길수록, 특히 여러항목의 값을 동시에 처리할 때, jQuery 는 속도가 느리고, 자바스크립트는 매우 빠른 속도로 처리하는게 느껴지실 겁니다.
최근댓글