jQuery 입문 — 왜 만들어졌고 $ 한 글자가 하는 일

자바스크립트를 조금 익히고 나면 jQuery라는 이름을 반드시 만나게 됩니다. 오래된 기술이라는 말도 있고 아직 현역이라는 말도 있어서 판단이 서지 않는 대상이기도 합니다. 이 글에서는 jQuery가 어떤 문제를 풀려고 태어났는지, $가 정확히 무엇인지, 첫 코드를 어디에 써야 하는지를 순서대로 정리합니다.

브라우저마다 코드를 따로 쓰던 시절

jQuery는 2006년에 공개된 자바스크립트 라이브러리입니다. 라이브러리란 자주 쓰는 기능을 미리 만들어 모아 둔 코드 묶음을 뜻합니다. 당시 개발자들이 겪던 가장 큰 고통은 문법이 어렵다는 것이 아니라, 똑같은 동작을 브라우저마다 다르게 써야 한다는 점이었습니다.

// 버튼에 클릭 동작 하나 붙이는 데 필요했던 코드
var btn = document.getElementById('noteBtn');

if (btn.addEventListener) {
  btn.addEventListener('click', openNote);   // 표준을 따르는 브라우저
} else if (btn.attachEvent) {
  btn.attachEvent('onclick', openNote);      // 옛 인터넷 익스플로러
}

버튼 하나에 클릭을 연결하는 데 조건 분기가 필요했습니다. 요소 찾기, 스타일 바꾸기, 서버와 통신하기까지 거의 모든 영역에 이런 갈래가 있었습니다. jQuery는 그 차이를 라이브러리 안쪽으로 감춰 버렸습니다. 개발자는 한 가지 문법만 쓰고, 어느 브라우저인지는 jQuery가 대신 판단합니다. jQuery가 널리 퍼진 진짜 이유는 코드가 짧아서가 아니라 브라우저 차이를 대신 감당해 줬기 때문입니다.

CDN 한 줄로 불러오기

jQuery는 설치 프로그램이 아니라 자바스크립트 파일 하나입니다. 파일을 내려받아 폴더에 넣어도 되지만, 연습 단계에서는 CDN을 쓰는 편이 간단합니다. CDN이란 전 세계에 흩어진 서버가 파일을 대신 내려주는 배포망을 말합니다.

<body>
  <button id="noteBtn">노트 열기</button>

  <!-- jQuery를 먼저 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- 내가 쓴 코드는 그다음 -->
  <script src="main.js"></script>
</body>

순서가 중요합니다. 내 코드가 먼저 실행되면 그 시점에 jQuery는 아직 없으므로 $ is not defined라는 오류가 뜹니다. 파일 이름에 붙은 min은 공백과 줄바꿈을 지워 용량을 줄인 버전이라는 표시입니다. 문서 어느 자리에 <script>를 넣어야 하는지는 HTML 문서 구조에서 다룬 내용과 이어집니다.

$ 는 마법 기호가 아니라 함수 이름입니다

입문자가 가장 신기해하는 부분이 $입니다. 결론부터 말하면 특별한 문법이 아니라 그냥 함수의 이름입니다. 자바스크립트는 변수와 함수 이름에 $를 허용하기 때문에, jQuery는 가장 짧은 한 글자를 자기 이름으로 골랐을 뿐입니다. 원래 이름은 jQuery이고 $는 그 별명입니다.

$('#noteBtn')          // 아이디가 noteBtn인 요소를 찾아 감싼 결과
jQuery('#noteBtn')     // 위와 완전히 같은 코드입니다

var $btn = $('#noteBtn');
$btn.text('노트 닫기');   // jQuery 방식은 통합니다
$btn.innerText = '닫기'; // 이건 통하지 않습니다

마지막 줄이 중요한 함정입니다. $()가 돌려주는 것은 DOM 요소 자체가 아니라, 요소를 담아 놓은 jQuery 객체라는 포장 상자입니다. 그래서 innerText 같은 순수 자바스크립트 속성은 붙지 않습니다. 원래 요소를 꺼내려면 $btn[0]처럼 배열에서 꺼내듯 쓰면 됩니다. jQuery 객체를 담는 변수 이름 앞에 $를 붙이는 습관은 이 둘을 눈으로 구분하려는 관행입니다.

$(document).ready() — 실행 시점을 맞추는 장치

브라우저는 HTML을 위에서 아래로 읽습니다. 그래서 문서 위쪽에 쓴 코드가 아래쪽 버튼을 찾으려 하면, 그 버튼은 아직 만들어지지 않은 상태입니다. 이때 오류가 나지 않고 조용히 아무 일도 일어나지 않는 것이 더 골치 아픕니다.

// 문서가 전부 읽힌 뒤에 실행해 달라는 뜻
$(document).ready(function () {
  $('#noteBtn').text('준비 완료');
});

// 실제 현장에서는 아래 축약형을 더 많이 씁니다
$(function () {
  $('#noteBtn').text('준비 완료');
});

ready 안에 넣은 코드는 브라우저가 HTML 구조를 다 읽은 다음 실행됩니다. 이미지가 전부 내려오기를 기다리지는 않기 때문에 화면이 뜨자마자 동작합니다. 초보자가 “코드는 맞는데 왜 안 되지”라고 막히는 사례의 상당수가 ready 바깥에서 요소를 찾은 경우입니다.

지금도 쓰이는 이유와 분명한 한계

같은 작업을 나란히 놓아 보면 차이가 한눈에 보입니다.

// 순수 자바스크립트
var cards = document.querySelectorAll('.note-card');
for (var i = 0; i < cards.length; i++) {
  cards[i].classList.add('active');
  cards[i].style.display = 'block';
}

// jQuery
$('.note-card').addClass('active').show();

jQuery는 여러 요소를 한 번에 다루고, 결과를 다시 이어 쓸 수 있게 설계돼 있습니다. 이 방식은 jQuery 선택자와 jQuery 이벤트에서 본격적으로 다룹니다.

다만 한계도 분명합니다. 브라우저 호환 문제가 대부분 사라져 querySelectorAll, classList 같은 표준 기능만으로 충분해졌고, 화면 규모가 커지면 React 같은 도구가 더 적합합니다. jQuery 파일 자체의 용량도 부담입니다. 그럼에도 워드프레스 테마와 오래된 관리자 화면에서는 여전히 기본으로 깔려 있어, 남의 코드를 고칠 때 읽을 줄 알아야 하는 언어로 남아 있습니다. 순수 자바스크립트 기초는 자바스크립트 입문에서 확인할 수 있습니다.

핵심 정리

등장 배경 — 브라우저마다 다른 코드를 써야 하던 문제를 라이브러리 안쪽으로 숨긴 것이 jQuery입니다.
$ — 특별한 기호가 아니라 jQuery 함수의 짧은 별명입니다.
jQuery 객체 — $()의 결과는 DOM 요소가 아니라 포장 상자이며, 요소 자체는 [0]으로 꺼냅니다.
ready — 문서가 다 읽힌 뒤 실행하게 묶어 주는 장치로, 빠뜨리면 조용히 동작하지 않습니다.
현재 위치 — 새 프로젝트의 첫 선택지는 아니지만 기존 사이트 유지보수에는 여전히 필요합니다.