jQuery

jQuery는 2006년에 등장한 JavaScript 기반의 DOM 조작 라이브러리입니다.
“Write less, do more” (더 적게 쓰고, 더 많이 하자)를 목표로 만들어졌습니다.

즉,
✅ JavaScript로 하던 복잡한 작업을 간단하고 짧은 코드로 처리할 수 있게 도와주는 도구예요.

Table of Contents

Toggle

📌 왜 jQuery가 필요했을까?

초창기 웹 개발 시대엔…

브라우저마다 DOM, 이벤트 처리 방식이 달랐음
Ajax, 애니메이션 등 JavaScript로 하기엔 너무 복잡
document.getElementById(), addEventListener() 등 코드가 길고 지저분했음

👉 그래서 jQuery가 이런 문제를 한 줄 코드로 간단하게 처리할 수 있도록 도와줬습니다.

🔧 jQuery 주요 기능

기능	설명	예시
DOM 선택	CSS 셀렉터처럼 요소 선택	`$('div')`, `$('#id')`, `$('.class')`
DOM 조작	텍스트, HTML, 클래스 변경 등	`$('#title').text('Hello')`
이벤트 처리	클릭, 입력 등	`$('button').on('click', fn)`
애니메이션	페이드인/아웃 등	`$('#box').fadeIn()`
Ajax	비동기 서버 요청	`$.ajax({...})`
체이닝	여러 작업 연결 가능	`$('#box').addClass('red').fadeOut()`

📘 코드 예시

<button id="btn">눌러보세요</button>
<div id="msg" style="display:none;">안녕하세요!</div>

<script>
  $('#btn').on('click', function () {
    $('#msg').fadeIn().text('반가워요!');
  });
</script>

→ 버튼을 누르면 #msg가 나타나면서 텍스트 변경

💡 jQuery의 장점

장점	설명
✅ 문법이 간단하고 직관적	JavaScript보다 적은 코드로 많은 기능 구현
✅ 브라우저 호환성 우수	옛날 IE 포함 다양한 브라우저에서 동일하게 작동
✅ Ajax, 애니메이션 통합 지원	별도 라이브러리 없이 가능
✅ 플러그인 생태계	수많은 jQuery 기반 플러그인 존재 (달력, 슬라이더 등)
✅ 과거에는 “표준처럼” 사용됨	많은 기업/기관 사이트에 적용됨

⚠️ jQuery의 한계 (2020년 이후)

한계	설명
❌ 최신 JavaScript가 발전함	`querySelector`, `fetch`, `classList` 등으로 대체 가능
❌ 퍼포먼스 한계	가볍지만 React/Vue처럼 구조화된 방식엔 부족
❌ 규모 확장 어려움	대규모 앱에서 코드 분리, 컴포넌트화가 어려움
❌ SPA 개발 부적합	상태 관리, 라우팅 등 기능이 없음

📉 jQuery의 현재 위치

✅ 레거시 시스템 유지보수에서는 여전히 사용 중
✅ 간단한 HTML/JS 조작, 플러그인 추가용으로는 충분히 유용
❌ 하지만 React/Vue/Angular 같은 프레임워크의 등장 이후 점점 사용률은 줄어듦
❌ 2023년 StackOverflow 설문 기준 사용률 하락세 지속 중

🧠 jQuery vs 현대 기술

비교 항목	jQuery	React/Vue
구조화	✖ 전역 함수 위주	✔ 컴포넌트 구조
상태 관리	✖ 직접 구현 필요	✔ useState, Vue의 reactive 등
재사용성	✖ 낮음	✔ 높음 (컴포넌트 기반)
가독성	✔ 간단한 작업에는 최고	✔ 규모가 크면 컴포넌트 방식이 유리

✅ 요약

항목	설명
정의	DOM 조작을 쉽게 해주는 JavaScript 라이브러리
장점	쉬운 문법, 브라우저 호환성, Ajax/이벤트/애니메이션 처리
단점	SPA 구조에 부적합, 최신 JS로 대체 가능
현재 용도	간단한 UI 조작, 레거시 시스템 유지보수에 사용됨
현대 대체 기술	React, Vue, Angular, Vanilla JS (ES6+)