[jQuery] 20. 자주 하는 실수와 마무리 정리

지난 글에서는 jQuery Ajax를 사용해서 검색 기능을 만드는 방법을 알아봤습니다.

이번 글에서는 jQuery 입문 시리즈를 마무리하면서, 초보자가 자주 하는 실수와 꼭 기억해야 할 핵심 개념을 정리해보겠습니다.

jQuery는 문법이 짧고 사용하기 쉽지만, 선택자나 이벤트 처리 방식을 헷갈리면 예상과 다르게 동작할 수 있습니다.

이번 글을 통해 지금까지 배운 내용을 한 번 더 정리해보겠습니다.

1. jQuery 연결을 빼먹는 실수

jQuery 문법을 사용하려면 먼저 jQuery 라이브러리를 HTML에 연결해야 합니다.

jQuery를 연결하지 않으면 $ is not defined 같은 오류가 발생할 수 있습니다.

📌 jQuery CDN 연결

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQuery 코드를 작성하기 전에 위 코드가 먼저 연결되어 있어야 합니다.

📌 좋은 순서

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
  $("#btn").click(function() {
    alert("클릭되었습니다.");
  });
</script>

2. #과 .을 헷갈리는 실수

jQuery 선택자는 CSS 선택자와 비슷하게 사용합니다.

# : id 선택자
. : class 선택자
태그명 : 태그 선택자

📌 잘못된 예

$("title").css("color", "blue");

위 코드는 id가 title인 요소를 찾는 것이 아니라 title이라는 태그를 찾는 코드입니다.

📌 올바른 예

$("#title").css("color", "blue");

id를 선택할 때는 반드시 #을 붙여야 합니다.

3. addClass() 안에 .을 붙이는 실수

class를 선택할 때는 .을 붙이지만, addClass(), removeClass(), toggleClass() 안에는 클래스 이름만 작성합니다.

📌 잘못된 예

$("#box").addClass(".active");

📌 올바른 예

$("#box").addClass("active");

선택자로 class를 찾을 때는 $(".active")처럼 쓰고, class를 추가할 때는 "active"처럼 이름만 씁니다.

4. input 값에 text()를 사용하는 실수

input, textarea, select의 값을 가져올 때는 text()가 아니라 val()을 사용해야 합니다.

📌 잘못된 예

var name = $("#userName").text();

📌 올바른 예

var name = $("#userName").val();

일반 태그 안의 글자는 text(), 입력창의 값은 val()로 가져온다고 기억하면 됩니다.

5. text()와 html()을 헷갈리는 실수

text()와 html()은 모두 요소의 내용을 바꿀 수 있지만 동작 방식이 다릅니다.

text() : 태그를 글자로 그대로 보여줍니다.
html() : 태그를 HTML로 해석해서 적용합니다.

📌 text() 사용

$("#box").text("<b>안녕하세요</b>");

위 코드는 <b> 태그가 글자로 그대로 보입니다.

📌 html() 사용

$("#box").html("<b>안녕하세요</b>");

위 코드는 b 태그가 적용되어 굵은 글자로 표시됩니다.

6. attr()와 prop()를 헷갈리는 실수

attr()와 prop()는 비슷해 보이지만 사용하는 상황이 다릅니다.

메서드	사용 상황	예시
attr()	HTML 속성 값을 다룰 때	href, src, alt, title
prop()	현재 상태 값을 다룰 때	checked, disabled, selected

📌 링크 주소 변경

$("#link").attr("href", "https://jquery.com");

📌 체크박스 확인

var checked = $("#agree").prop("checked");

링크나 이미지 주소는 attr(), 체크 여부나 비활성화 상태는 prop()를 사용하면 됩니다.

7. $(this)를 사용하지 않아 모든 요소가 바뀌는 실수

여러 요소 중 클릭한 요소만 바꾸고 싶을 때는 $(this)를 사용해야 합니다.

📌 잘못된 예

$(".btn").click(function() {
  $(".btn").css("background", "yellow");
});

위 코드는 버튼 하나를 클릭해도 class가 btn인 모든 버튼이 바뀔 수 있습니다.

📌 올바른 예

$(".btn").click(function() {
  $(this).css("background", "yellow");
});

$(this)는 현재 이벤트가 발생한 자기 자신을 의미합니다.

8. 동적으로 추가한 요소에 이벤트가 안 걸리는 실수

append()로 나중에 추가한 요소는 처음부터 HTML에 있던 요소가 아닙니다.

그래서 일반 click 이벤트가 동작하지 않을 수 있습니다.

📌 동적으로 추가한 삭제 버튼 예시

$("#addBtn").click(function() {
  $("#list").append("<li>새 항목 <button class='deleteBtn'>삭제</button></li>");
});

📌 이벤트 위임 사용

$("#list").on("click", ".deleteBtn", function() {
  $(this).parent("li").remove();
});

나중에 추가되는 요소에는 부모 요소에 on()을 사용해서 이벤트를 위임하면 안정적으로 처리할 수 있습니다.

9. form submit에서 preventDefault()를 빼먹는 실수

form은 기본적으로 제출되면 페이지가 이동하거나 새로고침될 수 있습니다.

Ajax나 입력값 검사를 할 때는 기본 제출을 막아야 합니다.

📌 기본 형태

$("#form").on("submit", function(event) {
  event.preventDefault();

  // 입력값 검사 또는 Ajax 처리
});

event.preventDefault()를 빼먹으면 입력값 검사를 하기도 전에 페이지가 새로고침될 수 있습니다.

10. 기존 결과를 비우지 않고 append()만 하는 실수

Ajax 검색이나 목록 출력에서 append()만 계속 사용하면 기존 결과가 계속 누적될 수 있습니다.

📌 좋지 않은 예

$.each(results, function(index, item) {
  $("#resultList").append("<li>" + item.title + "</li>");
});

검색할 때마다 이전 결과 아래에 새 결과가 계속 쌓일 수 있습니다.

📌 좋은 예

$("#resultList").empty();

$.each(results, function(index, item) {
  $("#resultList").append("<li>" + item.title + "</li>");
});

새 결과를 출력하기 전에 empty()로 기존 목록을 비우면 깔끔하게 갱신됩니다.

11. Ajax error 처리를 안 하는 실수

Ajax 요청은 항상 성공하는 것이 아닙니다.

주소가 틀리거나, 서버 오류가 발생하거나, 네트워크 문제가 생기면 실패할 수 있습니다.

그래서 error 처리를 작성하는 것이 좋습니다.

📌 Ajax 기본 구조

$.ajax({
  url: "/api/posts",
  method: "GET",
  dataType: "json",
  success: function(result) {
    console.log(result);
  },
  error: function() {
    alert("데이터를 불러오지 못했습니다.");
  }
});

실패 상황을 처리하지 않으면 사용자는 아무 반응이 없는 것처럼 느낄 수 있습니다.

12. HTML 구조를 고려하지 않는 실수

parent(), children(), find(), siblings(), next(), prev() 같은 탐색 메서드는 HTML 구조에 따라 결과가 달라집니다.

예를 들어 parent()는 바로 위 부모만 찾습니다.

📌 parent()와 closest() 비교

// 바로 위 부모만 찾음
$(this).parent();

// 가장 가까운 조건에 맞는 부모를 찾음
$(this).closest(".card");

구조가 깊을 때는 parent()보다 closest()가 더 적절할 수 있습니다.

13. 너무 많은 스타일을 css()로만 처리하는 실수

css()는 간단한 스타일 변경에는 편리합니다.

하지만 여러 스타일을 반복해서 적용해야 한다면 class를 만들어두고 addClass(), removeClass(), toggleClass()로 제어하는 것이 더 관리하기 쉽습니다.

📌 css()만 사용하는 방식

$("#box").css({
  "background": "blue",
  "color": "white",
  "font-weight": "bold",
  "padding": "20px"
});

📌 class로 관리하는 방식

<style>
  .active {
    background: blue;
    color: white;
    font-weight: bold;
    padding: 20px;
  }
</style>

<script>
  $("#box").addClass("active");
</script>

스타일은 CSS에서 관리하고, jQuery는 상태를 바꾸는 역할만 하게 만들면 코드가 더 깔끔해집니다.

14. jQuery 핵심 메서드 총정리

분류	메서드	역할
선택	$()	HTML 요소 선택
내용	text(), html(), val()	글자, HTML, 입력값 처리
스타일	css(), addClass(), removeClass(), toggleClass()	스타일 변경과 class 제어
속성	attr(), prop()	HTML 속성과 상태 값 처리
표시	show(), hide(), toggle()	요소 보이기와 숨기기
효과	fadeIn(), fadeOut(), slideDown(), slideUp()	부드러운 화면 효과
추가	append(), prepend(), before(), after()	요소 추가
삭제	remove(), empty()	요소 삭제와 내부 비우기
탐색	parent(), children(), find(), siblings(), next(), prev()	주변 요소 찾기
Ajax	$.ajax(), $.get(), $.post()	서버와 데이터 주고받기

15. jQuery를 공부할 때의 핵심 흐름

jQuery는 다음 흐름으로 이해하면 쉽습니다.

먼저 HTML 요소를 선택합니다.
이벤트를 연결합니다.
사용자 동작이 발생하면 값을 가져옵니다.
조건에 따라 화면을 바꿉니다.
필요하면 Ajax로 서버와 데이터를 주고받습니다.

📌 기본 흐름 예시

$("#btn").click(function() {
  var value = $("#input").val().trim();

  if (value === "") {
    alert("값을 입력해주세요.");
    return;
  }

  $("#result").text(value);
});

선택, 이벤트, 값 가져오기, 조건 처리, 화면 출력의 흐름을 이해하면 대부분의 jQuery 코드를 읽을 수 있습니다.

16. 전체 복습 예제

마지막으로 지금까지 배운 내용을 활용해서 간단한 메모 목록 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 마무리 예제</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #memoInput {
      padding: 8px;
      width: 220px;
    }

    #addBtn {
      padding: 8px 12px;
    }

    #memoList {
      margin-top: 15px;
      padding: 0;
      list-style: none;
    }

    #memoList li {
      padding: 10px;
      margin-bottom: 8px;
      background: #eeeeee;
      border-radius: 6px;
    }

    .deleteBtn {
      margin-left: 10px;
    }

    .active {
      background: royalblue;
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>jQuery 마무리 예제</h2>

  <input type="text" id="memoInput" placeholder="메모 입력">
  <button id="addBtn">추가</button>
  <button id="clearBtn">전체 비우기</button>

  <p id="message"></p>

  <ul id="memoList"></ul>

  <script>
    $(function() {
      $("#addBtn").click(function() {
        var memo = $("#memoInput").val().trim();

        if (memo === "") {
          $("#message").text("메모를 입력해주세요.");
          return;
        }

        var li = $("<li></li>");
        var text = $("<span></span>").text(memo);
        var deleteBtn = $("<button>삭제</button>").addClass("deleteBtn");

        li.append(text).append(deleteBtn);

        $("#memoList").prepend(li);
        $("#memoInput").val("");
        $("#message").text("메모가 추가되었습니다.");
      });

      $("#memoList").on("click", "li", function() {
        $(this).toggleClass("active");
        $(this).siblings().removeClass("active");
      });

      $("#memoList").on("click", ".deleteBtn", function(event) {
        event.stopPropagation();

        var result = confirm("이 메모를 삭제하시겠습니까?");

        if (result) {
          $(this).closest("li").remove();
          $("#message").text("메모가 삭제되었습니다.");
        }
      });

      $("#clearBtn").click(function() {
        $("#memoList").empty();
        $("#message").text("전체 메모를 비웠습니다.");
      });
    });
  </script>

</body>
</html>

📌 실행 결과

input에 메모를 입력하고 추가 버튼을 누르면 목록 위에 추가됩니다.
빈 값을 입력하면 안내 문구가 표시됩니다.
메모를 클릭하면 선택 스타일이 적용됩니다.
다른 메모를 클릭하면 기존 선택은 해제됩니다.
삭제 버튼을 누르면 해당 메모만 삭제됩니다.
전체 비우기 버튼을 누르면 목록 안의 항목들이 모두 삭제됩니다.

17. 앞으로 어떻게 공부하면 좋을까?

jQuery 문법을 어느 정도 익혔다면 이제는 작은 기능을 직접 만들어보는 것이 좋습니다.

다음과 같은 미니 기능을 만들어보면 복습에 도움이 됩니다.

할 일 목록 만들기
FAQ 아코디언 만들기
탭 메뉴 만들기
검색 결과 필터 만들기
댓글 추가와 삭제 기능 만들기
Ajax로 게시글 목록 불러오기
폼 입력값 검사하기

문법만 외우기보다, 버튼을 누르면 어떤 요소가 바뀌는지 직접 만들어보는 것이 가장 좋습니다.

18. 핵심 정리

jQuery를 사용하려면 라이브러리를 먼저 연결해야 합니다.
id 선택자는 #, class 선택자는 .을 사용합니다.
input 값은 val()로 가져옵니다.
HTML 태그를 적용하려면 html(), 글자 그대로 넣으려면 text()를 사용합니다.
checked, disabled 같은 상태 값은 prop()로 다루는 것이 좋습니다.
클릭한 요소만 제어하려면 $(this)를 사용합니다.
동적으로 추가한 요소에는 on() 이벤트 위임을 사용할 수 있습니다.
form submit에서는 event.preventDefault()를 사용해야 할 때가 많습니다.
Ajax 요청에는 success뿐 아니라 error 처리도 필요합니다.
새 결과를 출력하기 전에는 empty()로 기존 결과를 비우는 것이 좋습니다.
구조가 깊은 부모를 찾을 때는 closest()가 유용합니다.
여러 스타일은 css()보다 class로 관리하는 것이 더 깔끔할 수 있습니다.

이번 글에서는 jQuery를 사용할 때 자주 하는 실수와 핵심 개념을 정리해봤습니다.

jQuery는 오래된 기술처럼 느껴질 수 있지만, 기존 웹 프로젝트나 JSP 기반 화면, 관리자 페이지, 유지보수 업무에서는 여전히 만날 수 있는 문법입니다.

처음에는 $(), click(), text(), val() 정도만 알아도 간단한 화면 조작을 만들 수 있습니다. 이후에는 이벤트, class 제어, 요소 추가와 삭제, Ajax까지 연결해서 실제 기능을 만들어보면 됩니다.

이것으로 jQuery 입문 시리즈를 마무리하겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 19. Ajax로 검색 기능 만들기 (0)	2026.06.30
[jQuery] 18. Ajax 기초 사용법 (0)	2026.06.29
[jQuery] 17. form 이벤트 사용법 (0)	2026.06.28
[jQuery] 16. siblings(), next(), prev() 사용법 (0)	2026.06.28
[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26