개발? 새발!
개발? 새발!

jQuery 2025년에도 알아야 하는 이유 (feat. 레거시 코드 살려내기)

2025.12.18

jQuery 2025년에도 알아야 하는 이유 (feat. 레거시 코드 살려내기)

안녕하세요 🙂

요즘 프론트엔드 개발자분들과 이야기하다 보면 “jQuery요? 그거 아직도 쓰나요?”라는 질문을 종종 들어요. 솔직히 React, Vue 전성시대에 jQuery를 배운다는 게 조금 시대착오적으로 보일 수도 있죠.

근데 있잖아요?

회사에 들어가 보면 생각보다 많은 레거시 코드가 jQuery로 떡칠(?)되어 있는 경우가 꽤 많더라고요...! 실제로 제가 유지보수했던 프로젝트 중 절반 이상이 jQuery 기반이었어요. 그래서 오늘은 jQuery가 뭔지, 왜 이렇게 오래 살아남았는지 한번 파헤쳐볼게요~


jQuery가 뭐냐고? 자바스크립트의 혁명이었다고!

jQuery는 2006년 존 레식(John Resig)이라는 개발자가 만든 자바스크립트 라이브러리예요. 당시에는 브라우저마다 DOM 조작 방식이 달라서 개발자들이 진짜 미쳐버릴 지경이었거든요. IE6는 이렇게 하고, 파이어폭스는 저렇게 하고... 코드가 if문 지옥이 되는 거죠.

그때 jQuery가 등장해서 “브라우저? 내가 알아서 처리해줄게~” 하면서 크로스 브라우저 호환성 문제를 깔끔하게 해결했어요. 덕분에 웹 개발 생산성이 엄청 올라갔죠!

관련 이미지 1

이미지 출처: 이랜서


기본 사용법부터 알아볼까요?

jQuery를 사용하려면 일단 CDN으로 임포트부터 해줘야겠죠?

jQuery의 핵심은 `$()` 함수예요. 이름만 봐도 알 수 있듯이 달러 표시 하나로 모든 게 시작됩니다!

기본 문법은 이렇게 생겼어요.

$(selector).action();

selector로 요소를 선택하고, action으로 뭔가를 실행하는 구조죠. CSS 선택자랑 똑같이 쓸 수 있어서 진입장벽이 엄청 낮았어요.


실제로 써보면 이런 느낌이에요

예를 들어 문서가 로드된 뒤 p 태그를 클릭하면 숨기고 싶다? 이런 식으로 쓰면 끝이에요.

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

바닐라 자바스크립트로 했으면 `addEventListener` 붙이고, `querySelectorAll` 돌면서 forEach 해야 하는데... jQuery는 그냥 한 번에 끝나버립니다. 여러 요소를 자동으로 순회해주거든요!

버튼 클릭하면 div에 테두리 생기게 하는 것도 이렇게 간단해요.

$("button").on("click", function() {
    $("#myDiv").css("border", "2px solid orange");
});

진짜 직관적이지 않나요? ㅎㅎ


DOM 조작은 jQuery의 꽃이죠

jQuery가 진가를 발휘하는 건 역시 DOM 조작일 거예요. 자주 쓰는 메소드들 정리해볼게요!

요소 추가하기

// 요소 끝에 추가
$(".container").append("새로운 내용!");

// 요소 앞에 추가
$(".container").prepend("맨 앞에 추가!");

// 요소 뒤에 추가
$(".box").after("형제 요소 추가");

요소 제거하기

$(".delete-me").remove();

요소 복제하기 (이벤트까지 포함해서!)

$(".original").clone(true).appendTo(".copy-zone");

이런 식으로 메소드 체이닝까지 되니까 코드가 엄청 깔끔해져요.

관련 이미지 2

이미지 출처: 이랜서


Ajax도 jQuery로 하면 쉽더라구요

예전에 바닐라 JS로 XMLHttpRequest 쓸 때는... 아, 그냥 생각하기도 싫더라고요(ㅋㅋ). jQuery Ajax는 정말 간결했죠.

$.ajax({
    url: "/api/data",
    method: "GET",
    success: function(response) {
        console.log("데이터 받아옴!", response);
    },
    error: function(error) {
        console.log("에러 발생ㅠㅠ", error);
    }
});

요즘이야 fetch API가 있지만, IE 지원해야 하는 프로젝트에선 아직도 jQuery Ajax가 현역이에요.


그럼 2025년에 jQuery 배워야 하나요?

솔직히 말하면... 신규 프로젝트에 jQuery 쓸 일은 거의 없어요. React, Vue, Svelte 같은 모던 프레임워크들이 훨씬 강력하거든요.

근데요! 유지보수 관점에서는 여전히 중요해요. 실제로 많은 회사의 레거시 시스템이 jQuery로 돌아가고 있고, 그걸 리팩토링하려면 일단 jQuery를 이해해야 하거든요.

최근 뉴스 보니까 “jQuery는 과거의 도구가 됐다”는 이야기도 나오던데, 저는 이렇게 생각해요. Flash처럼 완전히 사라질 기술이라기보다는, 특정 상황에서 여전히 유용한 도구라고요~

관련 이미지 3

이미지 출처: 이랜서


정리하자면요

jQuery는 자바스크립트 역사에서 정말 중요한 역할을 했어요. 크로스 브라우저 호환성 문제를 해결하고, DOM 조작을 엄청 쉽게 만들어줬죠.

2025년 현재 기준으로는 새로 배우기보다는 “레거시 코드 읽을 수 있는 정도”로 알아두면 좋을 것 같아요. 회사 들어가서 갑자기 jQuery 코드 던져지면 당황하지 말고 “아 이거 저번에 공부했던 거네!” 하실 수 있도록요!

여기까지 잘 따라오셨길 바라요~!

참고로 공식 문서는 https://jquery.com/ 에서 확인하실 수 있어요. tcpschool.com 에도 한글로 잘 정리되어 있으니 궁금하신 분들은 참고해보세요 🙂


이전 글 보기

Transformer Visualization: 블랙박스 AI를 들여다보는 방법

SpecKit vs Beads: 프론트엔드 개발 도구 비교, 어떤 걸 써야 할까?

이 블로그의 다음 이야기도 받아보세요

새 글 구독 (RSS)