⭐ 문서가 로드된 후 실행하자
⭐ jQuery 라이브러리 먼저 로드하자
⭐ $ 충돌 방지 필요 시 noConflict
⭐ 이벤트 중복 방지 off()
⭐ AJAX 캐싱 방지 (cache: false)
⭐ 동적 요소에 이벤트 적용 on()
⭐ 성능 최적화 (map(), .append() 최소화)
1. 문서가 완전히 로드된 후 실행하기
선택자를 사용하기 위해서는 문서 객체를 먼저 불러와야 한다.
그래서 HTML이 로드되기 전에 jQuery 코드가 실행되면 요소를 찾을 수 없는 문제가 발생한다.
📌 해결책: $(document).ready() 사용 또는 <script>를 <body> 끝에 배치
❌ [방법 1] 잘못된 방법 (jQuery가 먼저 실행됨)
[방법1]은 제이쿼리가 먼저 실행되고 그 다음 <body> 영역에서 문서 객체를 불러왔다.
이렇게 하면 <body>가 생성되기 전에 선택자가 먼저 실행되어 선택자로 문서 객체를 선택할 수 없다.
반드시 <body> 영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수 있도록 [방법2]나 [방법3]과 같이 작성해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>잘못된 적용</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 문서가 로드되기 전에 선택자가 실행됨 (문제 발생 가능)
$("#test").text("안녕하세요!");
</script>
</head>
<body>
<p id="test">변경될 텍스트</p>
</body>
</html>
⭕ [방법 2] $(document).ready() 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>올바른 적용 (ready 사용)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#test").text("안녕하세요!");
});
</script>
</head>
<body>
<p id="test">변경될 텍스트</p>
</body>
</html>$(document).ready()를 사용하면 문서가 완전히 로드된 후 코드가 실행되므로 선택자가 정상적으로 작동함
⭕ [방법 3] <script>를 <body> 끝에 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>올바른 적용 (script를 body 끝에 배치)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="test">변경될 텍스트</p>
<script>
$("#test").text("안녕하세요!");
</script>
</body>
</html><script> 태그를 <body>의 마지막에 배치하면 문서 객체가 먼저 로드된 후 스크립트가 실행되므로 $(document).ready() 없이도 정상 동작함
2. jQuery 라이브러리를 먼저 로드하기
- jQuery를 사용하기 전에 반드시 jQuery 라이브러리를 불러와야 함
- CDN을 사용할 경우 인터넷 연결이 필요함
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>or (오프라인 사용 시)
<script src="js/jquery.min.js"></script>
3. $ 충돌 방지 (noConflict 사용)
- $ 기호가 다른 라이브러리(예: Prototype.js)와 충돌할 수 있음
- jQuery.noConflict()를 사용하면 $ 대신 jQuery 사용 가능
let $jq = jQuery.noConflict();
$jq("#test").text("안녕하세요!");
4. 이벤트 중복 방지
- $(document).ready() 내부에서 이벤트 바인딩 시, 여러 번 실행될 수 있음
- off()를 사용하여 기존 이벤트 제거 후 다시 바인딩
$("#btn").off("click").on("click", function() {
alert("버튼 클릭!");
});
5. AJAX 요청 시 cache: false 설정
- 브라우저가 AJAX 요청을 캐싱하면 새 데이터가 반영되지 않을 수 있음
- cache: false 옵션을 추가하여 항상 최신 데이터 요청
$.ajax({
url: "data.json",
type: "GET",
dataType: "json",
cache: false, // 캐싱 방지
success: function(data) {
console.log(data);
}
});
6. 동적으로 추가된 요소에 이벤트 적용하는 법 (on)
- 동적으로 추가된 요소에는 .click() 같은 이벤트가 적용되지 않음
- 부모 요소에 이벤트를 위임하면 동적 요소도 처리 가능
// 기존 요소만 적용됨
$(".btn").click(function() {
alert("버튼 클릭!");
});
// 동적 요소에도 적용됨 (이벤트 위임 방식)
$(document).on("click", ".btn", function() {
alert("동적 버튼 클릭!");
});
7. 성능 최적화 (each보다 map 사용)
- each()보다 map()이 성능이 더 좋음
- .append()는 한 번만 실행하는 것이 좋음
// 비효율적인 방식
$(".items").each(function() {
$(this).text("변경됨");
});
// 효율적인 방식
$(".items").text("변경됨");
8. 포스팅을 마치며(TMI)
jQuery가 한때 웹 개발의 표준이었지만, 요즘은 "틀딱쿼리"라는 별명이 붙을 정도로 올드한 기술로 취급되기도 한다. 그래서 필자는 jQuery가 여전히 중요한 이유를 정리해 보도록 하겠다.
놀라운 사실 2025 현재에도 jQuery를 사용하고 있는 웹이나 개발자가 상당하다는 사실이다. 2024년 기준으로 놀랍게도 전세계 웹사이트 중 76.9%가 jQuery를 사용하고 있으며 전체 JS 라이브러리 중 jQuery가 사용량 1위를 차지하고 있다. jQuery 또한 경량화와 브라우저 호환 기능 추가 등을 통해 자체적으로 성능을 향상시키고 있다.
1. 레거시 프로젝트에서 필수이다.
- 기존 프로젝트에서는 여전히 jQuery를 적극적으로 사용 중
- jQuery를 걷어내려면 많은 코드 수정이 필요하고, 기업에서는 이런 리팩토링을 꺼림
- 유지보수 및 기능 추가 시 jQuery를 다룰 줄 알아야 함
📌 예를 들면?
정부 사이트, 기업 내부 시스템, 워드프레스 플러그인, 오래된 관리자 페이지 등
2. 라이브러리 쓸 때 필요한 일이 있다.
- 부트스트랩 4 이하 버전은 jQuery를 필요로 함
- DataTables, Select2, jQuery UI 같은 플러그인도 여전히 인기
- 완전히 배제하기 어렵고, 특정 라이브러리를 사용할 때 필요함
3. 크로스 브라우징 문제
- JavaScript의 표준화가 진행되었지만, 여전히 브라우저 간 차이가 존재
- jQuery는 오래전부터 크로스 브라우징을 해결하는 역할을 해왔음
- 특히 IE 지원이 필요한 프로젝트에서는 jQuery가 매우 유용
// 이벤트 리스너를 추가하는 방식 (jQuery)
$("#btn").on("click", function() {
alert("클릭됨!");
});
// 바닐라 JS (IE 11에서 오류 가능)
document.getElementById("btn").addEventListener("click", function() {
alert("클릭됨!");
});4. 바닐라보다 코드가 짧고 간결하다
- 순수 JavaScript보다 짧고 직관적인 코드 작성 가능
- 선택자, 애니메이션, AJAX 등의 기능이 단순한 문법으로 가능
// jQuery (간단)
$.get("data.json", function(data) {
console.log(data);
});
// 바닐라 JS (길어짐)
fetch("data.json")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));5. DOM 조작이 편리하다
- append, remove, find 같은 함수가 직관적이고 사용하기 쉬움
- 그리고 이벤트 위임이 간편함
📌 예를 들면?
아래처럼 동적 요소 추가 및 클릭 이벤트 바인딩하는 코드를 보면 제이쿼리가 훨씬 간단하다는 것을 알 수 있다.
// jQuery (간단)
$(document).on("click", ".btn", function() {
alert("동적으로 추가된 버튼 클릭!");
});
$("#container").append('<button class="btn">클릭</button>');// 바닐라 JS (복잡)
document.getElementById("container").addEventListener("click", function(event) {
if (event.target.classList.contains("btn")) {
alert("동적으로 추가된 버튼 클릭!");
}
});
document.getElementById("container").insertAdjacentHTML('beforeend', '<button class="btn">클릭</button>');
하지만 새로운 프로젝트에서는 jQuery보다 바닐라 JS, React, Vue 같은 최신 기술을 우선 고려한다. 따라서 jQuery를 배우더라도 ES6+, Fetch API, CSS3를 함께 익히는 것이 중요하다. 한 마디로, jQuery가 틀딱 기술은 맞지만, 완전히 죽은 건 아니다. 아직도 필요할 때가 많으니, 기본적인 사용법은 반드시 알아두는 게 좋다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 제이쿼리 (jQuery) 위치 탐색선택자, 속성 탐색 선택자, 배열 관련 메서드 정리 (20) | 2025.02.08 |
|---|---|
| [JavaScript] 자바스크립트 제이쿼리 (jQuery) 기본선택자에 대해 알아보자! (10) | 2025.02.07 |
| [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습 (12) | 2025.02.04 |
| [JavaScript] 자바스크립트 백틱(``), 달러(${ }) 표현식 (템플릿 리터럴) (32) | 2025.01.04 |
| [JavaScript] JSON 데이터 다룰때 기본적인 JS 사용법(배열, 객체 등) (41) | 2024.12.28 |
