00. JavaScript와 Jqeury 차이

📌 JavaScript와 jQuery 정리

✅ JavaScript란?

• 웹 브라우저에서 실행되는 프로그래밍 언어
• HTML(구조), CSS(디자인)과 함께 웹의 3대 요소 중 하나
• 웹 페이지를 동적으로 제어할 수 있음

주요 활용

• 버튼 클릭, 입력창 검사 등 이벤트 처리
• HTML 요소 추가/삭제/수정 같은 DOM 조작
• 애니메이션 효과 구현
• 서버와의 통신 (AJAX, Fetch API)
• 최근에는 Node.js를 이용해 서버 개발까지 가능

👉 즉, JavaScript는 웹을 살아 움직이게 만드는 기본 언어입니다.

 

---

✅ jQuery란?

• JavaScript로 만든 라이브러리
• 같은 동작을 더 간단하고 직관적인 코드로 구현할 수 있도록 도와줍니다.
• “Write less, Do more (적게 쓰고, 더 많이 한다)”라는 슬로건으로 등장

주요 활용

• HTML 요소 선택/조작을 쉽게 ($("#id"))
• 이벤트 처리 간단히 (.click(), .hover())
• 애니메이션 효과 (.fadeIn(), .hide())
• AJAX 요청 간단화 ($.ajax())
• 브라우저 호환성 문제 해결

👉 즉, jQuery는 JavaScript를 더 편리하게 쓸 수 있는 도구입니다.

 

---

✅ 같은 동작 비교

버튼 클릭 시 문구 변경

JavaScript

document.getElementById("btn").onclick = function(){
  document.getElementById("msg").innerHTML = "변경됨!";
}

 

jQuery

$("#btn").click(function(){
  $("#msg").text("변경됨!");
});

👉 결과는 같지만, jQuery가 더 짧고 직관적입니다.

 

---

✅ JavaScript vs jQuery 차이점

구분	JavaScript	jQuery
정의	프로그래밍 언어	JavaScript로 만든 라이브러리
문법	다소 길고 복잡할 수 있음	짧고 간단함
DOM 선택	document.getElementById("id")	$("#id")
브라우저 호환성	직접 처리 필요	자동으로 처리
성능	빠름 (언어 자체 실행)	약간 느릴 수 있음
필요성	필수 (기본 언어)	선택 (편의성 ↑)

 

✅ 최근 추세

• 과거: jQuery가 브라우저 호환성을 자동으로 해결해줘서 거의 필수
• 현재: 최신 브라우저와 ES6+ JavaScript가 강력해지면서 jQuery 의존도 감소
• React, Vue, Angular 같은 프론트엔드 프레임워크가 많이 사용되면서 jQuery는 선택적인 기술이 됨

---

📝 정리

• JavaScript : 웹의 기본 언어 → 반드시 알아야 함
• jQuery : JavaScript를 더 쉽고 간단하게 쓸 수 있도록 만든 라이브러리
• 두 개는 같은 동작을 할 수 있지만, 방식과 문법이 다름
• 최신 개발에서는 순수 JavaScript를 더 많이 사용하지만,
  기존 프로젝트 유지·보수나 간단한 작업에는 여전히 jQuery가 유용