우린 바닐라자바스크립트에 대해 2주간 기초를 배웠습니다.
JS를 이제 더 편하는 사용하는 기법을 소개합니다.

20가지 비교 문법도 제공합니다.

1. jQuery란?

jQuery는
자바스크립트를 더 쉽고 짧게 쓸 수 있도록 도와주는 자바스크립트 라이브러리입니다.

한마디로, 자바스크립트의 복잡한 부분을 단순하게 만들어주는 도구입니다.

HTML 요소를 선택하거나
애니메이션을 만들거나
Ajax 요청을 보내거나
이벤트를 처리하는 일을

더 짧고 쉽게 쓸 수 있게 해줍니다.

2. jQuery는 왜 탄생했을까?

과거(2005~2006년경)에는 브라우저마다 자바스크립트 동작 방식이 달랐습니다.

인터넷 익스플로러(IE)
파이어폭스(FF)
사파리(Safari)

각 브라우저가 자바스크립트를 다르게 처리했기 때문에,
개발자는 같은 기능을 만들기 위해 복잡하고 긴 코드를 작성해야 했습니다.

jQuery는 이런 문제를 해결하기 위해 탄생했습니다.

모든 브라우저에서 코드 한 줄로 통일된 결과를 얻을 수 있게 해주었습니다.

1. jQuery란?

jQuery는
자바스크립트를 더 쉽고 짧게 쓸 수 있도록 도와주는 자바스크립트 라이브러리입니다.

한마디로, 자바스크립트의 복잡한 부분을 단순하게 만들어주는 도구입니다.

HTML 요소를 선택하거나
애니메이션을 만들거나
Ajax 요청을 보내거나
이벤트를 처리하는 일을

더 짧고 쉽게 쓸 수 있게 해줍니다.

3. jQuery의 기본 문법

jQuery는 $() 기호를 사용합니다.

HTML 요소를 쉽게 선택할 수 있습니다.

예시:

// jQuery
$("#test").text("Hello World");

// 바닐라 자바스크립트
document.getElementById("test").textContent = "Hello World";

같은 일을 하는데
jQuery는 코드가 훨씬 짧고 읽기 쉽습니다.

4. 바닐라 자바스크립트와 jQuery의 차이

항목바닐라 자바스크립트jQuery

문법 길이	상대적으로 길다	짧고 간결하다
브라우저 호환성 문제	직접 해결해야 한다	jQuery가 알아서 해결한다
로딩 속도	빠름	파일을 추가로 로드해야 함
사용 용도	최근은 바닐라로 충분	과거엔 jQuery가 필수였음

5. jQuery의 장점

코드가 짧다
여러 브라우저 호환이 쉬워진다
복잡한 작업(애니메이션, Ajax 등)을 쉽게 할 수 있다

6. 그런데 요즘은 왜 jQuery를 덜 쓸까?

요즘은 브라우저 환경이 많이 좋아져서
바닐라 자바스크립트만으로도 거의 모든 기능을 쉽게 구현할 수 있게 되었습니다.

또한 React, Vue, Svelte 같은
더 강력한 프레임워크들이 등장하면서 jQuery 사용이 줄어들었습니다.

하지만 여전히

오래된 시스템 유지보수
간단한 빠른 작업

에서는 jQuery가 유용합니다.

7. 요약 정리

jQuery는 자바스크립트를 쉽게 쓰게 해주는 라이브러리이다.
탄생 이유는 브라우저마다 다른 동작을 통일하려는 목적이었다.
차이점은 문법 길이, 브라우저 호환성, 속도 등이다.
현재는 바닐라 자바스크립트가 훨씬 좋아져서, 상황에 따라 선택적으로 사용한다.

jQuery 문법과 바닐라 자바스크립트 문법을 나란히 비교해서,
초보자가 직관적으로 이해할 수 있도록 20가지 예시

✅ jQuery vs 바닐라 자바스크립트 문법 비교 (20가지)

번호기능바닐라 JSjQuery

1	요소 선택 (id)	document.getElementById("id")	$("#id")
2	요소 선택 (class)	document.querySelector(".class")	$(".class")
3	요소 선택 (tag)	document.querySelector("p")	$("p")
4	모든 클래스 선택	document.querySelectorAll(".class")	$(".class")
5	텍스트 가져오기	element.textContent	$(selector).text()
6	텍스트 설정하기	element.textContent = "내용"	$(selector).text("내용")
7	HTML 가져오기	element.innerHTML	$(selector).html()
8	HTML 설정하기	element.innerHTML = "태그"	$(selector).html("태그")
9	값 가져오기 (input)	element.value	$(selector).val()
10	값 설정하기 (input)	element.value = "값"	$(selector).val("값")
11	CSS 스타일 변경	element.style.color = "red"	$(selector).css("color", "red")
12	클래스 추가	element.classList.add("new")	$(selector).addClass("new")
13	클래스 제거	element.classList.remove("old")	$(selector).removeClass("old")
14	클래스 토글	element.classList.toggle("active")	$(selector).toggleClass("active")
15	클릭 이벤트 설정	element.addEventListener("click", function(){})	$(selector).click(function(){})
16	요소 숨기기	element.style.display = "none"	$(selector).hide()
17	요소 보이기	element.style.display = "block"	$(selector).show()
18	애니메이션(서서히 숨기기)	직접 코딩 필요	$(selector).fadeOut()
19	새 요소 추가	parent.appendChild(newElement)	$(parent).append(newElement)
20	요소 삭제	element.remove()	$(selector).remove()

✍️ 해설 포인트

요소 선택은 바닐라보다 jQuery가 더 짧고 직관적이다.
텍스트와 HTML 다루기는 text(), html() 함수로 구분된다.
input 값 처리는 val() 함수로 읽고 쓸 수 있다.
CSS 조작이나 클래스 추가/삭제는 css(), addClass(), removeClass()로 간단히 가능하다.
이벤트 등록도 click(), hover() 같은 메서드로 쉽게 할 수 있다.
애니메이션 효과는 jQuery가 강력한 이유 중 하나였다.

✅ 요약

항목바닐라 JS는 길고, 명확하다jQuery는 짧고, 편리하다

선택	document.querySelector	$()
변경	innerHTML, textContent	.html(), .text()
스타일	element.style	.css()
이벤트	addEventListener	.click(), .on()
애니메이션	직접 구현	.fadeIn(), .slideUp()

참고로 응용코드도 제공합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>사칙연산 계산기 - 바닐라 JS와 jQuery 비교</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery CDN -->
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .container { margin-bottom: 50px; }
    input, button { margin: 5px; padding: 8px; }
    .result { margin-top: 10px; font-weight: bold; }
    hr { margin: 40px 0; }
  </style>
</head>
<body>

<h1>이 웹사이트는 숫자 두 개를 입력하고 사칙연산 결과를 보여주는 웹사이트입니다.</h1>

<!-- 바닐라 JavaScript 버전 -->
<div class="container">
  <h2>바닐라 JavaScript 버전</h2>
  <input type="number" id="vanilla_num1" placeholder="첫 번째 숫자">
  <input type="number" id="vanilla_num2" placeholder="두 번째 숫자"><br>
  <button onclick="vanillaCalculate('+')">+</button>
  <button onclick="vanillaCalculate('-')">-</button>
  <button onclick="vanillaCalculate('*')">*</button>
  <button onclick="vanillaCalculate('/')">/</button>
  <div id="vanilla_result" class="result">결과: </div>
</div>

<hr>

<!-- jQuery 버전 -->
<div class="container">
  <h2>jQuery 버전</h2>
  <input type="number" id="jquery_num1" placeholder="첫 번째 숫자">
  <input type="number" id="jquery_num2" placeholder="두 번째 숫자"><br>
  <button id="add">+</button>
  <button id="subtract">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <div id="jquery_result" class="result">결과: </div>
</div>

<script>
// 바닐라 JavaScript 부분
function vanillaCalculate(operator) {
  const num1 = parseFloat(document.getElementById('vanilla_num1').value);
  const num2 = parseFloat(document.getElementById('vanilla_num2').value);
  let result = '';

  if (isNaN(num1) || isNaN(num2)) {
    result = '숫자를 입력하세요.';
  } else {
    if (operator === '+') result = num1 + num2;
    else if (operator === '-') result = num1 - num2;
    else if (operator === '*') result = num1 * num2;
    else if (operator === '/') result = (num2 !== 0) ? (num1 / num2) : '0으로 나눌 수 없습니다.';
  }
  document.getElementById('vanilla_result').textContent = '결과: ' + result;
}

// jQuery 부분
$(document).ready(function() {
  function jqueryCalculate(operator) {
    const num1 = parseFloat($('#jquery_num1').val());
    const num2 = parseFloat($('#jquery_num2').val());
    let result = '';

    if (isNaN(num1) || isNaN(num2)) {
      result = '숫자를 입력하세요.';
    } else {
      if (operator === '+') result = num1 + num2;
      else if (operator === '-') result = num1 - num2;
      else if (operator === '*') result = num1 * num2;
      else if (operator === '/') result = (num2 !== 0) ? (num1 / num2) : '0으로 나눌 수 없습니다.';
    }
    $('#jquery_result').text('결과: ' + result);
  }

  $('#add').click(function() { jqueryCalculate('+'); });
  $('#subtract').click(function() { jqueryCalculate('-'); });
  $('#multiply').click(function() { jqueryCalculate('*'); });
  $('#divide').click(function() { jqueryCalculate('/'); });
});
</script>

</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'웹제작 강의' 카테고리의 다른 글

JavaScript 문자열 메서드: 초보자를 위한 친절한 가이드 (0)	2025.04.23
[웹개발강의] 자바스크립트로 HTML 요소 다루기 (id, class, input) (0)	2025.04.21
[웹개발강의] JavaScript for 반복문 간단한 실습용 코드 (0)	2025.04.17
[웹개발강의] JS(자바스크립트) 기초 학습자료(변수 선언 등) (0)	2025.04.15
[웹개발강의] 버튼 클릭 시 알림 띄우기 (자바스크립트 기초) (0)	2025.04.14

My Coding World

[웹개발강의] 제이쿼리(jQuery)란 무엇인가?

1. jQuery란?

2. jQuery는 왜 탄생했을까?

1. jQuery란?

3. jQuery의 기본 문법

4. 바닐라 자바스크립트와 jQuery의 차이

5. jQuery의 장점

6. 그런데 요즘은 왜 jQuery를 덜 쓸까?

7. 요약 정리

✅ jQuery vs 바닐라 자바스크립트 문법 비교 (20가지)

✍️ 해설 포인트

✅ 요약

'웹제작 강의' 카테고리의 다른 글

티스토리툴바

[웹개발강의] 제이쿼리(jQuery)란 무엇인가?

1. jQuery란?

2. jQuery는 왜 탄생했을까?

1. jQuery란?

3. jQuery의 기본 문법

4. 바닐라 자바스크립트와 jQuery의 차이

5. jQuery의 장점

6. 그런데 요즘은 왜 jQuery를 덜 쓸까?

7. 요약 정리

✅ jQuery vs 바닐라 자바스크립트 문법 비교 (20가지)

✍️ 해설 포인트

✅ 요약

'웹제작 강의' 카테고리의 다른 글

관련글

티스토리툴바