주요 포인트 한눈에 보기
jQuery 4.0.0은 약 10년 만에 공개된 메이저 버전이며,
jQuery 출시 20주년을 기념해 내부 구조를 크게 정리한 버전입니다.
새로운 기능이 대거 추가되었다기보다는,
오래된 코드와 더 이상 필요 없는 기능을 제거하고
최신 브라우저 환경에 맞게 정돈한 것이 핵심입니다.
IE 구버전 지원 종료, 오래된 API 제거, 이벤트 동작 방식 변경 등
기존 코드에 영향을 줄 수 있는 변경 사항이 포함되어 있으므로,
업그레이드 전에는 반드시 변경 내용을 이해하고 적용 여부를 판단해야 합니다.
- 왜 지금 jQuery 4.0인가
- 브라우저 지원 정책 변화
- 보안 강화: Trusted Types와 CSP
- ES Modules 전환의 의미
- Deprecated API와 내부 구조 정리
- 포커스 이벤트 순서 변경
- Slim 빌드의 변화와 선택 기준
왜 지금 jQuery 4.0인가
jQuery 4.0은 단순히 버전 숫자만 올라간 업데이트가 아닙니다.
그동안 하위 호환성 문제 때문에 제거하지 못했던
오래된 코드와 예외 처리들을 정리하기 위해 공개된 메이저 버전입니다.
쉽게 말해,
“예전 브라우저 때문에 남겨두었던 코드들을 이제 정리하자”는 결정의 결과입니다.
이로 인해 코드 구조가 단순해지고,
앞으로의 유지보수와 안정성이 더 좋아지는 방향으로 바뀌었습니다.
브라우저 지원 정책 변화
jQuery 4.0부터는 IE 10 이하 브라우저가 공식적으로 지원되지 않습니다.
IE 11은 아직 지원되지만,
이는 임시적인 조치에 가깝고 이후 버전에서는 제외될 가능성이 큽니다.
또한 오래된 Edge 브라우저와
구형 모바일 브라우저에 대한 지원도 함께 종료되었습니다.
이는 “코드가 깨진다”기보다는,
해당 브라우저를 고려한 분기 처리를 더 이상 하지 않겠다는 의미입니다.
| 구분 | 변경 내용 |
|---|---|
| IE | IE 10 이하 지원 종료, IE 11은 한시적 유지 |
| 기타 | Edge Legacy 및 구형 모바일 브라우저 지원 종료 |
만약 여전히 IE 10 이하 또는 구형 브라우저를 반드시 지원해야 한다면,
jQuery 4.0이 아니라 3.x 버전을 유지하는 것이 안전합니다.
보안 강화: Trusted Types와 CSP
jQuery 4.0에서는 보안과 관련된 내부 처리 방식이 개선되었습니다.
특히 HTML 문자열을 DOM에 삽입할 때 발생할 수 있는
보안 문제를 줄이기 위한 구조가 추가되었습니다.
쉽게 말하면,
“아무 문자열이나 HTML로 넣지 못하게 해서 해킹 위험을 줄였다”고 이해하면 됩니다.
이 변화 덕분에 보안 정책이 엄격한 기업 환경에서도
jQuery를 계속 사용할 수 있게 되었습니다.
일반적인 웹 서비스에서는
별도의 설정 없이 기존 코드 그대로 사용해도 문제가 없는 경우가 대부분입니다.
ES Modules 전환의 의미
jQuery 4.0부터는 내부 코드 구조가 ES Modules 방식으로 변경되었습니다.
이는 최신 JavaScript 개발 환경에 맞추기 위한 변화입니다.
개발자 입장에서는,
jQuery를 다음과 같이 import 문법으로 불러올 수 있다는 점이 가장 큰 차이입니다.
import $ from "jquery";
React, Vite, Webpack 같은 최신 도구를 사용하는 프로젝트에서는
jQuery 4.0이 더 자연스럽게 동작합니다.
Deprecated API와 내부 구조 정리
jQuery 4.0에서는 오래전부터 사용 중단(deprecated) 상태였던 API들이
공식적으로 제거되었습니다.
대부분은 이미 브라우저 자체 기능으로 대체 가능한 것들입니다.
// 제거된 API 예시
// jQuery.isArray → Array.isArray
// jQuery.parseJSON → JSON.parse
// jQuery.trim → String.prototype.trim
// jQuery.now → Date.now
즉, jQuery 전용 함수를 사용하지 않고
표준 JavaScript 문법을 사용하라는 방향으로 정리된 것입니다.
포커스 이벤트 순서 변경
jQuery 4.0부터는 포커스 관련 이벤트의 실행 순서가
최신 브라우저 표준과 동일하게 변경되었습니다.
| 구분 | 이벤트 실행 순서 |
|---|---|
| 기존 jQuery | focusout → blur → focusin → focus |
| jQuery 4.0 | blur → focusout → focus → focusin |
대부분의 경우 체감하기 어렵지만,
이벤트 실행 순서에 의존한 코드가 있다면
동작이 달라질 수 있으므로 테스트가 필요합니다.
Slim 빌드의 변화와 선택 기준
jQuery 4.0의 Slim 빌드는
Ajax, 애니메이션, Deferred 관련 기능이 제거된 경량 버전입니다.
그 대신 파일 용량이 더 작아졌습니다.
| 상황 | 추천 빌드 |
|---|---|
| IE 11 지원 필요 | Full |
| Ajax 사용 | Full |
| 애니메이션 사용 | Full |
| 최신 브라우저만 지원 | Slim |
| React / Vite 환경 | Slim |
공식 문서 링크
자세한 내용은 아래 링크를 참고하세요!
[공식 문서 링크]
FAQ
Q. jQuery 3.x에서 4.0으로 바로 올려도 되나요?
대부분의 경우 가능하지만,
제거된 API 사용 여부와 포커스 이벤트 변경은 반드시 확인해야 합니다.
Q. jQuery Migrate는 꼭 써야 하나요?
기존 코드에서 문제가 될 부분을 미리 확인할 수 있으므로
업그레이드 과정에서는 사용하는 것이 좋습니다.
Q. jQuery 4.0은 마지막 메이저 버전인가요?
공식적으로 확정된 것은 아니지만,
대규모 정리 성격의 버전이라는 점은 분명합니다.