JS 단원 04: jQuery 핵심 문법과 현대 대체 기술

1. jQuery란 무엇인가?

2006년 등장, DOM 조작을 간편하게 만들어준 JavaScript 라이브러리
주요 목적: 브라우저 간 호환성 문제 해결, 문법 단축

2. 기본 선택자와 조작

2-1. 요소 선택

$("#id");
$(".class");
$("div > ul li");

2-2. 내용 읽고 쓰기

$("#msg").text("텍스트 변경");
$("#msg").html("<strong>HTML 변경</strong>");

3. 스타일과 클래스 조작

$("#box").css("color", "red");
$("#box").addClass("active").removeClass("hidden");

4. 이벤트 처리

$("#btn").on("click", function () {
  alert("클릭됨");
});

$("#btn").hover(
  function () { console.log("마우스 진입"); },
  function () { console.log("마우스 이탈"); }
);

5. 애니메이션 효과

$("#box").hide();
$("#box").fadeIn(300);
$("#box").slideUp();

6. AJAX 요청

$.ajax({
  url: "/api/data",
  type: "GET",
  success: function (res) {
    console.log(res);
  }
});

간단히:

$.get("/api/data", function (res) {
  console.log(res);
});

7. DOM 조작

$("<p>새 요소</p>").appendTo("#container");
$("#container").append("<p>또 다른 요소</p>");

8. jQuery가 대체된 이유

8-1. 브라우저 간 API 표준화 완료

querySelector, addEventListener, fetch 등으로 대체 가능

8-2. React, Vue 등의 컴포넌트 기반 UI로 이동

Virtual DOM과 상태 기반 렌더링 방식으로 전환

8-3. 파일 크기와 의존성 부담

jQuery 전체를 불러오는 것은 현대 SPA에서 비효율

9. jQuery → Vanilla JS 전환 예시

jQuery 방식

$(".item").on("click", function () {
  $(this).toggleClass("active");
});

바닐라 JS 방식

document.querySelectorAll(".item").forEach((el) => {
  el.addEventListener("click", function () {
    el.classList.toggle("active");
  });
});

10. 현대 프레임워크에서는?

React: 상태 기반 렌더링, DOM 직접 조작 지양
Vue: 선언적 바인딩, v-on, v-model 등 자체 문법
jQuery 사용 시: 레거시 유지보수, 간단한 정적 사이트에만 권장

요약

jQuery는 간결한 문법과 호환성 이슈 해결로 널리 사용되었음
현대 JS는 DOM API 표준화, 프레임워크 중심으로 흐름 전환
jQuery는 유지보수 프로젝트나 간단한 플러그인 구현 정도에 한정

심화학습

Q1. jQuery를 현재 프로젝트에서 사용하는 것이 문제가 되는 경우는 언제인가요?
A1. React/Vue와 혼용 시 충돌이 발생하거나, 번들 크기 증가, 유지보수 혼란을 유발할 수 있습니다.

Q2. jQuery와 fetch를 비교하면 어떤 차이가 있나요?
A2. jQuery의 AJAX는 콜백 기반이며, fetch는 Promise 기반으로 비동기 처리가 더 유연합니다.

Q3. jQuery는 더 이상 사용할 필요가 없는가요?
A3. 대부분의 SPA 및 프레임워크 기반 개발에서는 필요 없지만, 간단한 정적 페이지나 기존 유지보수에는 여전히 사용할 수 있습니다.