jQuery 는 4년 전에 웹 개발을 처음 맛보기로 공부했을 때, 마주한 녀석이였습니다. 자바스크립트로만 구현하기 복잡한 것들을 jQuery로 찾아서 넣으면 손쉽게 기능을 구현할 수 있어서 덕지덕지 사용했던 기억이 있네요…
하지만 최근 웹 개발의 트렌드는 React, Vue.js, Svelte 같은 SPA 용 프레임워크나 라이브러리로 옮겨가고 jQuery의 인기는 시들해졌다는데… 그 이유는 무엇일까요?
이번 글에서는 한 때 남용했던? JQuery를 한 번 정리해보겠습니다.
jQuery 란?
jQuery는 DOM 조작, 이벤트 처리, AJAX 요청과 같은 작업을 단순화하는 인기 있는 JavaScript 라이브러리입니다.
CSS의 부트스트랩과 유사하다고 생각하면 될 것 같습니다.
존 레식이 2006년 뉴욕 시 바캠프 (Barcamp NYC)에서 공식적으로 소개하였습니다
jQuery는 element를 선택하는 강력한 방법과 선택된 element들을 효율적으로 제어할 수 있는 다양한 수단을 제공합니다.
jQuery를 가져오는 방법
jQuery 라이브러리를 사용하기 위해서는 우선 import를 해줘야 합니다.
jQuery 라이브러리를 가져오는 방법은 2가지가 있습니다.
1. JQuery CDN을 이용하는 방법
2. 로컬에서 가져오는 방법
방법 1. jQuery CDN
jQuery CDN(Content Delivery Network)은 전 세계에 전략적으로 위치한 서버 네트워크를 통해 jQuery 라이브러리를 배포하는 것을 의미합니다.
개발자가 jQuery CDN을 사용하면 기본적으로 최종 사용자에게 지리적으로 더 가까운 서버에서 jQuery 라이브러리를 로드하므로 웹 페이지의 다운로드 속도와 전반적인 성능이 향상됩니다.
다음 코드를 head 섹션에 추가함으로써 이용할 수 있습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>위의 코드는 google에서 라이브러를 import하는 방법인데요. google외에도 다른 방법을 이용할 수 있습니다.
마이크로소프트 CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.4.min.js"></script>CDNJS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>방법 2. 로컬 호스팅
공식 jQuery 다운로드 페이지를 방문하여 최신 버전의 jQuery를 다운로드 합니다.
다운로드한 파일을 로컬 프로젝트 폴더에 저장합니다
HTML 파일의 head 섹션에 다음 줄을 추가합니다.
<script src="js_path/jquery-3.6.4.min.js"></script>jQuery 사용법
Element 선택
// Select by element name
$("p")
// Select by class
$(".myClass")
// Select by ID
$("#myId")텍스트 내용 변경
// Clear text content
$("#myElement").empty();
// Set text content
$("#myElement").text("New text");
// Get text content
var text = $("#myElement").text();HTML 태그 추가
append() 메소드를 이용해서 선택한 요소의 끝에 지정된 내용을 추가합니다.
내용은 HTML 문자열, DOM 요소, 또는 jQuery 객체일 수 있습니다.
HTML 문자열 추가
- 가장 간단해 보이는 방법 입니다.
<div id="container">
<p>This is a paragraph.</p>
</div>
<script>
// append() 메소드를 사용하여 새로운 div를 추가
$('#container').append('<div>New div added!</div>');
</script>DOM 요소 추가
- div 요소를 추가한 뒤 택스트를 추가하는 방법입니다.
이렇게 사용하는 경우가 있을까요…?
<div id="container">
<p>This is a paragraph.</p>
</div>
<script>
// 새로운 div 요소를 생성하고 텍스트를 추가
var newDiv = document.createElement('div');
newDiv.textContent = 'Newly appended div!';
// 생성한 div를 #container에 추가
$('#container').append(newDiv);
</script>jQuery 객체 추가
- 제이쿼리 객체인
$('')로 제이쿼리 객체를 생성하고 텍스트를 추가할 수도 있습니다.
<div id="container">
<p>This is a paragraph.</p>
</div>
<script>
// 새로운 jQuery 객체를 생성하고 텍스트를 추가
var newParagraph = $('<p>Newly appended paragraph!</p>');
// 생성한 jQuery 객체를 #container에 추가
$('#container').append(newParagraph);
</script>태그 보이기/숨기기
$("#myElement").toggle();속성 수정
// Set attribute
$("#myImage").attr("src", "newimage.jpg");
// Get attribute
var src = $("#myImage").attr("src");클래스 추가 및 제거
// Add class
$("#myElement").addClass("newClass");
// Remove class
$("#myElement").removeClass("oldClass");이벤트 처리
// Click event
$("#myButton").click(function() {
// Do something on click
});
// Hover event
$("#myElement").hover(
function() {
// Do something on hover in
},
function() {
// Do something on hover out
}
);CSS 조작
// Set CSS property
$("#myElement").css("color", "red");
// Get CSS property
var color = $("#myElement").css("color");애니메이션 요소
// Fade in
$("#myElement").fadeIn();
// Slide up
$("#myElement").slideUp();AJAX 요청
// Load content from server
$.get("mydata.txt", function(data) {
$("#result").html(data);
});jQuery와 Javascript 비교
JQuery 라이브러리의 기능은 Javascript로 모두 구현 가능합니다.
때로는 Javascript 코드 사용이 JQeury를 이용하는 것보다 복잡하지 않을 수도 있습니다.
다음 두 코드를 확인해보세요.
jQeury를 사용하여 DOM 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Document Structure Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
.new-element {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div id="originalContent">
<p>This is the original content.</p>
</div>
<script>
// Using jQuery to add a new element
$(document).ready(function() {
var newElement = $('<p class="new-element">This is a new element added with jQuery!</p>');
$('#originalContent').append(newElement);
});
</script>
</body>
</html>JavaScript를 통해 DOM 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Document Structure Manipulation</title>
<style>
.new-element {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="originalContent">
<p>This is the original content.</p>
</div>
<script>
// Using JavaScript to add a new element
document.addEventListener('DOMContentLoaded', function() {
var newElement = document.createElement('p');
newElement.className = 'new-element';
newElement.textContent = 'This is a new element added with JavaScript!';
var originalContent = document.getElementById('originalContent');
originalContent.appendChild(newElement);
});
</script>
</body>
</html>jQuery 예제에서는 append 메서드를 사용하여 새 요소를 추가하는 반면, JavaScript 예제에서는 기본 createElement 및 appendChild 메서드를 사용하여 동일한 결과를 얻는 것을 확인 할 수 있습니다.
jQuery의 장점
사용 편의성
jQuery는 간결하고 이해하기 쉬운 구문을 제공하여 JavaScript의 복잡한 작업을 단순화합니다. 이러한 사용 용이성은 초보자와 다른 프로그래밍 언어에서 전환하는 사람들에게 특히 유용합니다.
AJAX 단순화
jQuery의 AJAX 메서드는 비동기식 요청을 수행하는 간단하고 일관된 방법을 제공하므로 전체 페이지를 다시 로드하지 않고도 서버에서 데이터를 더 쉽게 가져오고 웹페이지를 업데이트할 수 있습니다.
jQuery의 단점
성능 오버헤드
jQuery에는 많은 유틸리티 기능이 포함되어 있으며 소규모 프로젝트의 경우 전체 라이브러리를 로드하면 불필요한 성능 오버헤드가 발생할 수 있습니다.
JavaScript의 발전
jQuery는 더 간단하고 일관된 API를 제공하여 개발자, 특히 초보자가 JavaScript로 작업하기를 더 쉽게 만들었습니다. 그러나 최신 JavaScript가 발전함에 따라 기본 API는 더욱 일관되고 강력해졌습니다.
개발자는 DOM(문서 개체 모델) API 및 ES6+ 언어 기능과 같은 기본 JavaScript 기능을 배우고 활용함으로 JQuery를 대체할 수 있습니다.
최신 웹 표준을 완전히 준수하지 않음
jQuery는 브라우저에 불일치가 많고 특정 기능이 부족한 시대에 개발되었습니다. 그러나 이제 최신 브라우저는 웹 표준을 더욱 엄격하게 준수합니다.
Promise 및 비동기 프로그래밍을 처리하는 것이 다릅니다.
jQuery는 ECMAScript 2015(ES6)에 도입된 기본 Promise보다 앞서는 자체 Deferred/Promise 구현을 사용합니다
단일 페이지 애플리케이션(SPA) 프레임워크
복잡한 웹 애플리케이션의 경우 jQuery는 React, Angular 또는 Vue.js와 같은 최신 프런트 엔드 프레임워크에서 제공하는 수준의 구조 및 구성을 제공하지 못할 수 있습니다.
AJAX 및 Fetch API
jQuery의 AJAX 메서드는 편리하기는 하지만 최신 Fetch API 및 Promise와 완벽하게 일치하지 않을 수 있습니다.